7. CSS 레이아웃 관련 스타일

웹 페이지에서 레이아웃을 구성하는 것은 매우 중요합니다. CSS는 다양한 스타일 속성을 통해 요소의 크기, 배치, 가시성 등을 조절할 수 있게 해줍니다. 이번 글에서는 이러한 CSS 레이아웃 관련 스타일을 다루어보겠습니다.

1. 요소의 크기 조절: width와 height

width와 height 속성은 요소의 가로와 세로 길이를 설정하는 데 사용됩니다. 고정 크기(px) 또는 가변 크기(%)로 설정할 수 있습니다.

예제 코드와 설명

.size-test {
    border: 1px solid red;
}

#test1 {
    width: 400px;
    height: 200px;
}

#test2 {
    width: calc(100% - 100px);
    height: 150px;
}

• #test1: 고정된 크기(px)를 설정하여 요소의 가로, 세로 크기를 지정했습니다.
• #test2: 가변 크기(%)를 사용하여 부모 요소 크기의 100%에서 100px을 뺀 크기로 설정했습니다.

실습 예제

<h3>width, height</h3>
<p>기본적으로 내용을 차지하는 content영역의 가로, 세로 길이를 조정하는데 사용하는 스타일</p>

<h4>고정크기(px)</h4>
<div id="test1" class="size-test"></div>

<h4>가변크기(%)</h4>
<div id="test2" class="size-test"></div>

• 고정 크기와 가변 크기를 설정하여 요소의 크기를 조절할 수 있습니다.

2. 화면 배치 방법: display

display 속성은 요소가 화면에 배치되는 방식을 결정합니다. inline, block, inline-block 등이 있습니다.

예제 코드와 설명

.display-test {
    border: 1px solid black;
    width: 150px;
    height: 150px;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

• inline: 요소가 다른 요소와 한 줄에 배치되며, 크기 조절이 불가능합니다.
• block: 요소가 한 줄 전체를 차지하며, 크기 조절이 가능합니다.
• inline-block: inline과 block의 특성을 결합하여 한 줄에 배치되면서도 크기 조절이 가능합니다.

실습 예제

<h3>display : 화면 배치 방법 변경</h3>

<h4>display : inline</h4>
<div class="display-test red inline">첫번째</div>
<div class="display-test yellow inline">두번째</div>
<div class="display-test pink inline">세번째</div>

<h4>display : block</h4>
<div class="display-test red block">첫번째</div>
<div class="display-test yellow block">두번째</div>
<div class="display-test pink block">세번째</div>

<h4>display : inline-block</h4>
<div class="display-test red inline-block">첫번째</div>
<div class="display-test yellow inline-block">두번째</div>
<div class="display-test pink inline-block">세번째</div>

• display 속성을 사용해 요소를 인라인, 블록, 인라인-블록으로 배치할 수 있습니다.

3. 요소의 위치 조절: position

position 속성은 요소를 특정 위치에 배치하는 데 사용됩니다. relative, absolute, fixed 등이 있습니다.

예제 코드와 설명

.outer {
    position: relative; /* 기준 */
    border: 1px solid black;
}

#first {
    width: 300px;
    height: 300px;
    background: yellow;
}

#second {
    width: 200px;
    height: 200px;
    background: yellowgreen; 
    position: absolute; /* 내가 원하는 위치에 두기 */
    left: 50px;
    top: 50px;
}

#third {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 100px;
    left: 100px;
}

#fixed-area {
    width: 100px;
    height: 100px;
    background: blue;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

• relative: 요소를 기준 위치에서 상대적으로 이동시킵니다.
• absolute: 부모 요소를 기준으로 절대 위치에 배치합니다.
• fixed: 화면의 특정 위치에 고정하여 스크롤에도 위치가 변하지 않습니다.

실습 예제

<h3>position: 상대위치(relative)와 절대위치(absolute)</h3>
<div class="outer">
    <div class="positioning" id="first">첫번째 자식</div>
    <div class="positioning" id="second">두번째 자식</div>
    <div class="positioning" id="third">세번째 자식</div>
</div>

<h3>position: 고정위치(fixed)</h3>
<div class="positioning" id="fixed-area"></div>

• position 속성을 사용해 요소를 상대적, 절대적, 고정 위치에 배치할 수 있습니다.

4. 가시성 제어: visibility와 opacity

visibility와 opacity 속성은 요소의 가시성을 제어합니다. 요소를 숨기거나 투명도를 조절할 수 있습니다.

예제 코드와 설명

.vis-test {
    width: 100px;
    height: 100px;
}

.opacity-zero {
    opacity: 0;
}

.hidden {
    visibility: hidden;
}

.none {
    display: none;
}

• opacity: 0;: 요소를 완전히 투명하게 만들어 보이지 않게 합니다.
• visibility: hidden;: 요소를 보이지 않게 하지만, 레이아웃에서 공간을 차지합니다.
• display: none;: 요소를 완전히 제거하여 레이아웃에서도 사라지게 합니다.

실습 예제

<h3>visibility: 특정요소를 보이거나 보이지 않게하는 스타일 속성</h3>
<div class="vis-test" style="background: red; opacity: 0;">첫번째 영역</div>
<div class="vis-test" style="background: green; visibility: hidden;">두번째 영역</div>
<div class="vis-test" style="background: yellow; display: none;">세번째 영역</div>

• 요소의 가시성을 조절하여 화면에 보이게 하거나 숨길 수 있습니다.

5. 요소의 정렬: float

float 속성은 요소를 왼쪽 또는 오른쪽으로 띄워서 다른 요소들과 함께 배치할 수 있도록 합니다.

예제 코드와 설명

.float-test {
    border: 1px solid black;
    width: 70px;
    height: 30px;
    float: left;
}

• float: left;: 요소를 왼쪽으로 띄워서 배치합니다.

실습 예제

<h3>float</h3>
<p>페이지 내의 요소들을 띄워서 화면으로부터 왼쪽 또는 오른쪽으로 배치하는 속성</p>

<div class="float-test">요소1</div>
<div class="float-test">요소2</div>
<div class="float-test">요소3</div>
<div class="float-test">요소4</div>
<div class="float-test">요소5</div>

• float 속성을 사용해 요소를 좌우로 정렬할 수 있습니다.