요소 정렬 스타일(float / clear)
float(띄우다)
float: left;
float: right;
요소를 띄워서 좌/우로 정렬하는 속성
clear
clear: both;
float로 인해서 띄워져 있는 상태를 해제하는 속성
(float 사용 시 겹침 문제가 발생하는데 이를 해결할 수 있음)
배치 관련 스타일(position)
position 요소의 위치를 지정하는 속성
position : relative; (상대적인)
-
지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성.
-
내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음.
position : absolute; (절대적인)
- 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함.
position : fixed; (고정된)
- 항상 고정된 위치에 요소를 배치함. (화면이 움직이든 말든 항상 같은 위치)
position: sticky
color: 글자 색을 지정하는 속성
선택자 { color :
- 색상명(영문)
- 16진수 숫자 RGB(#fff, #ffffff)
- rgb(255, 255, 255)
- rgba(255, 255, 255, 1)
- hsl(360, ,100, 100)
- hsla(360, 100, 100, 1)
}
- rgba에서 a는 투명도(0 : 투명 , 1 : 불투명)
- hsl(색조, 채도, 밝기)
- 6개의 색상 지정 방법은 색과 관련된 모든 css 속성에서 사용 가능
text-decoration : 텍스트에 줄을 긋는 속성
아랫줄 긋기
text-decoration: underline;
중간줄 긋기
text-decoration: line-through;
윗줄 긋기
text-decoration: overline;
a 태그 줄 없애기
#deco-ul > li:nth-child(4) > a {text-decoration: none;}
text-align : 글자(+inline)를 정렬하는 속성(왼쪽, 오른쪽, 가운데, 양쪽)
text-align: left;
text-align: right;
text-align: center;
text-align: justify; (flexbox의 space-between과 같음)
inline-height: 줄 간격(장평)을 지정하는 속성
줄 사이 간격을 지정한 만큼 벌리는게 아니라
한 줄의 높이를 지정하는 속성이다.
line-height: 30px;
- 줄의 높이가 글자의 크기보다 큰 경우
글자는 해당 줄 세로 가운데에 배치된다.
letter-spacing : 글자 사이 간격(자간) 지정 속성
letter-spacing: -1.5px;
letter-spacing: 10px;
text-shadow : 텍스트에 그림자 효과를 추가하는 속성
text-shadow: 좌우 상하 번짐 색상
#shadow-test > p:nth-child(4) {
text-shadow: 0px 0px 20px #ccc,
0px -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -20px 18px #f20
;
}
