블록 레벨 요소와 인나인 레벨 요소
블록 레벨 요소
-요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
-요소의 너비가 100%
<p>, <h1> ~ <h6>, <ul>, <ol>, <div>, <blockquote>,
<form>, <hr>, <table>, <fieldset>, <adderss>인라인 레벨 요소
-줄을 차지하지 않는 요소
-화면에 표시돠는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음
<img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textaree>, <label>, <button>
박스 모델
-실제 콘텐츠 영역, 패딩 영역 박스의 테두리, 그리고 마진 등의 요소로 구성됨
width, height 속성 = 콘텐츠 영역의 크기
<--기본형-->
width : <크기> | <백분율> | <auto> = 너비
height : <크기> | <백분율> | <auto> = 높이
<크기> = px 이나 cm 단위와 함께 수치로 지정
<백분율> = 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정
auto = 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정됨(기본 값)실제 콘텐츠 크기 계산하기
display 속성 = 화면 배치 방법 결정하기(블록 레벨 요소와 인라인 레벨 요소 바꿀 수 있음)
<--기본형-->
display : 속성
속성
block = 해당 요소를 블록 레벨로 지정
inline = 해당 요소를 인라인 레벨로 지정
inline-block = 블록 레벨와 인라인 레벨 요소 두 가지 특성을 가지고 싶을 때 지정
none = 해당 요소를 화면에 아예 표시하지 않는다, 화면에서 공간도 차지하지 않는다기타 display 속성들
테두리 관련 속성들
border-style 속성 = 테두리 스타일 지정하기
-기본 값이 none -> 화면에 테두리 표시안됨
-테두리를 그리기 위해선 먼저 테두리 스타일부터 지정해야함
<--기본형-->
border-style : 속성
border-width 속성 = 테두리 두께 지정
<--기본형-->
border-top-width : <크기> | thin | medium | thick
border-right-width : <크기> | thin | medium | thick
border-bottom-width : <크기> | thin | medium | thick
border-left-width : <크기> | thin | medium | thick
border-width : <크기> | thin | medium | thick
속성 값이 1개 = 네 방향에 모두 같은 두께
속성 값이 2개 = 위아래, 좌우 묶어서
속성 값이 4개 = top -> right -> bottom -> leftborder-color 속성 = 테두리 색상 지정
<--기본형-->
border-top-color : <색상>
border-right-color : <색상>
border-bottom-color : <색상>
border-left-color : <색상>
border-color : <색상>border 속성
-테두리 스타일과 두께, 색상 등을 묶어 표기
-순서는 상관없음
<--기본형-->
border-top : <두께> | <색상> | <스타일>
border-right : <두께> | <색상> | <스타일>
border-bottom : <두께> | <색상> | <스타일>
border-left : <두께> | <색상> | <스타일>
border : <두께> | <색상> | <스타일>border-radius 속성 = 박스 모서리 둥글게 만들기
<--기본형-->
border-top-left-radius : <크기> | <백분율>
border-top-right-radius : <크기> | <백분율>
border-bottom-left-radius: <크기> | <백분율>
border-bottom-right-radius: <크기> | <백분율>
border -radius: <크기> | <백분율>
타원 형태로 둥글게 만들기
border-top-left-radius : <가로크기> | <세로크기>
border-top-right-radius : <가로크기> | <세로크기>
border-bottom-left-radius: <가로크기> | <세로크기>
border-bottom-right-radius: <가로크기> | <세로크기>
border -radius: <가로크기> | <세로크기>box-shadow 속성 = 선택한 요소에 그림자 효과 내기
<--기본형-->
box-shadow: none | <그림자 값> ;
그림자 값 = <가로> <세로> <흐림정도> <번짐정도> <색상> inset
여백을 조절하는 속성들
margin 속성 = 요소 주변 여백 설정하기
<--기본형-->
margin-top : <크기> | <백분율> | auto
margin-right : <크기> | <백분율> | auto
margin-bottom : <크기> | <백분율> | auto
margin-left : <크기> | <백분율> | auto
margin : <크기> | <백분율> | auto
<크기> = 너비나 높이 값을 px아나 cm 단위와 함께 수치로 지정
<백분율> = 부모 요소를 기준으로 너비나 높이 값을 %로 지정
auto = display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정padding 속성 = 콘텐츠 영역과 테두리 사이 여백 설정하기
<--기본형-->
margin-top : <크기> | <백분율> | auto
margin-right : <크기> | <백분율> | auto
margin-bottom : <크기> | <백분율> | auto
margin-left : <크기> | <백분율> | auto
margin : <크기> | <백분율> | auto
<크기> = 너비나 높이 값을 px아나 cm 단위와 함께 수치로 지정
<백분율> = 부모 요소를 기준으로 너비나 높이 값을 %로 지정
auto = display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정