[CSS3] HTML/CSS 9일차

HTML / CSS

✔ Preview

box-sizing, transition, nth-child() 속성과 nav, aside 태그 정리

---

✍ Summary

Box-sizing

: 박스의 크기를 어떤 것을 기준으로 계산할 지 정하는 속성이다. list에서 float를 left로 설정하고 width를 100%/(list 갯수) 로 설정한 후, box-sizing을 border-box로 설정하면 list가 수직방향으로 나오지 않고 수평하게 배치된다.

종류	설명
content-box	콘텐트 영역을 기준으로 크기를 정함
border-box	테두리를 기준으로 크기를 정함
initial	기본값으로 설정함
inherit	부모 요소의 속성값을 상속받음

 

ul li {
	box-sizing: border-box; /* margin을 제외하고 border와 padding을 포함해 계산해줌 */
	float: left;
	width: 20%; /* list 갯수가 5개 (100%/5 = 20%) */
	padding: 10px;
}

 

 

Transition

: 속성 값이 변화되는 경우, 요소가 화면에 출력되는 시간을 설정해 부드러운 시각적 효과를 주는 속성이다. 원하는 초(sec)를 선택할 수 있고 초(sec)가 길어질 수록 출력(로딩)시간이 길어진다.

ul li a {
	text-decoration: none;
	color: #ff8000;
	background-color: yellow;
	
	display: block;
	font-size: 17pt;
	text-align: center;
	
	height: 30px;
	padding: 10px 0;
	
	border-bottom: 5px solid green;
	border-radius: 0 0 10px 10px;
	
	transition: 0.5s; /* 속성 값이 변화될 경우, 0.5초 동안 출력 */
}

ul li a:hover {
	border-bottom: 15px solid green; /* hover를 통해 변화가 되면 0.5초 동안 스르륵 요소가 변화함 */
}

 

 

nth-child()

: 형제의 목록에서 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정한다. 인덱스는 1부터 시작한다.

ul li:nth-child(1) {
	border-left: 5px solid green; /* list의 첫번째에 적용됨 */
}

ul li:nth-child(even) {
	border-left: 5px solid green; /* list의 짝수에만 적용됨 */
}

 

 

Navigation link

: nav 태그는 다른 페이지나 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용된다. 메뉴, 목차, 인덱스 등에 주로 사용된다

 

Aside

: aside 태그는 본문 영역의 옆에 사용하는 태그이다. 공지사항이나 문의사항, 광고배너 등을 표시할 때 주로 사용한다.