본문 바로가기
Web/CSS

05. CSS 디스플레이, 폼, 포지션

by 사라리24 2024. 4. 8.
SMALL

 

1. CSS의 디스플레이

웹페이지의 레이아웃을 결정하는 속성
block, inline, inline-block, none,  flex...

 

 

 

  • visibility: hidden; <-> visibility: visible;


        <head>

            <style>
                div{
                    background-color: deepskyblue;
                    border: 3px solid red;
                    margin-bottom: 30px;
              }

                p#none {display: none;} /*div 크기가 작아짐(실제로 사라짐!)*/
                p#hiddin {display: hidden;} /*div 크기가 고정(안 보일 뿐!)*/
     

            </style>

        </head>
        <body>
                  <h2>디스플레이</h2>

                  <div>
                    <p>display 속성값을 none으로 설정</p>
                    <p id="none">display 속성값을 none으로 설정</p>
                  </div>

                <div>
                  <p>visibility 속성값을 hidden으로 설정</p>
                  <p id="hidden">visibility 속성값을 hidden으로 설정</p>
                </div>
        </body>

 

 

2. CSS 폼

 

 

 


       

        <head>

            <style>
        input[type=text],
        input[type=password],
        select {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .btn {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #45a049;
        }

        div {
            margin: 0 auto;
            text-align: left;
            width: 80%;
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }

        #wrap {
            padding: 50px;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 12px 20px;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;
            background-color: #f8f8f8;
            resize: none;
        }
 
            </style>

        </head>
        <body>
    <div>
        <div id="wrap">
            <h2>폼</h2>
            <form action="#">
                <p>아이디: <input type="text" id="userid" class="input" maxlength="20"                     
                                   placeholder="아이디를 입력하세요"></p>
                <p>비밀번호: <input type="password" id="userpw" class="input" maxlength="20"                        
                                   placeholder="비밀번호를 입력하세요"></p>
                <p>직업:
                    <select name="job" id="job">
                        <option value="프로그래머">프로그래머</option>
                        <option value="의사">의사</option>
                        <option value="법조인">법조인</option>
                        <option value="학생">학생</option>
                        <option value="유튜버">유튜버</option>
                    </select>
                </p>
                <p><textarea name="content" id="content"></textarea></p>
                <p class="center"><button class="btn">회원가입</button></p>
            </form>
        </div>
    </div>   
        </body>

 

 

 

 

3. CSS Position

