[Study] 웹레이아웃 기초

<div>를 이용한 박스 디자인

<div>

division의 약자로, 레이아웃을 만들거나 콘텐츠를 나누는 컨테이너를 정의하는 태그이다.

border

요소의 테두리를 정의하는 속성이다. (차례로 두께, 선의종류, 색상)
속성값인 선의 종류는 다음과 같이 있다.

• solid : 실선

• dotted : 짧은 점선

• dashed : 긴 점선

• double : 두줄 실선

• outset : 안쪽 어둡게

• inset : 안쪽 밝게

• groove : 파인선

• ridge : 불룩한 선

border-radius

요소의 둥글기를 정의하는 속성이다.
px 또는 %의 숫자가 커질수록 둥글어진다.

box-shadow

요소의 그림자효과를 정의하는 속성이다. (차례로 (옵션), x축, y축, (블러), (스프레드), (색상))
속성값은 다음과 같으며 %는 사용할 수 없다.

• <offset-x> (필수) : x축(가로 축) 거리(양수, 0, 음수)
• <offset-y> (필수) : y축(세로 축) 거리(양수, 0, 음수)
• <blur-radius> : 흐림 효과. 크기의 기준은 흐림 효과를 원의 반지름으로 측정(양수, 0).
  초깃값은 0.
• <spread-radius> : 그림자 확대와 축소(양수, 0, 음수)
• <color> : 그림자 색상 값. 초깃값은 currentcolor(현재 글자색)
• <inset> : 그림자를 박스 외부 그림자에서 박스 내부 그림자로 변경

<div style="height:50px;
			width:300px;
            border:3px solid;
            box-shadow: 10px 10px 5px;">
</div>

속성 상속

일부 속성들은 부모 태그에서 자식 태그로 상속(inherit)된다.
안에 글자들이나 태그들이 많을 경우 전부 font-size를 작성안해도 부모태그에 한번에 작성하고 끝낼 수 있으니 편리하다.
다 inherit되는건 아니고 글자와 관련된 스타일들이 주로 inherit된다.
(ex. font-size, color, font-family, text-align)

레이아웃 만들기 (요소 정렬)

float, clear

float은 요소가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정하는 속성이다.
하지만 float를 쓰면 요소를 붕 띄우다보니 그 다음에 오는 HTML 요소들이 제자리를 찾지 못한다. 때문에 float를 쓰고 나면 항상 clear 속성이 필요하다.

clear는 float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰이는 속성이다.
clear 속성을 사용하면 float 다음에 오는 박스들이 제자리를 찾게된다.

<div>
    <div class="left-box">left</div>
    <div class="right-box">right</div>
    <div class="footer">footer</div>
</div>

.left-box {
    width : 30%; 
    height : 50%;
    float : left;
}
.right-box {
    width : 70%; 
    height : 50%;
    float : left;
}
.footer {
    height : 50%;
    clear : both;
}

display: inline-block

display:inline-block도 가로로 배치가 가능하다.
간편하지만 <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에 가로로 정렬하려면 태그 사이의 공백도 제거해줘야한다. 아래 코드처럼 된다! 매우 귀찮다.

<div>
    <div class="left-box">left</div>
    <div class="right-box">right</div>
</div>

.left-box {
    width : 30%; 
    height : 100%;
    display: inline-block;
}
.right-box {
    width : 70%; 
    height : 100%;
    display: inline-block;
}

공백 제거하는 법 0. 태그 사이 공백 제거

<div>
    <div class="left-box">left</div><div class="right-box">right</div>
</div>

공백 제거하는 법 1. 주석처리 기호 사용

<div>
   <div class="left-box">left</div><!--
--><div class="right-box">right</div>
</div>

공백 제거하는 법 2. 부모의 폰트사이즈를 0으로 만들기

<div style="font-size: 0px;">
   <div class="left-box">left</div><!--
--><div class="right-box">right</div>
</div>