본문 바로가기
Frontend/HTML , CSS

2월 6일 CSS, Bootstrap (07~18)

by howdyoon 2023. 2. 6.

07_position
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>07_position.html</title>
    </head>
    
    <body>

        참조 https://www.w3schools.com/css/css_positioning.asp
        https://www.w3schools.com/cssref/pr_class_position.php

        ● [화면 레이아웃 기법]
        - position속성 : 배치 방법을 지정
        - float속성    : 레이어를 왼쪽 또는 오른쪽 위치 지정. 수평을 기준으로 정렬하기
                         요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치할 때 지정
        - clear속성    : float속성을 해제
        - z-index속성  : 레이어 순서를 정함

        [포지셔닝(레이아웃)]
        - 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치하는 것
        - 수평, 수직, 그리드 방향으로 배치 할 수 있다
        - position : "static | relative | fixed | absolute | sticky"
        
    
    </body>
</html>
08_static
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>08_static.html</title>
    </head>
    
    <body>
    
        <h3>position:static</h3>
        <div style="position: static;">
            가장 기본<br>
            수직으로만 배치<br>
            <div>문서의 흐름에 맞추어 배치</div>
        </div>

    </body>
</html>
09_absolute
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>09_absolute.html</title>
        <!-- 현재 페이지에서 CSS 초기화-->
        <link rel="stylesheet" href="reset.css">
        <style>
            /*
            #s1 ul{background-color: thistle; height: 300px;}
            #s1 li:nth-child(1){
                background-color: violet;
                position: absolute;
                left: 100px;
                top: 30px;
            }
            #s1 li:nth-child(2){
                background-color: violet;
                position: absolute;
                right: 0;
                bottom: 0;
            }
            */
            /*1) <body> 본문영역이 기준 좌표*/
           /*
            #s1 li:nth-child(1){
                background-color: red;
                position: absolute;
                left: 0;
                top: 0;
            }
            #s1 li:nth-child(2){
                background-color: green;
            }
            #s1 li:nth-child(3){
                background-color: blue;   
            }
            */

            /*2) 부모 영역을 기준으로 position:relative*/
            /* 부모 ul, 자식 li */
            /*
            #s1 ul{
                background-color: yellow;
                height: 300px;
                position: relative;
            }
            #s1 li:nth-child(1){
                background-color: red;
                position: absolute;
                --left: 0;
                --top: 0;
                right: 0;
                bottom: 0;
            }
            #s1 li:nth-child(2){
                background-color: green;
            }
            #s1 li:nth-child(3){
                background-color: blue;
            }
            */
            /*3) */
            #s1 ul{
                background-color: yellow;
                width: 300px;
                height: 300px;
                position: relative;
            }
            #s1 li:nth-child(1){
                background-color: red;
                position: absolute;
                width: 100%;
                right: 0;
                bottom: 0;
            }
            #s1 li:nth-child(2){
                background-color: green;
            }
            #s1 li:nth-child(3){
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
    
        <!-- 절대적 위치 position:absolute -->
        <section id="s1">
            <h3>position:absolute</h3>
            <ul>
                <li>국어</li>
                <li>영어</li>
                <li>수학</li>
            </ul> 

        </section>

    </body>
</html>
10_relative
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>10_relative.html</title>
        <link rel="stylesheet" href="reset.css">
        <style>
            /* 1) 요소의 자기 위치가 살아있음 */
            /*
            #s1 ul {
                background-color: yellow;
                height: 300px;
                width: 300px;
                position: relative;
            }
            #s1 li:nth-child(1) {
                background-color: red;
                position: relative;
                left: 50px;
                top: 30px;
            }
            #s1 li:nth-child(2) {background-color: green;}
            #s1 li:nth-child(3) {background-color: blue;}
            */
            /*2) 부모의 위치를 지정 */
            #s1 ul {
                background-color: yellow;
                height: 300px;
                width: 300px;
                position: relative;
                left: 50px;
                top: 50px;
            }
            #s1 li:nth-child(1) {
                background: red;
                position: relative;
                --left: 50px;
                top: 30px;
                right: 50px;
            }
            #s1 li:nth-child(2) {background: green;}
            #s1 li:nth-child(3) {background: blue;}
        </style>
    </head>
    
    <body>
    
        <!-- 상대적 위치 position:relative -->
        <section id="s1">
            <h3>posittion:relative</h3>
            <ul>
                <li>손흥민</li>
                <li>박지성</li>
                <li>김연아</li>
            </ul>
        </section>
    </body>
