KH 정보교육원/CSS CLASS

14. 레이아웃 스타일 1

bameh 2020. 5. 6. 13:52 
<body>
    <h1>레이아웃 스타일</h1>
    <h3>width와 height</h3>
    <p>내용이 차지하고 있는 영역의 크기를 조절할 수 있는 속성</p>
    <h4>고정 크기</h4>
    <div id="test1" class="size-test"></div>
    <h4>가변 크기</h4>
    <div id="test2" class="size-test"></div>

    <h3>화면 배치 방법 변경</h3>
    <p>블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다.</p>
    <br>
    <p>블럭 요소: 한 줄 전체 차지하는 요소. 한 줄에 여러 요소가 올 수 없는 요소.</p>
    <pre> Ex. div, p, hn, ul, ol, form, hr, table, fieldset ...</pre>
    <p>인라인 요소: 한 줄에서 일부분만 차지하는 요소. 한 줄에 여러 요소가 올 수 있는 요소.</p>
    <pre> Ex. img, br, sub, sup, span, input, textarea, label, button ... </pre>
    <br>
    <h3>두 요소의 특징</h3>
    <ul>
        <li>블럭 요소는 줄 바꿈 발생, 인라인 요소는 발생하지 않음.</li>
        <li>블럭 요소는 width와 height 속성 적용, 인라인 요소는 적용되지 않음.</li>
        <li>블럭 요소는 margin-top, margin-botton, padding-top, padding-bottom 속성 적용,
            인라인 요소는 적용되지 않음.</li>
    </ul>

    <hr>

    <h4>블럭 요소를 인라인 요소로 변경</h4>
    <pre><b>>> display: inline 테스트</b></pre>
    <pre>인라인 요소로 변경되면서 width와 height 속성이 무시된다.</pre>
    <!-- 클래스의 카테고리화: block, block-test1, area1 모두 클래스명으로 지정된다.-->
    <div class="block block-test1 area1">첫 번째 영역</div>
    <div class="block block-test1 area2">두 번째 영역</div>
    <div class="block block-test1 area3">세 번째 영역</div>
    <div class="block block-test1 area4">네 번째 영역</div>
    <div class="block block-test1 area5">다섯 번째 영역</div>

    <pre><b>>>display: inline-block 테스트</b></pre>
    <pre>영역은 인라인 요소로 변경되지만 내용은 블럭 요소로 지정되어 width와 height 속성을 설정할 수 있다.</pre>
    <div class="block block-test2 area1">첫 번째 영역</div>
    <div class="block block-test2 area2">두 번째 영역</div>
    <div class="block block-test2 area3">세 번째 영역</div>
    <div class="block block-test2 area4">네 번째 영역</div>
    <div class="block block-test2 area5">다섯 번째 영역</div>

    <h4>인라인 요소를 블럭 요소로 변경</h4>
    <pre><b>>> display: block 테스트</b></pre>
    <pre>인라인 요소를 블럭 요소로 변경하면 width와 height 값을 지정할 수 있지만, 내용만 block 요소로 변경이 된다.</pre>
    <span class="block block-test3 area1">첫 번째 영역</span>
    <span class="block block-test3 area2">두 번째 영역</span>
    <span class="block block-test3 area3">세 번째 영역</span>
    <span class="block block-test3 area4">네 번째 영역</span>
    <span class="block block-test3 area5">다섯 번째 영역</span>
    
</bodY>
</html>

 

 

 

 

#

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

 

#1_ 크기 지정

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

#test2{
	width: 50%;
	height: 200px;
}

 

#1_ 블럭 생성

.block{
	width: 150px;
	height: 150px;
	border: 1px solid black;
	color: white;
}

.area1{
	background: red;
}

.area2{
	background: orange;
}

.area3{
	background: yellowgreen;
}

.area4{
	background: green;
}

.area5{
	background: blue;
}

 

#2_ inline: 블럭 요소를 인라인 요소로 변경한다.

display를 inline요소로 변경해서 글자의 길이만큼 크기가 지정되는 것을 확인할 수 있다.(가변)

.block-test1{
	display: inline;
}

<< 인라인 요소로 변경되면서 width, height 속성이 무시된다.

 

#3_ inline-block: 영역은 block 그대로, width와 height는 지정한대로 유지된다.

.block-test2{
	display: inline-block
}

 

#_

        .block-test3{
            display: block;
        }

 

 

 

