오늘 하루 한줄평: 5월 6일은 대체공휴일이었습니다. 까먹고 TIL안 쓴거 아닙니다!
오늘 배운 내용
- 이미지를 클릭 했을 때 페이지를 이동시키고 싶다면 <a>태그 안에 <img>를 넣어 구현하면 된다. <a> 태그 자체가 구역이 되기 때문이다.
- <select>태그는 드롭다운 태그이다. <select>태그 안에 <option>을 넣어 선택할 수 있는 목록을 넣을 수 있고, <option>태그의 수만큼 목록이 생긴다. 만약 js파일에서 선택된 <option> 태그의 정보를 알고 싶다면 다음과 같이 사용하면 알 수 있다.
let dropdown = document.getElementById(dropdownId);
console.log(dropdown.value) // 선택된 목록의 value 속성값
console.log(dropdown.options[dropdown.seletedIndex]) // 선택된 목록의 Element
console.log(dropdown.options[dropdown.seletedIndex].text) // 선택된 목록의 Element의 text
- html파일에는 3가지 방식으로 style또는 script를 넣을 수 있다. 첫번째로 특정 html 태그안에 작성하는 인라인(inline)방식, 두번째로 <style></style> <script></script>와 같이 태그로 감싸서 작성하는 임베드(embedded)방식, 마지막으로 외부 파일로 작성하여 html파일로 가져오는 외부(external)방식이 있다. 3가지 전부 작성돼어 중복되는 경우, 우선순위는 인라인 > 임베드 > 외부 순으로 인라인 방식이 가장 우선순위가 높으며 중복되는 속성은 우선순위가 높은 속성으로 덮어쓰여진다.
- 특정 스크립트를 http링크를 통해 작업 중인 자바스크립트에 끌고오고싶다면 다음과 같이 사용하면 된다.
// 스크립트 Element 생성
const $encryptScript = document.createElement('script');
// 스크립트 주소 저장
$encryptScript.src = "https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js";
// head에 해당 스크립트 자식노드로 추가.
document.head.appendChild($encryptScript);
오늘 한 일
- dev branch에 올라간 승민님이 만든 모달을 내 branch에서 pull origin dev로 들고 와서 내가 만든 상세페이지랑 충돌이 발생하는 지 확인하고, 버튼 클릭 시 모달 기능이 작동하도록 코드를 고쳤다.
- 상세 페이지에 메인 페이지로 돌아갈 수 있는 홈 버튼을 추가하였고, 모달에서 드롭다운을 통해 별점을 매길 수 있는 기능을 추가했다.
오늘 하루는?
- 팀 프로젝트가 마무리 되어가고 있다. 상세페이지는 오늘 다 만들었는데 메인 페이지는 언제 만드나 걱정이된다. 개발 기간이 하루남았는데 메인 페이지 CSS는 언제 만들어서 주려는 지 모르겠다. 내가 맡은 상세 페이지는 다 만들었으니 기다리고 있을 수 밖에 없다.
