박스모델/레이아웃

(1) css와 박스 모델

 

1) 박스 모델 요소 

 

contents(콘텐츠)

- width,height으로 설정

padding

- html 요소의 안쪽 여백 지정

 

border

- 요소의 테두리 설정  

margin

- html 요소의 바깥 여백 지정

 

2) 블록 레벨 요소 / 인라인 레벨 요소

 

블록 요소 : 요소 삽입시 혼자 한 줄 차지(=요소의 너비가 100%)

 - 가로 영역을 모두 채우며, bolck요소 다음에 등장하는 태그는 줄바꿈이 된 것 처럼 보임 

- width, height 속성 지정 가능 

• 박스 형태
• ex) h1 , div, p

인라인 요소 : 한 줄에 인라인 요소 여러 개 나열 가능

- 콘텐츠 만큼 영역을 차지  

- widht, height  지정 불가 

ex) span,img,strong

 

inline-block

- block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시함 

- inline처럼 가로로 배치 

- block처럼 widht, height 등가 같은 값 변경 가능

 

 

3) width , height

: 콘텐츠 영역의 크기 지정 (콘텐츠 주변의 여백이나 테두리를 뺀 값)

 

- inlilne요소에는 적용되지 않음 (왜냐 : inline은 콘텐츠 만큼의 영역을 갖기 때문이다) 

만약 변경하고 싶다면 display : inline-block으로 변경해야 됨 

- inline-block : block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시함 

 

<크기> : px ,em

<백분율> : 박스 모델 포함하는 부모 요소 기준 백분율

auto : 콘텐츠의 양에 따라 자동으로 결정

//웹브라우저의 크기가 달라져도 콘텐츠 영역으 크기가 안달라짐 
box1{
width:400px;
height : 100px; // 고정 넓이와 높이
}
//웹브라우저의 크기가 달라지만 달라짐 
box2{
width : 50%;
height : 100px: //가변 넓이와 고정 높이

4) box-sizing

: 박스 모델의 너비와 높이 결정

border -box : 테두리까지 포함해서 너빗값 지정

content-box : 콘텐츠 영역만 너빗값 지정( 기본 값)

 

1) box-sizing : content-box

 

- 기본 contents크기에 padding값과 border값의 크기를 나타낸것 

 

 

즉,  요소(콘텐츠)에 패딩과 테두리가 추가 되어 box의 크기가 그만큼 커짐

 

 

2) box-sizing : border-box 

: 콘텐츠 배치시 계산하기 쉬워짐 

 

- box의 크기가 사용자가 정한 너비와 높이 만큼 맞춰짐 

- 정해진 width와 height에 의해 contents +  padding + border의 총 크기가 정해짐 

- 경우에 따라 콘텐츠의 크기가 줄어들수도( 만약 패딩이나 테두리가 변경(커지면)되면) 

 

5) box - shadow

: 그림자 효과

box -shadow: <수평거리> <수직거리> <흐림정도> <번짐 정도> <색상> inset

ex)
box-shadow: 5px 5px 5px 5px gray;
            수평 수직 흐림 번짐


ex)
box-shadow:  rgb(0 0 0/69%) 0px 26px 30px -10px,
			rgb(0 0 0 /73%) 0px 16px 10px -10px;
//두개의 그림자를 가짐

수평거리 : 그림자가 가로로 얼마나 떨어져 있는지/ 양수: 오른쪽

수직 거리 : 그림자가 세로로 얼마나 떨어져 있는지 / 양수 : 아래쪽

흐림 정도 : 값이 커질수록 부드러운 그림자(양수)

번짐 정도 : 양수 : 모든 방향 그림자

inset : 안쪽 그림자

(2)Border 

0) border

단축 속성으로 하위 속성들을 포함 

border : 1px solid red;

따로 지정 :  border-top, border-bottom , ..

 

1) border-style

: 테두리 스타일 지정

 

border-style : dotted solid dashed solid;

                         위 오 아래 왼

 

2) border-width

: 테두리 두께 지정

border-width: <크기> | thin | medium | thick
							//1 :  모두 적용
							// 2 : 상하, 오왼
							//3:  상 오 하
							//4. 상 하 오 왼 

3) border-color

: 테두리 색상 변경

• border-(top,left,right,bottom)- color

4) border - radius

: 모서리를 둥글

border-radius: <크기> | <백분율> 
							// px,em | 현재 요소 크기 기준 

• top-left, top-right,bottom-left,bottom-right

(3) 여백 조절

1) margin

: 요소 주변의 여백 설정

margin : <크기> | <백분율> | auto 
			//px,em | 박스 포델의 부모 기준 | display 속성에서 지정한 값에 맞게 적절한 값으로 자동 지정 
							//1 :  모두 적ㅇ요
							// 2 : 상하, 오왼
							//3:  상 오 하
							//4. 상 하 오 왼 

