33. CSS - 레이아웃을 위한 스타일

1. CSS와 박스모델

1. 블록 레벨 태그와 인라인 레벨 태그

1. 블록 레벨 태그
   • 태그를 추가했을 때 브라우저의 한 줄을 다 차지하는 태그를 블록 레벨 태그라고 한다.
   • 해당 태그는 좌우에 다른 태그를 배치할 수 없다.
   • 블록 레벨 태그는 width, height, margin, padding 등 크기나 위치를 지정할 수 있다.
2. 인라인 레벨 태그
   • 인라인 레벨 태그는 브라우저의 한 줄을 다 차지하지 않는 태그
   • 인라인 레벨 태그 좌우에는 다른 인라인 레벨 태그들을 배치할 수 있다.
   • 인라인 레벨 태그는 컨텐츠(내용)만큼의 공간을 차지하고 나머지 공간에 다른 태그들을 배치할 수 있다.
3. 
4. 블록 레벨 태그와 인라인 레벨 태그의 종류
   • 블록 레벨 태그
     • p, div, h1~h6, ul, ol, blockquote, form, hr, table, fieldset, ...
   • 인라인 레벨 태그
     • img, br, sub, span, input, textarea, label, button, ...
5. 박스 모델
   • 박스 형태의 태그들을 박스 모델이라고 부른다.
   • 블록 레벨 태그들은 margin, padding, width, height 등 크기와 위치를 조절할 수 있어서 모두 박스모델이지만 인라인 레벨 태그들은 박스모델이 아니다.
   • 박스 모델은 실제 콘텐츠 영역, 패딩 영역, 보더 영역, 마진 영역으로 구성되어 있다.
   • padding: 실제 콘텐츠 영역에서 보더 영역까지의 여백을 설정
   • margin: 다른 박스 모델들과의 여백을 설정
   • 

2. 박스 모델과 CSS

1. 영역의 크기를 지정하는 width, height
   • width는 영역의 가로길이, height 영역의 세로길이를 지정
   • 지정할 수 있는 속성 값
     • 크기: 단위와 함께 절대적인 수치를 지정
     • 백분율: 해당 박스 모델을 포함하는 부모 태그를 기준으로 가로길이와 세로길이 값을 퍼센테이지로 지정
     • auto: 콘텐츠 양에 따라서 가로길이와 세로길이가 지정됨. 기본값.
2. 가로길이와 세로길이의 적용범위를 지정하는 box-sizing
   • 지정한 가로길이와 세로길이가 실제 콘텐츠 영역에만 적용될 것인지 보더 영역까지 적용시킬 것인지를 설정하는 속성
   • 지정가능한 속성 값
     • content-box: 가로길이와 세로길이가 콘텐츠 영역에만 적용. 기본 값.
     • border-box: 가로길이와 세로길이가 보더 영역까지 적용됨.
3. 화면에 태그를 배치 방법을 지정하는 display
   • 블록 레벨 태그를 인라인 레벨로 바꾸거나 인라인 레벨 태그를 블록 레벨로 바꿀 수 있는 속성
   • 지정가능한 속성 값
     • block: 해당 태그를 블록 레벨로 변경. 인라인 레벨 태그들을 블록 레벨로 변경하거나 display: none으로 설정되어 보이지 않는 태그들을 블록 레벨로 변경하면 보이게 할 때 사용.
     • inline: 해당 태그를 인라인 레벨로 변경. 블록 레벨 태그들을 인라인 레벨로 변경하거나 display: none으로 설정되어 보이지 않는 태그들을 인라인 레벨로 변경하면 보이게 할 때 사용.
     • inline-block: 해당 태그를 인라인 레벨로 변경. 인라인 레벨 태그들은 width, height, margin, padding등을 지정하지 못하는데 display: inline-block인 요소들은 인라인 레벨 태그면서도 width, height, margin, padding등을 지정할 수 있다. 크기나 위치를 지정할 수 있는 인라인 레벨 태그라고 생각하면 된다.
     • none: 화면에서 태그를 표출하지 않음. 화면에서도 표출되지 않고 태그가 차지하던 공간도 사라짐. visibility: hidden;과 비슷하지만 공간은 차지하지만 화면에서만 표출 안된다.

3. 테두리 관련 속성들

1. 테두리의 스타일을 지정하는 border-style
   • 테두리의 모양을 지정할 때 사용하는 속성
   • 지정가능한 속성 값
     • none: 테두리 표시하지 않음. 기본 값.
     • dashed: 직선 모양의 점선으로 테두리 표시.
     • dotted: 점선으로 테두리 표시.
     • double: 이중선으로 테두리 표시.
     • solid: 실선으로 테두리 표시.
2. 테두리 두께를 지정하는 border-width
   • 테두리 두께는 한 방향의 테두리만 지정할 수도 있고 네 방향 모두 지정할 수도 있다.
   • 한 방향씩 두께 지정하는 방식
     • border-top-width: 위 테두리의 두께 지정
     • border-right-width: 오른쪽 테두리의 두께 지정
     • border-bottom-width: 아래쪽 테두리의 두께 지정
     • border-left-width: 왼쪽 테두리의 두께 지정
   • 네 방향 두께를 모두 지정하는 방식
     • border-width를 사용.
     • border-width의 값이 1개 일 때는 모든 방향 방향에 동일한 두께 적용. 2개 일 때는 위, 아래 두께 좌, 우 두께. 4개 일 때는 위, 오른쪽, 아래, 왼쪽 순으로 하나 씩 두께 적용
3. 테두리의 색상을 지정하는 border-color
   • 지정방식은 border-width랑 동일하다.
   • 색상 값으로는 16진수 값이나 rgb, rgba, 색상이름을 사용할 수 있다.
4. 테두리 관련 속성들을 한 번에 지정하는 border
   • border는 테두리관련 속성을 묶어서 지정할 수 있는 속성이다. border-top, border-right, border-bottom, border-left 한 방향씩 지정할 수도 있고 border로 네 방향을 한 번에 지정할 수도 있다.
   • 지정하는 방식은 border: 두께 | 색상 | 모양;
   • 지정하길 원하는 요소만 선택해서 지정할 수도 있고 세 가지 모두 지정할 수도 있다.
   • 두께와 색상, 모양 순서 상관없이 지정가능하다.
5. 테두리의 모서리를 둥글게 만들어주는 border-radius
   • 테두리의 네 개의 꼭지점 부분을 둥글게 만들 때 사용하는 속성
   • 모서리에 원을 그려서 그 원만큼 모서리부분을 둥글게 만들어 주는데 사용자가 지정할 값은 그려주는 원의 반지름 값
   • 지정가능한 속성 값
     • 크기: 단위와 함께 절대적 수치 지정
     • 백분율: 현재 태그의 크기를 기준으로 처리할 반지름의 크기를 퍼센테이지로 지정
   • 한 방향 모서리씩 지정
     • border-top-left-radius
     • border-top-right-radius
     • border-bottom-right-radius
     • border-bottom-left-radius
   • 네 방향 모서리 함께 지정
     • border-radius
   • 타원형으로 둥글게 만들기
     • 그냥 원형으로 둥글게 만들 때는 반지름의 크기를 지정해 줬다면 타원형으로 둥글게 만들때는 가로 반지름의 길이와 세로 반지름의 길이를 지정한다.
     • border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 에서는 가로길이 공백 세로길이로 입력한다.
     • border-radius에서는 가로길이/세로길이를 입력한다.
6. 태그에 그림자를 추가하는 box-shadow
   • 태그에 그림자를 생성할 때 사용하는 속성
   • 지정가능한 속성 값
     • none: 그림자 표시하지 않음. 기본값.
     • 그림자 값
       • 수평거리: 그림자의 수평거리, 양수는 오른쪽 음수는 왼쪽으로 그림자 생성됨. 필수값.
       • 수직거리: 그림자의 수직거리,
         양수는 아래쪽 음수는 위쪽으로 그림자 생성됨. 필수값.
       • 흐림정도: 그림자의 흐림정도를 지정. 기본 값은 0이고 가장 진한 그림자를 표시한다. 값이 커질수록 흐릿한 그림자 표시. 음수는 지정 불가능. 선택값.
       • 번짐정도: 그림자의 번짐정도를 지정. 기본 값 0이고 하나도 번지지 않은 그림자를 표출. 양수는 모든방향으로 퍼져 나가는 그림자 표출, 음수는 모든방향으로 축소된 그림자를 표출. 선택값.
       • 색상: 그림자의 색상을 지정. 한 가지 색상이나 공백으로 여라가지 색상도 지정가능. 기본값은 현재 글자색.
       • inset: 안쪽으로 그림자 생성

4. 여백을 조절하는 속성

1. 태그들간의 여백을 조절하는 margin
   • 한 태그와 다른 태그들 사이의 여백을 조절하는 속성
   • 한 방향에 대한 여백 조절
     • margin-top
     • margin-right
     • margin-bottom
     • margin-left
   • 네 방향에 대한 여백 조절
     • margin
     • 값이 하나일 때는 모든 방향이 동일한 margin 값으로 적용, 두개일 때는 상하 좌우로 나눠서 margin 값 적용, 세개일 때는 상 좌우 하 나눠서 margin 값 적용, 네개일 때는 상 우 하 좌 margin 값 적용
   • 지정가능한 속성 값
     • 크기: 단위와 함께 절대적인 수치를 지정
     • 백분율: 해당 박스모델을 포함하고 있는 부모 태그의 크기를 기준으로 % 값을 지정
2. 콘텐츠 영역과 보더 영역 사이의 여백을 조절하는 padding
   • 콘텐츠 영역과 보더 영역 사이에 존재하는 패딩 영역의 크기를 지정할 때 사용하는 속성
   • 지정 방식이나 지정 할 수 있는 값이 margin과 동일하다.