요소의 위치를 결정하는 방식을 결정

 

 

    • 정적 위치 지정방식
      - static position(기본값)
      - HTML 요소의 위치를 결정하는 기본적인 방식
      - 단순히 웹페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식
      - 겹쳐지지 않는다 (2,3,4,5는 겹침 현상 발생)

 

  • 상대 위치 지정방식
    - relative position- top, left, right, bottom 속성값을 사용하여 재설정
    - HTML 요소의 기본 위치(정적 위치 지정방식)를 기준으로 위치를 재설정하는 방식
    - top, left, right, bottom 속성값을 사용하여 재설정

     


       

        <head>

            <style>
                 div { width: 200px; padding: 20px; }
                 .relative1 { background-color: deeppink; }
                 .relative2 {
                   background-color: deepskyblue;
                   position: relative;
                   left: 200px;
                   top: 100px;
                   }
                 .relative3 {
                   background-color: yellow;
                   position: relative;
                   right: 100px;
                   bottom: 50px;
                     }
 
            </style>

        </head>
 
        <body>
                  <h2>상대 위치 지정방식</h2>

                    <div class="relative1">상대 위치 지정방식1</div>
                    <div class="relative2">상대 위치 지정방식2</div>
                    <div class="relative3">상대 위치 지정방식3</div>

        </body>

 

    • 고정 위치 지정 방식
      - fixed position
      - 웹 페이지가 스크롤되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
      - 뷰포트를 기준으로 위치를 설정하는 방식
      - top, left, right, bottom 속성값을 사용하여 재설정

       

        <head>

            <style>
                 #fx {
                     position: fixed;
                     width: 100px;
                     height: 200px;
                     background-color: gold;
                     right: 10px;
                     bottom: 10px;
                     }

              
            </style>

        </head>
        <body>
            <h2>고정 위치 지정 방식</h2>
              <div id="fx"></div>
              <div id="content">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
               Labore totam adipisci perferendis esse, error dicta,
               eius voluptatem ipsa quo animi quidem,
               maiores eligendi perspiciatis aliquid vero pariatur.
               Recusandae, nihil doloremque.</p>
              <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
               Labore totam adipisci perferendis esse, error dicta,
               eius voluptatem ipsa quo animi quidem,
               maiores eligendi perspiciatis aliquid vero pariatur.
               Recusandae, nihil doloremque. </p>

                           .......................

              <p>  Lorem ipsum dolor sit amet consectetur adipisicing elit.
               Labore totam adipisci perferendis esse, error dicta,
               eius voluptatem ipsa quo animi quidem,
               maiores eligendi perspiciatis aliquid vero pariatur.
               Recusandae, nihil doloremque.</p>
            <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
               Labore totam adipisci perferendis esse, error dicta,
               eius voluptatem ipsa quo animi quidem,
               maiores eligendi perspiciatis aliquid vero pariatur.
               Recusandae, nihil doloremque. </p>

            
         </div>
        </body>

 

  • 부모 태그를 이용한 고정 위치 지정 방식
    - sticky position- 익스플로러에서는 작동하지 않음
    - fixed가 브라우저 화면의 절대 위치를 사용하는 반면, sticky는 부모 태그의 절대 위치값을 사용

       

        <head>

            <style>
                  html, body { margin: 0; padding: 0;}
                 .header { height: 80px; background-color: gold;}
                 .container {
                     display: flex;
                     flex-flow: row nowrap;
                  }

                .content {
                 width: 80%;
                 height: 800px;
                 background-color: deepskyblue;
                 }

                .sidebar {
                position: sticky;
                top: 30px;
                width: 20%;
                background-color: deeppink;
                height: 400px;
                }
  
               .footer {
               background-color: yellowgreen;
               height: 100px;
                }


            </style>

        </head>
        <body>
         
              <h2>스티키 지정방식</h2>
              <header class="header">헤더</header>
              <main class="container">
                   <section class="content">메인 컨텐드</section>
                   <aside class="sidebar">sticky 적용하기</aside>
            </main>
            <footer class="footer">푸터</footer>
         
        </body>

* 스크로를 내리면 sticky 칸이 30px의 간격을 두고 따라온다

 

 

 

    • 절대 위치 지정 방식
      - absolute position
      - 뷰포트들 기준으로 위치를 설정하는 방식
      - 조상요소를 기준으로 위치를 저장할 수 있음
      - 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 설정
      - 조상요소를 기준으로 위칠르 설정하려면 조상요소는 반드시 정적 위치 지정 방식이 아니어야 함
      - top, left, right, bottom 속성값을 사용할 수 있음

       

        <head>

            <style>
                #wrap {
                    width: 500px;
                    height: 500px;
                    border: 3px solid red;
                    position: relative;
                   }

               .box {
                   position: absolute;
                   width: 50px;
                   height: 50px;
                   background-color: deepskyblue;
                   }


               #ab1 { top: 0; right: 0;}
               #ab2 { bottom: 0; left: 0;}
               #ab3 { bottom: 0; right: 0;}
               #ab4 { top: 100px; left: 150px;}
              

            </style>

        </head>
        <body>
               <h2>절대 위치 지정방식</h2>
               <div id="wrap">
                   <div class="box3" id="ab1"></div>
                   <div class="box3" id="ab2"></div>
                   <div class="box3" id="ab3"></div>
                   <div class="box3" id="ab4"></div>
                   <div class="box3" id="ab5"></div>
               </div>
        </body>

 

 

 

  • z-index
    - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 가능성이 있음
    - 겹치는 요소들이 쌓이는 순서를 결정할 때 사용
    - 숫자의 크기가 클수록 위에 위치하고 작을수록 아래에 위치
     

       
        <head>

            <style>
                div#wrapper { position: relative ;}

                div.box {
                    position: absolute;
                    width: 200px;
                    height: 200px;
                    border: 1px solid black;
                    font-size: 25px;
                    }

                #b1 {
                    left:50px;
                    top: 50px;
                    background-color: deeppink;
                    z-index: 100;
                    }

                #b2 {
                    left: 120px;
                    top: 70px;
                    background-color:gold;
                    z-index:1;
                   }

                #b3 {
                    left: 70px;
                    top: 110px;
                    background-color: aquamarine;
                    z-index: 10;
                  }


            </style>

        </head>
        <body>
        <h2>z-index</h2>
            <div id="wrapper">
                <div id="b1" class="box">1번째 div</div>
                <div id="b2" class="box">2번째 div</div>
                <div id="b3" class="box">3번째 div</div>
            </div>
   

        </body>

 

 

  • float
    - HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
    - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
    - float를 적용받은 요소의 다음에 나오는 요소 방향을 결정 (left, right)
    - float를 적용받은 요소는 다른 요소보다 위쪽(배경보다 위)에 위치
    - 컨텐츠 크기만큼만 영역을 설정 (블록(면))

       

        <head>

            <style>
                img {

                    float: left;
                    margin-right: 20px;
                    }             
 
            </style>

        </head>
        <body>
              <h2>float 1</h2>
                   <img src="./gift.png" alt="선물">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Praesentium, eum officiis inventore ipsam culpa enim labore aut sed nesciunt
                      dolores officia a deserunt! Harum dolore veritatis error quasi, iste hic.
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, facere?
                      Quae provident temporibus dolores, fuga consectetur omnis nihil sunt voluptatibus.
                      Repellat, velit itaque tempore iure quo asperiores id ad aut.
        </body>
