이번주 클론코딩: 넷플릭스
1. 현재 진행 상황
이번주부터 새로운 클론 코딩으로 넷플릭스 화면을 하고 있다.
우선 마크업은 구분이 뚜렷하게 되어 있는 편이기 때문에, header-section-footer로 구분해서 마크업은 완료했다.
오늘은 각각의 input이나 button,등을 모듈링 해서 정리 했는데,
여기서 크나큰 문제를 만났다...
2. select 태그
넷플릭스 사이트에 들어가면 한국어와 영어를 선택할 수 있는 버튼이 있다.
이 버튼이 자주 쓰일 수 있을거 같아서 모듈링 하는데 장애물을 만났다.
<select id="sel-lan">
<option value="한국어" selected>한국어</option>
<option value="English">English</option>
</select>이렇게 작성했고, 지구 모양과 화살표 모양은 가상요소로 넣으려고 하는데..
절대로 뭔짓을 해도 그림이 보이질 않는다ㅠㅠ😭
같이 공부하는 분들의 도움을 많이 받았다.
우선 mdn에서도..
select는 내부 구조가 복잡해 통제하기 힘들며 브라우저간의 차이로 일관적익 결과가 나올 수 있기때문에, 요소의 모든 부분을 통제할때는 적합한 스타일일을 제공하는 라이브러리를 고려하세요.
라고 나와있다..
3.문제점
우선 replaced element(대체요소)는 가상요소를 사용할 수 없다.
여기서 replaced element(대체요소)는 자신의 표현결과가 css의 범위를 벗어나는 요소를 말한다.
제가 이해한건 고유한 스타일을 가지고 있는 태그들을 얘기하는 거 같다
자신의 컨텐츠(스타일)이 현재 문서 스타일을 영향을 받지 않는 것들!!
iframe
video
embed
img
이런 태그들이 대표적 이다.
또, 특정한 경우에만 대체 요소로 취급되는 것들이 있는데..
option
audio
canvas
object
이러한 태그들의 스타일을 변경하는 방법은 2가지를 추천하고 있다.
4.해결책
- 이들을 모두 포함하는 태그를 만들어 꾸민다.
- 다른 요소와 자바스트립트를 이용해 완전 다른 드롭다운 메뉴를 만든다.
- appearance를 이용해 싹지운다.
- 라이브러리를 이용한다.
이러한 방법들이 있다고 한다.
💡 나는 앞뒤에 가상요소만 붙이면 되는 간단한 수정이었기 때문에
div로 감싸서 문제를 해결했지만, 다른 변경이 필요한 경우는 굉장히 까다로워 질거 같다.
<div class="btn-lan">
<label for="sel-lan" class="hidden-txt">언어선택</label>
<select id="sel-lan">
<option value="한국어" selected>한국어</option>
<option value="English">English</option>
</select>
</div>
.btn-lan::before {
content: '';
background: url(./img/globe-solid.svg);
width: 13px;
height: 14px;
position: absolute;
top: 3px;
left: 10px;
}
.btn-lan::after {
content: '';
background: url(./img/caret-down-solid.svg) no-repeat;
width: 22px;
height: 40px;
position: absolute;
top: -9px;
right: 2px;
}이번기회에 굉장히 낯설은 select를 이용해보고 공부를 했다.
역시 태그하나하나 꼼꼼히 알아보는 과정이 꼭필요한거 같다.
그냥 체크박스 같은거겠지? 생각했던 나를 반성한다.
