✒️<nav>에 스타일 주기
✍️예시
<body>
<nav style = "background-color: black;">
<ul>
<li><a hrdf = "#"> HOME</a></li>
<li><a hrdf = "#"> BOARD</a></li>
<li><a hrdf = "#"> MEMBERSHIP</a></li>
</ul>
</nav>
</body>✒️<ul> 에 있던 . 없애기
🧩
list-style: none;
✍️예시
<style>
nav ul{ list-style: none; }
</style>
<body>
<nav style = "background-color: pink;">
<ul>
<li><a hrdf = "#"> HOME</a></li>
<li><a hrdf = "#"> BOARD</a></li>
<li><a hrdf = "#"> MEMBERSHIP</a></li>
</ul>
</nav>
</body>✒️ 가로 정렬하기 : flex
🧩 기본적으로 세로 정렬
🧩display: flex;
✍️예시
<style>
nav ul{ list-style: none; display: flex;}
</style>
<body>
<nav style = "background-color: pink;">
<ul>
<li><a hrdf = "#"> HOME</a></li>
<li><a hrdf = "#"> BOARD</a></li>
<li><a hrdf = "#"> MEMBERSHIP</a></li>
</ul>
</nav>
</body>✒️ 여백 주기 : margin , padding
🧩 margin
바깥쪽 간격(거리)띄우기.
4곳 -> (0,0,0,0) = (위, 오른, 아래, 왼)
2곳 -> (0,0) = (위,아래) , (왼,오른)
🧩margin: ~px;
🧩 padding
안쪽 여백을 줘서 두께 조정
🧩padding: ~px;
✍️예시
<style>
nav ul{ list-style: none; display: flex;}
nav ul li{ margin : 0 13px; padding : 10px 10px;}
</style>
<body>
<nav style = "background-color: pink;">
<ul>
<li><a hrdf = "#"> HOME</a></li>
<li><a hrdf = "#"> BOARD</a></li>
<li><a hrdf = "#"> MEMBERSHIP</a></li>
</ul>
</nav>
</body>✒️ text 밑줄 없애기
🧩
text-decoration: none;
✍️예시
<style>
nav ul{ list-style: none; display: flex;}
nav ul li{ margin : 0 13px; padding : 10px 10px;}
nav ul li a{ text-decoration: none; }
</style>
<body>
<nav style = "background-color: pink;">
<ul>
<li><a hrdf = "#"> HOME</a></li>
<li><a hrdf = "#"> BOARD</a></li>
<li><a hrdf = "#"> MEMBERSHIP</a></li>
</ul>
</nav>
</body>✒️ text 밑줄이 떨어지는 효과주기
🧩
:hover
✍️예시
<style>
nav ul{ list-style: none; display: flex;}
nav ul li{ margin : 0 13px; padding : 10px 10px;}
nav ul li a:hover {
color : orange; padding-bottom: 3px; border-bottom: 3px solid black; transition : all 0.25s;}
</style>
<body>
<nav style = "background-color: pink;">
<ul>
<li><a hrdf = "#"> HOME</a></li>
<li><a hrdf = "#"> BOARD</a></li>
<li><a hrdf = "#"> MEMBERSHIP</a></li>
</ul>
</nav>
</body>border-bottom : 밑줄 두께 1px에 모양은 solid(줄로 표현)
transition : 0.25초 안에 완수해라
✒️ 맞지 않는 두 영역 크기 맞추기
부모를 벗어나는 값에 대해 hidden으로 숨긴다.
🧩overflow: hidden;
✍️예시
hello
css
<style>
.div02 { background-color : blue; height: 100px;}
.div02 div{ background-color: red; width: 200px; height: 200px; }
</style>
<body>
<div class = "div02">
hello
<div>css</div>
</div>
</body>.div02 div : div02에 종속되있는 태그
div02 클래스를 보면 div쪽이 200px로 위의 부모태그 100px보다 크다보니 원래 영역을 벗어난게 보인다.
✍️해결
hello
css
<style>
.div02 { overflow: hidden; background-color : blue; height: 100px;}
.div02 div{ background-color: red; width: 200px; height: 200px; }
</style>
<body>
<div class = "div02">
hello
<div>css</div>
</div>
</body>벗어나있던 빨간 영역 부분이 파란 영역 부분에 맞게 숨겨져있다.
꾸준히 성장하는 개발자