(기본) 글자가 이미지의 하단에 맞춰지게 됨



(float 적용) 글자가 이미지의 옆에 맞춰지게 됨


       

        <head>

            <style>
              div{
                    padding: 20px;
                }

                #box1 {
                    background-color: gold;
                    float: left;
                    margin-right: 20px;
                }

                #box2{
                    background-color: deeppink;
                    float: left;
                    margin-right: 20px;
                }

                #box3{
                    background-color: greenyellow;
                    float: left;
                    margin-right: 20px;
                }

                #box4{
                    background-color: deepskyblue;
                    float:right
                }
      

            </style>

        </head>
        <body>
            <h1>float 2</h1>

             <div id="box1">박스1</div>
             <div id="box2">박스2</div>
             <div id="box3">박스3</div>
             <div id="box4">박스4</div>
        </body>

 

    • clear
      float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
      float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듦
      clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)

       

        <head>

            <style>
                 body { margin: 20px 30px; max-width: 800px;}

                 p {
                     padding : 10px;
                     text-align: center;
                     font-size: 20px;
                 }

                 #p1 {
                     float: left;
                     width: 38%;
                     background-color: gold;
                     margin-bottom: 20px;
                 }

                 #p2 {
                     float: right;
                     width: 54%;
                     background-color: deepskyblue;
                 }

                 #p3 {
                     clear: both;
                     background-color: deeppink;
                 }

             
            </style>

        </head>
        <body>
         <h2>clear</h2>

           <div id="p1">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Numquam, excepturi animi? Esse unde enim sit tempore maxime,
                   facere est necessitatibus ratione recusandae.
                   Repellendus labore vero libero voluptate illo corrupti iure?</p>
           </div>

           <div id="p2">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Numquam, excepturi animi? Esse unde enim sit tempore maxime,
                   facere est necessitatibus ratione recusandae.
                   Repellendus labore vero libero voluptate illo corrupti iure?</p>
           </div>

           <div id="p3">
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Numquam, excepturi animi? Esse unde enim sit tempore maxime,
                   facere est necessitatibus ratione recusandae.
                   Repellendus labore vero libero voluptate illo corrupti iure?</p>
           </div>

         
        </body>

(문제 상황) float를 하지 않은 요소들이 float 사이에 끌어올려짐




