[CSS] 분할태그와 CSS응용, block을 이용한 레이아웃 설계

분할태그와 CSS응용

 

<div>

블럭형식 태그, 위에서 아래로 쌓이는 성격

 

 

inline 형식: 글자처럼 옆으로 나열되는 성격

 

 

속성값에 대하여 표현을 할 때

1.픽셀

2. 백분율 -> 부모 박스 기준으로 퍼센테이지 표현.

반응형 웹 디자인을 할 때 많이 표현된다.

 

        .box1{

          width: 300px;

          height: 100px;

          background-color: coral;

        }

 

        .box2{

          width: 50%; /* 박스의 창 넓이를 50% 유지*/ <<< body 값을 기준으로 50%

          height: 100px;

          background-color: silver;

        }

 

 

 

float: 옆으로 나열되는 속성

값을 주도록 하면서 옆에 있는 박스에 영향을 끼치게 됨.

내용이 밀리는 문제가 있을 수 있기 때문에 옆으로 나열되는 박스끼리는 동일하게 표현해줘야 함.

 

float:right -> 같은 부모 아래 존재할 때 오른쪽 끝에 붙임

 

width, height 값이 존재한 상태로 나열하는 것이 좋다

 

 

 

 

 

block을 이용한 레이아웃 설계

 

박스 안의 내용물이 많으면 밖으로 넘쳐 흐름.

 

 

border: 선 표현 - 선의 굵기, 스타일, 색상

padding: 안쪽 여백- 한자리로 입력(상,하,좌,우=30px)

margin: 바깥 여백 - 옵션은 동일

두자리로 입력 시 - 30px( 상하) 30px (좌우)

 

>> 박스 사이즈에 영향을 주는 속성들,

 

계산 시

          /*width: 200 + (border: 10+10)+(p: 30+30)_(m:30+30)= 340*/

          /*height: 150+(b:10+10)+(p:30+30)+(m:30+30)=290*/

border와 padding은 양쪽으로 주는 값이므로 두 번 덧셈한다.

 

 

margin: 0px auto; /*화면상 중심 배치 - width값이 존재해야 함*/

 

 

www.evernote.com/l/Ale4aCdjv_5HsKwdJLty3efvMrkagjn83TQ/

분할태그와 CSS응용, block을 이용한 레이아웃 설계