2) 가운데 정렬

margin ; 20px atuo : 위 아래 마진 설정, 좌우 마진 자동 계산 

3) margin 중첩

• 요소 배치시 요소의 마진과 마진이 서로 마나면 마진 값이 큰 쪽으로 겹쳐짐

width: 200px;
height: 100px;
margin: 30px;

///위 박스를 세개 그리면 세로 마진 사이가 60px가 되는 것이 아니라 30px가 됨 

4) padding

: 콘텐츠와 테두리 사이의 여백

( margin과 사용법이 같음 / 단지 어느 부분에 여백을 주냐에 따라 다른것)

(4) 레이아웃 생성

1) display

: 배치 방법 결정(html 요소를 어떻게 표시할지 결정 )

• 블록 레벨 요소 ↔ 인라인 레벨 요소
• block : 인라인 —> 블록
• inline : 블록 —> 인라인
• inline-block : 인라인 + 블록 , 마진과 패딩 지정 가능
• none : 해당 요소 화면에 표시 x
•       - visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지 하지 않음 

2) float

: 이미지 표시하고 그 주변에 텍스트가 둘러 싸도록 할 수 있음

• left : 해당 요소를 문서의 왼쪽에 배치
• right : 해당 요소를 문서의 오른쪽에 배치
• none : 좌우 어느 쪽에도 배치 x (기본값)
• inherit : 부모요소로부터 상속받음 
• initial  : 기본값으로 설정함 

img{ 
float : left; //왼쪽에 이미지 떠 있게
margin-right : 40px; //오른쪽 마진 40px (오른쪽에 올 텍스트와 왼쪽 이미지 사이의 여백)
} 

3) clear

:float 해제

• clear : left  - float : left 해제
• clear :right - float : right 해제 
• both : 둘다 해제

** display : inline0block과 float:left 속성의 차이

둘다 수평 네비 게이션을 만들때 결과는 같지만

display~은 기본 마진과 패딩이 있다.

float는 기본 마진과 패딩이 없어 요소마다 마진과 패딩을 지정해 주어야 한다

*{//전체에 적용
margin:0;
padding:0;
box-sizing : border-box; //테두리 까지 포함해서 너비 값 지정 

#container{
width : 200px; //내뇽 전체의 너비
margin : 20px auto;  // 내용을 화면 가운데 배치하도록
} 

#header{
width : 100%; // 부모 요소의 너비와 같게
height : 120px;
}
#sidebar{
width : 150px; //사이드바의 넓이
height : 600px;
float:left //왼쪽으로 사이드바 생성
} 

#contents{
width:900px; //본문의 넓이
heiht:600px;
float:left; //왼쪽으로 플로팅 
}
#right-sidebar{
width : 150px;
height : 600px;
}
#footer{
width : 100%;
height:100px;
clear:eft;
} 

(5) 웹 요소의 위치 지정

1) position

: 문서 안의 요소를 자유자제로 배치해 준다

• static : 문서의 흐름에 맞춰 배치(기본값)
• relative : 위치값을 지정할 수 있음

—> 사용시 left,right,top,bottom 사용하여 위치 조정 가능

 

• absolute : staitc을 제외한 relative,absolute,fixed 값을 사용한 상위 요소(부모 요소)를 기준으로 위치를 지정하여 배치 ( 만약 위 부모가 존재하지 않으면 body가 부모가 됨 ) 

 

• fixed : 브라우저 창을 기준으로 위치 지정 ( 스크롤 되어도 위치 고정  ) 
• sticky : 스크롤 위치가 임계점에 이르면 fixed 처럼 고정  ( right,left, bottom이 적용되지 않음 )

#static{
position:static;
}
#relative-1 {
position:relative;
}   /// 위에서 아래로 자연스럽게 베치 
#relative-2{
position:relative;
left:100px; // 왼쪽에서 저 값만큼 떨어지게 
top:-50px; // 위에서 저 값 만큼 떨어지게(음수이므로 위쪽으로 붙음) 
} //원래는 두번째 단락 아래에 위치해야 되지만 원래 위치(두번째 단락 아래) 에서 이동시킨 위치 만큼 겹쳐서 배치 

#fixed{
width:100px;
height : 100px;
positionfixed ; 
right : 30px;
top:30px;
}  //웹 브라우저에서 스크롤하더라도 항상 같은 위치에 나타남 



#sticky{
top:30px;  //스크롤이 임계점에 다르면 저 위치에 고정되어서 나타남
}

 

 

inset: 

top,right...속성들을 한번에 적을 수 있는 것 

 

 

관련 속성 

 z-index  : 어느 객체가 앞으로 오고 뒤에 올 것인지 정할 수 있는 속성 

position ( relative, absolute, fixed ) 가 적용된 요소에만 적용 가능 

 

사용법 : 

z-index : 숫자

// 숫자가 높을수록 앞에 나옴