(clear 적용) float의 영향을 받지 않겠다고 설정

 

  • 레이아웃 만들어보기

       

        <head>

            <style>
                #container {
                    width: 1000px;
                    margin: 0 auto;
                }
                #let {
                    padding: 20px;
                    margin: 10px;
                    border: 1px solid gray;
                }
                header {
                    background-color: deeppink;
                    padding: 20px;
                }
                article {
                    padding: 20px;
                    width: 350px;
                    background-color: deepskyblue;
                    float: left;
                }
                aside {
                    background-color: gold;
                    float: left;    
                    width: 230px;
                }
                footer {
                    background-color: greenyellow;
                    clear: both;
                }
 
            </style>

        </head>
        <body>
             <div id="container">

             <header id="let">
                 <h2>사이트 제목</h2>
             </header>

             <aside id="let">
                 <h2>사이드 바</h2>
                 <ul>
                     <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Vel enim asperiores quia totam atque quaerat numquam, velit,
                      quidem perferendis quos aspernatur adipisci.
                      Tempora quo repudiandae hic aliquid. Quae, mollitia est!</li>
                 </ul>
             </aside>

             <article id="let">
               <h2>본문</h2>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Vel enim asperiores quia totam atque quaerat numquam, velit,
                      quidem perferendis quos aspernatur adipisci.
                      Tempora quo repudiandae hic aliquid. Quae, mollitia est! </p>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Vel enim asperiores quia totam atque quaerat numquam, velit,
                      quidem perferendis quos aspernatur adipisci.
                      Tempora quo repudiandae hic aliquid. Quae, mollitia est! </p>
                 <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Vel enim asperiores quia totam atque quaerat numquam, velit,
                      quidem perferendis quos aspernatur adipisci.
                      Tempora quo repudiandae hic aliquid. Quae, mollitia est! </p>
             </article>
                 
             <aside id="let">
                 <h2>사이드 바</h2>
                 <ul>
                   <li> Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      Vel enim asperiores quia totam atque quaerat numquam, velit,
                      quidem perferendis quos aspernatur adipisci.
                      Tempora quo repudiandae hic aliquid. Quae, mollitia est! </li>
                 </ul>
             </aside>

             <footer id="let">
                 <h2>푸터</h2>
             </footer>
         </div>

            
        </body>

 

 

 

  • 다단 레이아웃
    - 텍스트를 columm 속성으로 다단을 생성
    - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성
       column-count: 단의 개수를 설정
       column-rule: 단과 단 사이의 구분선, 구분의 모양, 두께, 색상을 설정
       column-gap: 단과 단 사이의 여백을 설정
       column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all)

       

        <head>

            <style>
                 div, h2, p {
                     margin: 0 auto;
                 }

                 h2 { padding: 0 0 20px; text-align: center;}

                 div.col {
                     text-align: justify;
                     padding: 20px;
                     background-color: gold;
                     border: 3px solid red;

                     column-count: 3;
                     column-gap: 30px;
                     column-rule: 3px dashed red;
                 }
                 .col > h2 {column-span: all;}
              


            </style>

        </head>
        <body>
         <div class="col">

         <h2>다단 레이아웃</h2>

         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Tempora molestiae magni nobis perspiciatis dolore reprehenderit eveniet hic,
          corporis debitis accusantium!Deleniti impedit facere cum architecto
          quaerat eligendi molestias dolorem incidunt?
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Tempora molestiae magni nobis perspiciatis dolore reprehenderit eveniet hic,
          corporis debitis accusantium! Deleniti impedit facere cum architecto quaerat
          eligendi molestias dolorem incidunt?Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Tempora molestiae magni nobis perspiciatis dolore reprehenderit eveniet hic,
          corporis debitis accusantium! Deleniti impedit facere cum architecto
          quaerat eligendi molestias dolorem incidunt?</p>

          </div>
            
        </body>

 

 

 

@. 단축키

 

 

 


       
    #wrap>.box#ab$*5

    ->  <div id="wrap">
   
            <div class="box" id="ab1"></div>
   
            <div class="box" id="ab2"></div>
   
            <div class="box" id="ab3"></div>
   
            <div class="box" id="ab4"></div>
   
            <div class="box" id="ab5"></div>
   
        </div>
 

 

 


       
    #wrapper>#b$.box{$번째div}*3

    ->  <div id="wrapper">
   
            <div id="b1" class="box">1번째div</div>
   
            <div id="b2" class="box">2번째div</div>
   
            <div id="b3" class="box">3번째div</div>
   
        </div>
 

 

  •  

       
        #wrapper>#b$.box{$번째 div}*3
 
        <div id="wrapper">

            <div id="b1" class="box">1번째 div</div>

            <div id="b2" class="box">2번째 div</div>

            <div id="b3" class="box">3번째 div</div>

       </div>
 
 

 

 

 

'Web > CSS' 카테고리의 다른 글

07. 미디어쿼리  (0) 2024.04.11
06. flex  (0) 2024.04.09
04. 박스모델  (0) 2024.04.08
03. CSS 배경  (0) 2024.04.08
02. CSS의 텍스트  (0) 2024.04.08

관련글

티스토리툴바