-
CSS (8) - CSS 박스 모델 [중요]카테고리 없음 2023. 10. 10. 17:52
1. CSS와 박스모델
1.1 블록 레벨 요소와 인라인 레벨 요소
> 블록 요소인지 인라인 요소인지에 따라 나열 방법이 달라진다.
> 블록레벨: 태그로 요소를 삽입했을 때 한줄을 모두 차지 (요소 너비 100%) (다른 요소 올 수 없다)
> 인라인레벨: 컨텐츠 영역만큼 차지, 나머지 공간에 다른 요소가 올 수 있다.
*요소는 태그
1.2 박스 모델의 기본 구성
블록 레벨요소는 박스 형태이다.
스타일 시트에서 박스 형태 요소를 박스모델 요소라고 한다.
박스모델은 : 콘텐츠영역
패딩: 콘텐츠와 박스 여백 (테두리)
테두리
마진: 여러 박스 모델 사이 여백
이 중 마진과 패딩을 다른 콘텐츠 사이의 간격과 배치를 고려할 때 사용한다.
* 마진은 따로 지정하지않으면 기본 스타일에 따라 마진 여백이 할당된다.
1.3 콘텐츠 영역의 크기를 지정하는 width, height 속성
크기: px단위로 준다.
백분율: 부모 요소 기준으로 너비 높이값을 백분율로 지정
auto: 컨텐츠 양에 따라 자동으로 결정 (기본값)
1.4 박스 모델의 크기를 계산하는 box-sizing 속성
박스모델에서 width와 height속성은 콘텐츠 주변의 여백이나 테두리를 뺀 콘텐츠 영역의 크기를 가리킴
원래는 웹 문서 박스 크기를 구할 때는 콘텐츠와 테두리 여백, 두깨 까지 고려해야함
근데 이를 border-box로 지정하면, 테두리까지 포함해서 너빗값을 지정함 content-box로 지정하면, 컨텐츠 영역만 지정 (기본값)
1.5 박스 모델에 그림자 효과를 주는 box-shadow속성
2. 테두리 스타일 지정하기
테두리는 top->right->bottom->left순서임
두개만 지정하면 하나는 탑바텀, 하나는 레프트라이트, 세개지정하면, 탑 오(왼) 바텀임
2.1 테두리 두께 지정 border-width속성
크기,지정자로 테두리 두께를 지정할 수 있다.
2.2 border-color로 테두리 색을 지정할 수 있다.
2.3 border속성으로 전부 한번에 지정가능하다.
2.4 둥근 테두리를 만드는 border-radius속성
크기 혹은 백분율로 지정가능 크기는 반지름 직접지정, 백분율은 현재요소의 크기 기준
테두리는 border-top-left ~등으로 지정해서 한쪽만 줄 수 있다.
3. 여백을 조절하는 속성
3.1 요소 주변의 여백을 설정하는 margin속성
요소간 여백을 설정한다.
크기: 절대크기
백분율: 부모 값 기준
auto: display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함
3.2 margin을 사용하여 웹 문서 가운데 정렬하기 [중요]
margin을 이용해 화면 중앙에 배치하려면, 요소의 너빗값이 정해져야함 그리고 margin-left와 right를 auto로 설정하면된다.
CSS가 화면 너비에서 요소 너비값을 뺀 나머지 영역을 좌우 마진으로 자동 계산함
1. 요소의 너비가 지정되야함 2. margin 속성에 위아래는 자유 양옆은 auto로 설정
3.3 margin 중첩 이해하기
요소의 마진과 마진이 서로만나면, 마진값이 큰 쪽으로 겹친다.(오른쪽 왼쪽 마진은 겹치지않음)
3.4 콘텐츠와 테두리 사이 여배글 결정하는 padding속성
테두리 안쪽의 여백으로 보면 편하다. 속성은 시계방향으로 지정하면 됨
4. 웹 문서의 레이아웃 만들기
4.1 배치를 결정하는 display속성
display속서은 주로 웹 문서의 내비게이션을 만들면서 메뉴항목을 가로로 배치할 때 주로 사용된다.
이미지를 표 형태로 배치할 수도 있다.
block: 인라인 -> 블록
inline: 블록 -> 인라인
inline-block: 인라인과 블록 속성 모두 가짐 (마진과 패딩 지정가능)
none: 화면에 표시하지 않는다.
4.2 왼쪽이나 오른쪽으로 배치하는 float속성
float 속성은 웹 요소를 문서 위에 떠 있게 만듭니다. 떠있다는 의미는 왼쪽 구석이나 오른쪽 구석에 배치되는 것을 의미합니다.
left(왼쪽에 배치), right(오른쪽 배피) none(어느쪽에도 배치 안함)
4.3 clear속성
float속성을 사용해 웹요소를 왼쪽이나 오른쪽에 배치하면, 다른 요소에도 속성이 전달됨 더이상 float속성이 유용하지 않다고 알리는 것
left,right,both가 있다.
** inline-block와 float-left속성의 차이 : 인라인 블록은 가로배치 + 기본마진패딩 가짐 , float는 가로로 배치될때 기본마진과 패딩이 없음 필요시 지정해야한다.
5. 웹 요소의 위치 지정하기
5.1 웹요소의 위치 정하기 (box만 가능)
- left,right,top,bottom 정하면됨 모두 [기준]요소와 얼마나 떨어져있는지 지정하는 것이다.
5.2 배치 방법을 지정하는 position속성
- static 문서의 흐름에 맞춤 (기본값)
- relative 위칫값을 지정할 수 있다는 점만 제외하면 static과 같다. (원래 위치에서)
- absolute: relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치
- fixed : 브라우저 창 기준으로 위치를 지정 (스크롤해도 따라옴)
*absolute를 사용하려면, 부모요소
출처:http://hong.adfeel.info/frontend/659/ 가 relative인 것만 가능