[CSS3] HTML/CSS 16일차

HTML / CSS

✔ Preview

transition, position, background, box-sizing 복습

---

✍ Summary

Transition

: 속성에 변화가 있을 때, 값의 변화가 특정 시간동안 이루어지도록 하는 속성이다.

nav {
	position: relative;
	margin-left: 15%;
	width: 85%;
	height: 35px;
	background-color: #001020;
	transition: all 0.5s;
}

 

 

Position

: 문서 내에서 요소의 위치를 지정하는 속성이다. static, relative, fixed, absolute, sticky 이렇게 5가지를 사용할 수 있다.

종류	설명
static	다른 태그와의 관계에 의해 자동으로 배치되며 위치 임의 설정 불가능 (기본값)
relative	원래 있던 위치를 기준으로 위치 설정
fixed	스크롤과 상관없이 항상 문서의 좌측 상단을 기준으로 좌표 고정 * 고정 위치는 변경 가능
absolute	절대좌표로 위치 지정 * 부모가 relative인 경우, 부모를 기준으로 절대좌표 위치 지정 가능 * 만약 부모가 relative가 아닌 경우, 상위 부모를 계속해서 탐색함
sticky	평소에는 static처럼 작동하지만 특정 임계점에 이르면 fixed처럼 좌표 고정

 

• relative 예시

header {
		position: relative;
		width: 100%;
		height: 80px;
	}

 

 

Background

: 웹의 배경을 선택할 때 사용되는 속성이다. 색, 이미지, 이미지 크기, 이미지 위치 등을 설정할 수 있다.

body {
	background-color: beige; /* 배경색 설정 */
	background-image: url('../images/img1.jpg'); /* 배경 이미지 설정, css에서는 url('')의 형태로 작성 */
	background-repeat: no-repeat; /* 배경 이미지 반복 설정 */
	background-position: center; /* 배경 이미지 위치 설정; 너비 맞춰서 중앙정렬 */
	background-size: cover; /* 너비에 맞춰 가득 채워짐 */
}

 

 

Box-sizing

: 박스의 크기를 화면에 표시하는 방식을 변경하는 속성이다. 테두리가 있는 경우에는 테두리의 두께로 인해 원하는 크기를 찾기가 어려운데 이러한 문제점을 보완하기 위해서 만들어진 속성이다.

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

• border-box 예시

ul li {
	box-sizing: border-box; /* margin을 제외하고 border와 padding을 포함해 계산해줌 */
	width: 200px; /* border + padding 을 한 width를 200px로 지정 */
}