<body>
<div id="displayBorder">
<ul>
<li><a href="#">메뉴A</a></li>
<li><a href="#">메뉴B</a></li>
<li><a href="#">메뉴C</a></li>
<li><a href="#">메뉴D</a></li>
</ul>
</div>
</body>/* [displayBorder] */
#displayBorder ul li {display: inline-block; margin-right: -6px; border-bottom: 1px solid rgb(0, 0, 255);}
/* inline, inline-block 요소들은 나열했을 때 4px정도의 여백이 사이에 생긴다.
i. 가독성때문에 권하지 않음: 그때 html문서에서 li, /li태그의 간격을 띄지 않고 붙여주면 된다.
ii. padding은 음수가 적용될 수 없다. margin에 약-5px을 준다. (브라우저 별로 사이즈를 달리 적용해야 한다)*/
#displayBorder ul li a {display: block; padding: 10px 30px; font-weight: bold;}
#displayBorder ul li a:hover {padding-bottom: 5px; border-bottom: 5px solid rgb(112, 83, 51); color:#379eff;}
#displayBorder ul li a:focus {padding-bottom: 5px; border-bottom: 5px solid rgb(112, 83, 51); color:#379eff;}네비게이션바를 만드는 또 다른 방식으로는 block요소인 li를 inline요소로 만드는 것이다.
또한 margin값을 주었기 때문에 inline중에서도 block의 크기 조절 능력도 지닌 inline-block으로 만들었다.
*하지만 inline요소로 내용을 수평방향으로 나열하면 생기는 단점이 있다*
내용 사이에 4~6px정도의 공백이 생긴다는 것이다.
이를 해결하기 위해
i. html문서에서 li, /li태그의 간격을 띄우지 않고 붙여쓰기 : 가독성 때문에 권하지는 않는 방식
ii. -5px씩 간격주기 : padding은 음수가 적용되지 않기 때문에 margin-right에 준다.
(나는 두 번째 방식도 별로라는 생각이 든다..ㄱ-
반응형 만들 때 일일히 다시 재조절해야해서 번거로울 것 같기 때문이다)
흠.. 혹시라도 더 괜찮은 방식을 찾은 사람이 있다면
덧글로 언제든지 알려주세요.
저도 복습 다하고 더 있는지 살펴봐야겠어요 ㅋㅋㅋㅋㅋ
예전에 둘러봤을 땐 font-size를 0px로 만든다 등등 다양한게 있었던것 같긴한데
정답이 있다기 보다는 융통성을 발휘해서 그때그때 맞는 방식으로 적용해야할 것 같네요.
그 밖에 알게된 것들
* background관련 속성 (한번에 background에 축약형으로 쓸 수 있다)
background-color: 배경색;
background-image: url("배경사진경로");
background-repeat: repeat(기본값); ex). repeat-x, repeat-y,
background-position: left/center/right(가로기본값) top/center/bottom(세로기본값);
*border관련 속성 (한번에 border에 축약형으로 적을 수 있다)
border-width: 두께;
border-style: 모양; ex). solid, dashed, dotted;
border-color: 색상;
*alt(대체텍스트)사용해야 하는 이유
1. 인식의 용이성(Perceivable)
1.1 적절한 대체 텍스트 제공
1.1.1 적절한 대체 텍스트 제공
대체 텍스트가 필요없는 장식용 이미지일 경우 alt속성을 제거하면 접근성에 위배되므로
alt를 쓰되 인용기호 안을 비워둔다.
출처
- 2020 국비교육과정 공부내용
'CSS' 카테고리의 다른 글
| [CSS] 간단한 네비게이션바 만들기 (4) 가상 요소 이용하기 (0) | 2020.08.13 |
|---|---|
| [CSS] 글꼴 (0) | 2020.08.12 |
| [CSS] BOX모델 (0) | 2020.08.12 |
| [CSS] 간단한 네비게이션바 만들기 (1) float, (2) height를 이용하기 (0) | 2020.08.11 |
| [CSS] CSS 기초 (0) | 2020.08.10 |