Web(Front End)
CSS3 스타일 속성(1)
sang0
2019. 9. 15. 04:40
▶ CSS 크기 단위
| 단위 | 설명 |
| % | 백분율 단위 |
| em | 배수 단위 |
| px | 픽셀 |
- 아래의 세가지 코드 모두 동일한 결과를 만들어냄
- 크기 단위를 섞어서 사용하는 경우가 많음 -> 절대 크기와 상대 크기 단위를 섞어서 폰트 크기 지정하는 방법
- 전체 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상대 크기를 지정하는 방법은 굉장히 많이 사용함
- 크기 단위 0을 입력하는 경우 : 단위를 입력하지 않아도 자동으로 "px" 단위가 붙음
▶ display 속성
- 키워드 속성에 사용 가능한 키워드(★★)
| 키워드 이름 | 설명 |
| none | 태그를 화면에서 보이지 않게 만듭니다. |
| block | 태그를 block 형식으로 지정합니다. |
| inline | 태그를 inline 형식으로 지정합니다. |
| inline-block | 태그를 inline-block 형식으로 지정합니다. |
- block일 때 결과
- inline 키워드
- width, height 속성이 적용되지 않음
- margin 속성이 div태그의 좌우로만 지정됨(box가 div태그임)
- inline-block 키워드
- width, height 속성을 적용 가능
- margin 속성이 div태그의 상하좌우로 지정됨(box가 div태그임)
▶ margin 속성과 padding 속성
- margin : 바깥쪽과의 여백
- padding : 내용물과의 여백
▶ border-radius 속성 : 테두리가 둥근 사각형 또는 원을 만들 수 있음
▶ background-image 속성 : 배경에 넣을 그림을 지정하는 스타일 속성
- background-image 속성은 URL 단위를 입력함
▶ background-size 속성 : 그림 크기를 조절할 때 사용
- backgrond-size 속성 1개 : 너비를 의미
- backgrond-size 속성 2개 : 너비, 높이를 의미
- background-size 속성 쉼표 사용했을 때 차이(★★★)
- 쉼표 사용X -> 2개의 이미지 사이즈가 똑같이 적용됨(너비 : 100%, 높이 250px)
- 쉼표 사용O -> 2개의 이미지가 각각 적용됨(첫번째 파일은 너비가 100%, 두번째 파일은 너비가 200%)