</html>
11_fixed
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>11_fixed.html</title>
        <link rel="stylesheet" href="reset.css">
        <style>
            /*
            absolute, relative  문서영역 기준 (일단은 body 영역을 기준)
            fixed               화면영역 기준 (브라우저를 기준으로 예)위로, 아래로,퀵메뉴 등
            */

            /*1)*/
            /*
            #s1 ul{background-color: yellow;}
            #s1 li:nth-child(1){background-color: red;}
            #s1 li:nth-child(2){
                background-color: green;
                --position: absolute;
                --position: relative;
                position: fixed;
                left: 100px;
                top: 100px;
            }
            #s1 li:nth-child(3){background-color: blue;}
            */
            /*2) 화면 하단에 고정 */
            /*
            #s1 ul{background-color: yellow;}
            #s1 li:nth-child(1){background-color: red;}
            #s1 li:nth-child(2){
                background-color: green;
                --position: absolute;
                --position: relative;
                position: fixed;
                bottom: 0;
                width: 100%;
                height: 80px;
            }
            #s1 li:nth-child(3){background-color: blue;}
            */

            /*3) 부모포지션 지정. 브라우저 화면을 기준으로 보기 때문에 어떠한 부모에게도 종속되지 않음 */
            #s1 ul{background-color: yellow; position: relative; height: 300px;}
            #s1 li:nth-child(1){background-color: red;}
            #s1 li:nth-child(2){
                background-color: green;
                position: fixed;
                bottom: 0;
                width: 100%;
                height: 80px;
            }
            #s1 li:nth-child(3){background-color: blue;}
        </style>
    </head>
    
    <body>

        <!-- 고정 위치 position:fixed -->
        <section id="s1">
            <h1>position:fixed</h1>
            <ul>
                <li>개나리</li>
                <li>진달래</li>
                <li>라일락</li>
            </ul>
        </section>

        <!-- 문서의 길이를 강제로 길게. 수직 스크롤이 나올 수 있게 해서 테스트 한다 -->
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>
        <p>KOREA</p>

    
    </body>
</html>
12_sticky
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>12_sticky.html</title>
        <link rel="stylesheet" href="reset.css">
        <style>
            #s1 ul {background: yellow;}
            #s1 li:nth-child(1) {background: red;}
            #s1 li:nth-child(2) {background: green;}
            #s1 li:nth-child(3) {background: blue;}

            /* 1)position:fixed 주면 다음 요소를 덮어버림 */
            /*
            #header {
                position: fixed;
                height: 70px;
                background-color: black;
                width: 100%;
                color: white;
                font-size: 50px;
                font-weight: bold;
                text-align: center;
            }
            */

            /* 2) 완성코드*/
            #header {
                position: sticky;
                top: 0; /* sticky 줄때 필수 사항 */
                height: 70px;
                background-color: black;
                width: 100%;
                color: white;
                font-size: 50px;
                font-weight: bold;
                text-align: center;
            }

        </style>
    </head>
    
    <body>
    
        <!-- 붙임 위치 position:sticky -->

        <header id="header">
            <h1>아이티윌</h1>
        </header>
        <hr>

        <section id="s1">
            <h1>position:sticky</h1>
            <ul>
                <li>서울</li>
                <li>부산</li>
                <li>제주</li>
            </ul>
        </section>

    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>
    <p>KOREA</p>

    </body>
</html>

 

13_zindex
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>13_zindex.html</title>
        <style>
            #aa{
                background-color: red;
                width: 100px;
                height: 100px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -3;
            }
            #bb{
                background-color: green;
                width: 80px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -5;
            }#cc{
                background-color: blue;
                width: 60px;
                height: 300px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -1;
            }
        </style>
    </head>
    
    <body>
    
        <!-- 참조 https://www.w3schools.com/css/css_z-index.asp -->

        <!-- 레이어 순서 정하기 (가장 큰 수가 위로. 레이어 순서값은 음수도 허용)-->
        <div id="aa"></div>
        <div id="bb"></div>
        <div id="cc"></div>

    </body>
