Programming/HTML, CSS 구조 확실히
float 연습2
써리얼
2021. 8. 2. 15:34
새로 알게 된 것 :
0. Semantic tag :
길 잃은 사람들에게 의미 전달할 수 있는 태그
header, footer 같은 태그
보면 바로 의미를 알 수 있다.
div, span 태그는 이름만 봐선 알 수 없다.
꼭 써야하는 건 아니지만 검색엔진 robot이 읽기 쉽도록 권장사항이다.
1.
*div.nav > ul > li > a {
display: block;
}
a의 부모 li 크기만큼 영역이 늘어남
원래 마우스를 올리면 딱 글씨영역에만 링크가 설정되는데
block으로 설정하게 되면 파랑색 영역이 모두 링크로 연결돼서 클릭하기가 쉬워짐.
+
li에만 height값 지정해주면 a 영역이 늘어난 게 아니라서
길이는 길어지는데 누를 수 x
2. 위에서 a:visited 처럼 a값을 지정해서 줘서 우선순위 먼저 적용됨
그래서 뒤에서 li:hover 하고 글자 색깔 변경해도 적용되지 않음
a:hover {
color: white
}
이런식으로 해야 값이 적용됨.
3. div.nav(class명) > ul > li:nth-child(2n) {
background color ...
}
짝수마다 색깔이 다르게 표현 가능
4. in-line 태그일때 text-align 가운데 정렬 가능
block이면 안됨
block 단위일 때 margin: auto로 가운데 정렬 가능