더보기 
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>레이아웃 스타일 1</title>
    <style>
        .size-test{
            border: 2px solid red;
        }

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

        #test2{
            width: 50%;
            height: 200px;
        }

        .block{
            width: 150px;
            height: 150px;
            border: 1px solid black;
            color: white;
        }

        .area1{
            background: red;
        }

        .area2{
            background: orange;
        }

        .area3{
            background: yellowgreen;
        }

        .area4{
            background: green;
        }

        .area5{
            background: blue;
        }
        /* 여기까지는 블록 요소이기 때문에 블럭이 변하지 않는다. */
        /* display를 inline요소로 변경해서 글자의 길이만큼만 크기가 지정되는 것을 확인할 수 있다.(가변) */
        .block-test1{
            display: inline;
        }

        /* 영역은 그대로, width & height는 지정한 그대로 유지된다.?? */
        .block-test2{
            display: inline-block
        }

        /* 처음은 span의 특성대로 글씨만큼의 크기 박스가 출력됨 */
        .block-test3{
            display: block;
        }
        /* -> 블록 요소로 변경됨*/
    </style>
</head>
<body>
    <h1>레이아웃 스타일</h1>
    <h3>width와 height</h3>
    <p>내용이 차지하고 있는 영역의 크기를 조절할 수 있는 속성</p>
    <h4>고정 크기</h4>
    <div id="test1" class="size-test"></div>
    <h4>가변 크기</h4>
    <div id="test2" class="size-test"></div>

    <h3>화면 배치 방법 변경</h3>
    <p>블럭 요소와 인라인 요소의 속성을 변경하여 배치 방식을 변경할 수 있다.</p>
    <br>
    <p>블럭 요소: 한 줄 전체 차지하는 요소. 한 줄에 여러 요소가 올 수 없는 요소.</p>
    <pre> Ex. div, p, hn, ul, ol, form, hr, table, fieldset ...</pre>
    <p>인라인 요소: 한 줄에서 일부분만 차지하는 요소. 한 줄에 여러 요소가 올 수 있는 요소.</p>
    <pre> Ex. img, br, sub, sup, span, input, textarea, label, button ... </pre>
    <br>
    <h3>두 요소의 특징</h3>
    <ul>
        <li>블럭 요소는 줄 바꿈 발생, 인라인 요소는 발생하지 않음.</li>
        <li>블럭 요소는 width와 height 속성 적용, 인라인 요소는 적용되지 않음.</li>
        <li>블럭 요소는 margin-top, margin-botton, padding-top, padding-bottom 속성 적용,
            인라인 요소는 적용되지 않음.</li>
    </ul>

    <hr>

    <h4>블럭 요소를 인라인 요소로 변경</h4>
    <pre><b>>> display: inline 테스트</b></pre>
    <pre>인라인 요소로 변경되면서 width와 height 속성이 무시된다.</pre>
    <!-- 클래스의 카테고리화: block, block-test1, area1 모두 클래스명으로 지정된다.-->
    <div class="block block-test1 area1">첫 번째 영역</div>
    <div class="block block-test1 area2">두 번째 영역</div>
    <div class="block block-test1 area3">세 번째 영역</div>
    <div class="block block-test1 area4">네 번째 영역</div>
    <div class="block block-test1 area5">다섯 번째 영역</div>

    <pre><b>>>display: inline-block 테스트</b></pre>
    <pre>영역은 인라인 요소로 변경되지만 내용은 블럭 요소로 지정되어 width와 height 속성을 설정할 수 있다.</pre>
    <div class="block block-test2 area1">첫 번째 영역</div>
    <div class="block block-test2 area2">두 번째 영역</div>
    <div class="block block-test2 area3">세 번째 영역</div>
    <div class="block block-test2 area4">네 번째 영역</div>
    <div class="block block-test2 area5">다섯 번째 영역</div>

    <h4>인라인 요소를 블럭 요소로 변경</h4>
    <pre><b>>> display: block 테스트</b></pre>
    <pre>인라인 요소를 블럭 요소로 변경하면 width와 height 값을 지정할 수 있지만, 내용만 block 요소로 변경이 된다.</pre>
    <span class="block block-test3 area1">첫 번째 영역</span>
    <span class="block block-test3 area2">두 번째 영역</span>
    <span class="block block-test3 area3">세 번째 영역</span>
    <span class="block block-test3 area4">네 번째 영역</span>
    <span class="block block-test3 area5">다섯 번째 영역</span>
    
</bodY>
</html>
저작자표시 (새창열림)

'KH 정보교육원 > CSS CLASS' 카테고리의 다른 글

16. 레이아웃 스타일 3  (0) 2020.05.06
15. 레이아웃 스타일 2  (0) 2020.05.06
13_색상 스타일 연습 2  (0) 2020.05.04
12_색상 스타일 실습 1  (0) 2020.05.04
11_배경 스타일 2  (0) 2020.05.04

'KH 정보교육원/CSS CLASS'의 다른글

  • 현재글14. 레이아웃 스타일 1

관련글

댓글

티스토리툴바