</html>
14_float
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>14_float.html</title>
        <style>
            /*1)
            div {border: 1px solid blue; width: 100px; height: 100px;}
            */

            /* 2) div 블럭요소의 세로 배치를 가로 배치로 변경 */
            div {border: 1px solid blue; width: 100px; height: 100px; float: left;}

            .box4{float: right}
        </style>
    </head>
    
    <body>
        <!-- float : 레이어 배치하기 -->
        <div>BOX 1</div>
        <div>BOX 2</div>
        <div>BOX 3</div>

        <div class="box4">BOX4</div>

    </body>
</html>
15_부모자식요소
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>15_부모자식요소.html</title>
        <style>
            body{
                background-color: red;
                margin: 0;
            }
            .parent{
                width: 600px;
                height: 300px;
                background-color: yellow;
                margin: 150px;
                position: relative;
            }
            .child{
                width: 100px;
                height: 50px;
                background-color: gray;
                right: 10px;
                bottom: 10px;
                position: absolute;
            }
        </style>
    </head>
    
    <body><!-- style="position:relative" 속성이 이미 있는 상태임 -->
    
        부모요소 : relative / 자식요소 : absolute
        <hr>

        <div class="parent">
            <div class="child"></div>
        </div>

    </body>
</html>
16_layout
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>16_layout.html</title>
        <style>
            /*1)*/
            /*
            .container{
                border: 2px solid blue;
                width: 900px;
                margin: auto;
            }
            */

            /*4)*/
            /*
            .container{
                border: 2px solid blue;
                width: 912px; 각.inner section 스타일에서 2+300+2 (왼쪽선 굵기+가로크기+오른쪽선 굵기)*3개
                margin: auto;
            }
            */

            /*5)완성코드*/
            .container{
                border: 2px solid blue;
                width: 900px;
                margin: auto;
            }

            /*2)*/
            header {
                border: 2px solid red;
                height: 150px;
                width: 100%;
                line-height: 150px;
                text-align: center;
            }

            /*3)*/
            /*
           .inner section {
                border: 2px solid green;  
                width: 300px;
                height: 300px;
                float: left;
           }
           */

           /*6)*/
           .inner section {
                border: 2px solid green;  
                width: 300px;
                height: 300px;
                float: left;
                padding: 20px;
                /*선굵기, 여백등으로 늘어난 부분은 container의 width=900px내에서 해결함*/
                box-sizing: border-box;
           }

           /*7)
           footer { border: 5px solid orange; height: 100px;}
           */

           /*8)*/
           /*float 속성은 전 요소 속성을 상속받는 특징이 있음. 이미 float:left가 있는 상태임*/
           /*footer { border: 5px solid orange; height: 100px; float: left;}*/

           /*9)clear : float 속성 해제*/
           /* 6)에서 상속받은 float:left 속성을 지워야 함 */
           footer { border: 5px solid orange; height: 100px; clear: left; --clear: right;}

           /*10) 완성코드*/
           /*   lert,right 모두해제*/
           /*   참조 https://www.w3schools.com/css/css_float_clear.asp*/
           footer { border: 5px solid orange; height: 100px; clear: both;}
        </style>
    </head>
    
    <body>

    <!-- 전체 레이아웃 구성하기 -->

    <div class="container">
        <header>Header</header>
        <div class="inner">
            <section>section 1</section>
            <section>section 2</section>
            <section>section 3</section>
        </div>
        <footer>Footer</footer>
    </div>

    </body>
