[CSS3] HTML/CSS 10일차

HTML / CSS

✔ Preview

줄간격, outline, position 속성 정리

---

✍ Summary

Line Height (줄 간격)

: line-height 속성은 문단에서의 줄간격을 조정하는 속성이다. px, em, % 등으로 설정할 수 있고 기본값으로 설정하려면 normal을 사용하면 된다.

p {
	line-height: 1.7em; /* 170% 줄간격 설정 */
	padding: 0 18px;
}

 

 

Outline

: border와 비슷한 유형의 속성이다. border는 테두리를 나타내고 outline은 border의 바깥 외곽선을 나타낸다.

https://www.w3schools.com/css/css_outline.asp

a, a:hover {
	outline: none; /* outline 없음 */
	color: #a4aa04;
	text-decoration: underline;
}

 

 

Position

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

 

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

 

• relative 예시

#logo {
	width: 860px;
	height: 134px;
	position: relative; /* 상대좌표: 나머지 요소 위치에 영향을 주지 않고 자신만 움직임 */
}