11. 레이아웃(너비,높이,화면배치요소)

CSS_VSC

11. 레이아웃(너비,높이,화면배치요소)

76beny 2022. 6. 22. 21:09

너비,높이

-요소의 너비와 높이를 설정하는 스타일

 <style>
        .test1 {
            width: 200px;
            height: 100px;
            text-align: center;
            border: black solid 2px;
        }
        
        .test2 {
            width: 30%;
            height: 5em;
            text-align: center;
            border: black solid 1px;
        }
    </style>
    <div class="test1">test1 영역입니다.</div>
    <div class="test2">test2 영역입니다.</div>

test1 영역입니다.

test2 영역입니다.

화면 배치 요소 방법

- block : 한줄 또는 영역으로 지정하는 요소로 시작 태그와 끝 태그가 항상 존재
- inline : block 요소에 속해 있는 요소로 한 개의 요소를 수평으로 배치할때 사용
- 실무 Tip : block요소=div태그 / inline = span태그로 감싸서 활용 할 것!
- display : lnline/block요소의 속성을 변경할수 있으며 혼합된 요소로 활용할수 있음

<style>
        .block_test1 {
            display: inline;
        }
        
        .block_test2 {
            display: inline-block;
        }
        
        .block_test3 {
            display: block;
        }
        
        .area {
            width: 100px;
            height: 100px;
            background-color: salmon;
            border: 1px solid black;
        }
        
        .area2 {
            border: 1px solid black;
            text-align: center;
        }
    </style>

    <div class="area">일반 div 영역입니다.</div>
    <div class="area block_test1">div1 영역입니다. inline 요소입니다.</div>
    <span class="area block_test2">span 영역입니다. inline-block입니다.</span>
    <div class="area block_test3">div3 영역입니다. block 요소입니다.</div>
    <span class="area">일반 span1 영역입니다.</span>
    <span class="area">일반 span2 영역입니다.</span>
    <span class="area">일반 span3 영역입니다.</span>
    <!-- span은 줄바꿈이 안되고 div 는 자동으로 줄바꿈이 된다 -->

일반 div 영역입니다.

div1 영역입니다. inline 요소입니다.

span 영역입니다. inline-block입니다.

div3 영역입니다. block 요소입니다.

일반 span1 영역입니다. 일반 span2 영역입니다. 일반 span3 영역입니다.

실무적인 방법

-div와 span을 중심으로 레이아웃을 구성하고 컨텐츠를 내부에 배치한다.

    <div class="area2" style="margin : 10px;">
        <span class="area2" style="display: inline-block; width: 200px; height: 100px;">
            <a href="00_css01.html">Link 1입니다.</a>
        </span>
        <span class="area2" style="display: inline-block; width: 200px; height: 100px;">
            <a href="00_css01.html">Link 2입니다.</a>
        </span>
    </div>
    <div class="area2" style="margin : 10px;">
        <span class="area2" style="display: inline-block; width: 200px; height: 100px;">
            <a href="00_css01.html">Link 3입니다.</a>
        </span>
        <span class="area2" style="display: inline-block; width: 200px; height: 100px;">
            <a href="00_css01.html">Link 4입니다.</a>
        </span>
    </div>

* 링크 누르면 연결해놓은 해당 html파일로 이동함.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우