10_레이아웃 관련 스타일1

요소

블럭요소 : 한줄단위로 영역이 잡힙 / 자동으로 줄바꿈이 발생함 
          ex) div, p, pre, h1~6, ...
인라인요소 : content영역만 잡힙 / 옆으로 배치됨
          ex) span, label, input, img,...

고정크기, 가변크기

content영역의 크기를 조정하는 속성(내용물 영역)
<style>
        .size-test{
            border : 10px solid red; /* height가 없어서 사실상 한줄임*/
        }

        #test1{
            width:400px; /* 가로 */
            height:200px; /* 세로 */
            /* 고정크기기 때문에, 화면에 의한 크기의 변화가 없음 */
        }

        #test2{
            width:50%; 
            height:100%; 
            /* height의 %는 부모태그를 기준으로 가변길이를 적용하는데
               body태그는 기본적으로 가변길이가 적용되지 않음. */
            height:150px; 
            /* 테두리를 뺀 부분이 전체화면의 각 %만큼 됨. */
        }
</style> 
<body>
    <h4>고정크기 px</h4>
    <div id="test1" class="size-test"></div>
    
    <h4>가변크기 %</h4>
    <div id="test2" class="size-test"></div>  
</body>

display

화면배치 방법을 변경해주는 속성
블럭요소와 인라인요소의 속성을 변경해서 배치방식을 바꿔줌.
[표현법]
선택자 {
       display:inline / inline-block / block;
}

inline

<style>
        .display-test{
            border : 1px solid black;
            width : 150px;
            height : 150px;
        }
        /* 인라인요소 적용 전 */
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .pink{
            background-color: pink;
        }
        .green{
            background-color: green;
        }
        .purple{
            background-color: purple;
        }

        /* 인라인요소 적용 후 */
        .inline{
            display:inline;
        }  
  
</style>  
<body>
    <!-- 기존의 블럭요소인 div태그들을 인라인요소로 바꿔보기 -->
    <h4>display : inline;</h4>

    <!-- 인라인 요소로 바꾸기 전 -->
    <div class="display-test red">첫번째 영역</div>
    <div class="display-test yellow">두번째 영역</div>
    <div class="display-test pink">세번째 영역</div>
    <div class="display-test green">네번째 영역</div>
    <div class="display-test purple">다섯번째 영역</div>

    <br>

    <!-- 인라인요소로 바꾼 후 -->
    <div class="display-test inline red">첫번째 영역</div>
    <div class="display-test inline yellow">두번째 영역</div>
    <div class="display-test inline pink">세번째 영역</div>
    <div class="display-test inline green">네번째 영역</div>
    <div class="display-test inline purple">다섯번째 영역</div>

	<b>display:inline을 적용할 시, width랑 height속성이 적용되지 않음.</b>
</body>

inline-block

<style>
        .inline-block{
            display:inline-block;
        }  
</style>
<body>
    <h4>display : inline-block</h4>
    
    <!-- 인라인요소로 배치를 하나, 기존의 width와 height속성을 적용 
         (content에만 적용이 됨.)-->

    <div class="display-test inline-block red">첫번째 영역</div
    ><div class="display-test inline-block yellow">두번째 영역</div
    ><div class="display-test inline-block pink">세번째 영역</div
    ><div class="display-test inline-block green">네번째 영역</div
    ><div class="display-test inline-block purple">다섯번째 영역</div>

    <!-- 참고 : 인라인요소의 경우, 공백이나 줄바꿈이 생길 시, 요소간 틈이 생김
                이 틈을 없애려면, 끝태그의 꺽쇠를 줄바꿈 한 후 다음 태그와 붙여주면 됨.-->
</body>

block

<style>
        .block{
            display:block;
        }  
</style>  
<body>
    <h4>display : block</h4>

    <!-- 블럭요소로 바꾸기 전 -->
    <span class="display-test red">첫번째 영역</span>
    <span class="display-test yellow">두번째 영역</span>
    <span class="display-test pink">세번째 영역</span>
    <span class="display-test green">네번째 영역</span>
    <span class="display-test purple">다섯번째 영역</span>

    <br><br>

    <!-- 블럭요소로 바꾼 후 -->
    <span class="display-test block red"> 첫번째 영역</span>
    <span class="display-test block yellow">두번째 영역</span>
    <span class="display-test block pink">세번째 영역</span>
    <span class="display-test block green">네번째 영역</span>
    <span class="display-test block purple">다섯번째 영역</span>
</body>
11719번 그대로 출력하기 2 파이썬
[AWS] 클라우드 네이티브 AWS 아키텍쳐 설계 및 운영 (2)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage