7. display (요소의 화면 내 출력 특성)
div {
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;
}
block
: 요소를 block 요소로 만듬
inline
: 요소를 inline 요소로 만듬
inline-block
: 외부적으로는 inline으로 보여지면서 내부적으로는 block의 요소를 쓸 수 있음
flex
: 플렉스 박스 (1차원 레이아웃)
grid
: 그리드 (2차원 레이아웃)
none
: 사라짐
8. opacity (투명도)
div {
opacity: 0;
opacity: 1;
opacity: .5;
}
1
: 불투명
0
: 완전히 투명
.5
: 불투명도 50% -> 정수부분 0은 생략 가능
9. font (글꼴 속성)
div {
font-size: 16px;
font-weight: 400;
font-style: italic;
font-family: 'Courier New', Courier, monospace;
line-height: 1.3;
color: #fff;
}
font-size
: 글꼴 크기
font-weight
: 글꼴 굵기
font-style
: 글꼴 스타일(기울임, 밑줄 등)
font-family
: 글꼴과 글꼴 계열 설정
line-height
: 텍스트 한 줄의 높이
color
: 글자 색상
10. text (문자 정렬)
div {
text-align: left;
text-align: right;
text-align: center;
}
div {
text-decoration: underline;
text-decoration: line-through;
text-decoration: none;
}
div {
text-indent: 10px;
text-indent: -10px;
}
text-align
: 문자열 정렬
left
: 좌측 정렬
right
: 우측 정렬
center
: 중앙 정렬
text-decoration
: 문자 장식
underline
: 밑줄
line-through
: 중앙선
none
: 없음 (기본값)
text-indent
: 들여쓰기, 내어쓰기
양수(px)
: 들여쓰기
음수(px)
: 내어쓰기
11. background (배경)
div {
background-color: blue;
background-image: url(#);
}
div {
background-size: auto;
background-size: cover;
background-size: contain;
}
div {
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
}
div {
background-position: center;
background-position: right top;
background-position: 100px 30px;
}
div {
background-attachment: scroll;
background-attachment: fixed;
}
background-color
: 배경색
background-image
: 배경 이미지 지정
background-size
: 배경 이미지 크기
auto
: 기본값
cover
: 요소의 넓은쪽 기준으로 설정
contain
: 요소의 좁은쪽 기준으로 설정
background-repeat
: 배경 이미지 반복 (바둑판식)
no-repeat
: 반복하지 않음
repeat_x
: x축으로 반복
repeat_y
: y축으로 반복
background-position
: 배경 이미지 정렬
center
: 중앙 정렬
right
top
: 우상단 정렬
100px
30px
: x축으로 100px, y축으로 30px 위치에 정렬
background-attachment
: 스크롤 했을때 배경이미지의 고정 여부
scroll
: 스크롤시 배경이미지가 움직임
fixed
: 스크롤시 배경이미지가 움직이지않음 (parallax 구성에 용이)