1. CSS 선택자 우선순위 이모저모
- 같은 선택자 레벨에서 가상클래스(예. :hover)를 적용할 경우, 우선순위가 더 높아진다.
2. img요소 하단에 생기는 알 수 없는 빈 공간 파헤치기
이유: 이미지가 인라인 요소이기 때문에 인라인 기준점인 베이스라인 위로 배치가 된다. 그리고 알파벳 y 등 베이스라인을 넘는 텍스트 들이 있기 때문에 베이스라인 아래에도 공간(decender height)이 생긴다.
해결방법: 초기화를 해주어야 한다.
- 권장하지 않는 간단한 해결방법: 이미지가 인라인 요소라 발생하는 문제이기 때문에 display:block으로 바꾸어 준다. 하지만 나중에 의도치 않는 혼란이 발생할 수 있으므로 지양한다. 이유는 협업 시 보통 이미지는 인라인요소라고 생각하기 때문에 문제가 발생할 수 있는것이다.
- 추천방법: 베이스라인의 위치를 바꿔준다. vertical-align: top ;
기존에 이랬던 이미지가 vertical-align을 top으로 바꿔주면...
이런식으로 배치되며 아래 공간이 사라지게 된다!!
사실 기준선이 Top으로 배치하게 되면서 이미지가 top 기준선의 아래로 배치하게 되는 것이다. 이때 위에 아주 넓은 빈 공간이 남게 되는데 이것을 삭제하게 되는 것이다.
3. 가상요소를 활용한 5가지 예제
1. 변화하는 숫자 옆에 '단위' 유지하기
.example:after{ content: 'cm' }라는 가상요소를 사용하게 되면 example 클래스 요소의 우측에 'cm'라는 가상요소가 유지된채 보이게 된다. 여기서 유지된다는 말은 JS로 example의 요소 값이 변경이 되어도 이 가상요소는 변함없이 보인다는 의미이다. (컨텐츠의 앞에 무언가를 넣으려면 :before 가상요소를 사용한다.)
주의할 점: 가상요소는 철저히 꾸밈요소이다. 따라서 SEO(검색엔진)이나 스크린리더에 읽혀지지 않는다. 그렇기에 만약 중요한 내용이라면 가상요소를 이용해선 안된다.
*Tip: :hover는 가상요소가 아닌 가상클래스이다. CSS2.1에서는 구분없이 새미콜론(:) 하나를 사용하지만, CSS3 이후부터는 가상요소는 :: 가상클래스는 : 로 구분짓기 시작했다. 하지만 아직 하위브라우저를 고려해야 하기 때문에 CSS2.1 버전대로 새미콜론(:) 하나만 사용해준다.
2. 툴팁 만들기(CSS로 동적인 웹페이지 만들기)
'툴팁' 텍스트 변환 방법: 현재 툴팁은 html에 있는 a 태그이다. 이때 a태그에 title속성을 넣어주고 원하는 텍스트를 작성한다. 그리고 CSS에서 content 부분을 content: attr(title) 로 수정해주면 된다. 이렇게 JS의 도움 없이 CSS만으로도 동적인 웹페이지 구성이 가능하다.
이외에도 다양한 기능들이 있다.
3. 인라인 요소끼리 붙어 있을 때, enter로 인해 공간이 생기는 것을 방지하는 방법
float:left 혹은 right를 적용해준다.
4. 자식 요소에 position: absolute 가 내 맘대로 안 될 때
자식 요소에 position을 absolute로 주고 위치를 지정하면 페이지 기준으로 보이게 된다.
이때 부모 요소 안을 기준으로 삼고 싶은 경우가 대부분일 것이다.
따라서 이럴때는 부모요소의 position을 relative로 주면 해결된다.
5. 네비게이션에서 내가 여태까지 클릭한 디렉터리 목록 보여주는 방법(강의 25:00 참고)
*TIP
TIP1: 가상요소로 만들어진 것은 inline요소이다. 따라서 백그라운드이미지 등을 넣을때 display를 inline-block으로 바꿔줘야 한다.
TIP2: 텍스트 옆에 사용하는 아이콘의 경우 vertical-alingn: top 을 이용해 가운데 정렬을 할 수 있다.
6. absolute 상황에서 가운데 정렬 하는 방법
https://www.youtube.com/watch?v=vdvLfkn9wp4
'멋쟁이사자처럼FE 2기 > 추천 강의' 카테고리의 다른 글
| 빔캠프_OACSS 시리즈(4~5강) (0) | 2022.04.07 |
|---|---|
| 스타트업 A to Z_ 이호준 강사님 (2) | 2022.04.05 |