</html>
17_display
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>17_display.html</title>
        <style>
            #mydiv{
                background-color: yellow;
                position: absolute;
                left: 30px;
                top: 350px;
                width: 200px;
                height: 150px;
                overflow: scroll; /*hidden | scroll*/
                --display: block; /*none | block 화면출력*/
                visibility: visible; /*hidden | visible 화면출력*/
            }

            p {color: red;}
            p.ex1 {display: none;}
            p.ex2 {display: inline;}
            p.ex3 {display: block;}
            p.ex4 {display: inline-block; width: 100px; height: 100px;}  
        </style>
    </head>
    
    <body><!-- style="position:relative" 속성이 이미 있는 상태 -->

        <!-- 참조 https://www.w3schools.com/css/css_display_visibility.asp -->

        <h3>CSS Layout - The display Property</h3>

        <iframe src="13_zindex.html" frameborder="0" width="200" height="150"></iframe>
        <hr>

        <textarea cols="30" rows="5">The display property is the most important CSS property for controlling layout.The display property specifies if/how an element is displayed.</textarea>
        <hr>
        <div id="mydiv">
            As mentioned, every element has a default display value. However, you can override this.

            Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

            A common example is making inline.
        </div>

        <br><br><br><br><br><br><br><br><br><br>  

        <h3>display 세부 속성</h3>
        <!-- display: none -->
        <div style="display: none;">무궁화</div>

        <!-- block요소 : 가로영역 전부 채움. wdith와 height 크기 지정 가능 -->
        <div style="background-color: red; width: 300px; height: 300px;">오필승</div>
        <div style="background-color: green;">코리아</div>
        <p style="background-color: blue;">대한민국</p>
        <header style="background-color: gold;">무궁화</header>
        <section style="background-color: gray;">아이티윌</section>
        <hr>

        <!-- inline요소 -->
        <!-- 내용만큼만 영역이 존재. 줄바꿈 되지 않음. wdith와 height 크기 지정 불가능 -->
        <span style="background-color: beige; width: 300px; height: 300px;">개나리</span>
        <span style="background-color: brown;">진달래</span>
        <hr>

        <!-- inline-block 줄바꿈이 되지 않지만 크기 조정 가능. inline-block 중간형태 -->
        <!-- 참조 https://www.w3schools.com/cssref/pr_class_display.asp -->

        <h1>The display Property</h1>

        <h2>display: none:</h2>
        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
        </div>

        <h2>display: inline:</h2>
        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
        </div>

        <h2>display: block:</h2>
        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
        </div>

        <h2>display: inline-block:</h2>
        <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
        </div>

    </body>
</html>
18_rotate
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>18_rotate.html</title>
        <style>
            #menu{
                position: relative;   /*부모*/
                width: 150px;
                height: 130px;
                background-color: silver;
                margin: auto;         /*수평을 기준으로 가운데 정렬*/
                border-radius: 10px;  /*모서리 라운드 처리*/
            }

            #menu:hover {/*마우스가 올라오면*/
                background-color: orange;
                cursor: pointer;
            }

            #menu>strong {
                /*자식. 원래 나의 위치도 사라지고, 부모안에서만 움직임*/
                position: absolute;
                left: 35px;
                bottom: 15px;
            }

            /*이미지 삽입*/
            #menu>.gear {
                position: absolute;
                width: 40px;
                height: 40px;
                background-image: url(../images/gear-gray.png);
                background-size: 40px 40px;
            }

            /*톱니바퀴 이미지 배치하기*/
            #menu>.gear:nth-child(1){
                top: 16px;
                left: 46px;
            }
            #menu>.gear:nth-child(2){
                top: 47px;
                left: 64px;
                /*시계방향으로 30도 회전*/
                transform: rotate(30deg);
            }

            /*마우스가 바탕색(실버)에 오버가 되면 이미지를 오렌지색 이미지로 변경*/
            #menu:hover>.gear {
                background-image: url(../images/gear.png);
                /*부드럽게*/
                transition: .4s linear; /*ease | linear*/
            }

            /*이미지 회전*/
            #menu:hover>.gear:nth-child(1){
                /*시계 반대방향으로 반바퀴*/
                transform: rotate(-180deg);
            }
            #menu:hover>.gear:nth-child(2){
                /*시계 방향으로 반바퀴*/
                /*이미 30도가 회전된 상태이므로 30+180도해야 반바퀴*/
                transform: rotate(210deg); 
            }

        </style>
    </head>
    
    <body>

        <div id="menu">
            <div class="gear"></div>
            <div class="gear"></div>
            <strong>SETTINGS</strong>
        </div>

    </body>
</html>
저작자표시 비영리 변경금지 (새창열림)

'Frontend > HTML , CSS' 카테고리의 다른 글

2월 7일 CSS, Bootstrap (20~30)  (0) 2023.02.07
2월 3일 HTML, CSS (18~20 / 01~06)  (0) 2023.02.06
2월 2일 HTML, CSS (12~17)  (0) 2023.02.06
2월 1일 HTML (01~11)  (0) 2023.02.06

관련글

티스토리툴바