미새문지

Front End. Day08 CSS(5) 본문

웹 프론트엔드

Front End. Day08 CSS(5)

문미새 2022. 5. 3. 17:23
728x90

다음주부터 프로젝트 시작으로 아마 css는 곧 끝날것 같습니다.

2~3회정도 더 강의들으면 이제 css 끝나고 자바스크립트로 넘어가지 않을까 싶네요

 

CSS Position

  요소가 배치되는 방식을 결정하는 속성입니다.

  많을 경우 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 같이 사용됩니다.

 

 

< position 방식 >

 

1. 정적 위치 지정방식(static)

  기본값인, HTML요소의 위치를 결정하는 기본적인 방식입니다.

  top, left, right, bottom 속성들을 사용할 수 없으며

  단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정합니다.

더보기

static 예시)

<html lang="en">
<head>
    <title>정적위치</title>
    <style>
       span, div {
            background: yellow;
            border: 1px solid red;
} 
    </style>
</head>
<body>
    <span>정적위치1</span>
    <span>정적위치2</span>
    <span>정적위치3</span>
    <div>공백</div>
</body>
</html>

결과)

 

2. 상대 위치 지정방식(relative)

  HTML요소의 기본 위치를 기준으로 위치를 재설정하는 방식이며,

  기본위치를 정적 위치 지정방식일 때 결정되는 위치를 의미합니다.

더보기

relative 예시)

<html lang="en">
<head>
    <title>상대 위치 지정방식</title>
    <style>
        .relative1{width: 200px; background-color: deeppink; padding: 20px; margin-left: 50px;}
        .relative2{width: 400px;height: 200px;background-color: deepskyblue;padding: 20px;position: relative;margin: 20px;top: 20px;left: 100px;}
        .relative2 > div{width: 30%;height: 20%;border: 3px dashed blue;margin: 0 auto;}
    </style>
</head>
<body>
    <h2>상대 위치 지정방식</h2>
    <div class="relative1">상대 위치 지정방식1</div>
    <div class="relative2">상대 위치 지정방식2
        <div>자식 div</div>
    </div>
</body>
</html>

결과)

 

3. 고정 위치 지정방식(fixed)

  뷰 포트를 기준으로 위치를 설정하는 방식입니다.

  웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치

더보기

fixed 예시)

<html lang="en">
<head>
    <title>고정 위치 지정방식</title>
    <style>
        #fix {
            width: 100%;
            height: 200px;
            background-color: gold;
            position: fixed;
            top: 0;
        }
    </style>
</head>
<body>
    <h2>고정 위치 지정방식</h2>
    <div id="fix">맨 위로</div>
    <div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta accusantium dolore ratione qui deleniti unde sunt, nisi veritatis exercitationem consequatur aliquam sapiente, quidem animi dignissimos culpa quam laborum totam blanditiis?</p>
    </div>

</body>
</html>

결과)

 

4. 절대 위치 지정방식(absolute)

  뷰 포트를 기준으로 위치를 설정하는 방식이며, 조상 요소를 기준으로 위치를 지정 가능합니다.

  조상 요소를 가지지 않으면 body 요소를 기준으로 위치를 결정

더보기

absolute 예시)

<html lang="en">
<head>
    <title>절대 위치 지정방식</title>
    <style>
        #modal {width: 300px;height: 200px;position: absolute;background-color: aqua;top: 50%;left: 50%;transform: translate(-50%, -50%);}
        .box{width: 50px;height: 50px;background-color: deeppink;color: white;position: absolute;}
        .ab1{top: 0; right: 0;}
        .ab2{bottom: 0; left: 0;}
        .ab3{bottom: 0; right: 0;}
        .ab4{top: 200px; left: 200px;}

        #relative{
            width: 300px;
            height: 300px;
            background-color: brown;
        }

        #wrap{
            width: 500px;
            height: 500px;
            border: 3px solid red;
            position: relative;
        }
    </style>
</head>
<body>
    <h2>절대 위치 지정방식</h2>
    <div id="relative"></div>
    <div id="modal"></div>
    <div id="wrap">
        <div class="box ab1">1</div>
        <div class="box ab2">2</div>
        <div class="box ab3">3</div>
        <div class="box ab4">4</div>
    </div>
</body>
</html>

결과)

 

 

 

z-index

  HTML 요소의 위치를 설정하면 위치 방식에 따라 겹쳐서 나타나게 될 수 있는데,

  이때 요소들의 수직 위치를 z-index 속성으로 정합니다.

  겹쳐지는 요소들이 쌓이는 순서를 결정할 때 사용하고 순서는 음수, 양수 모두 사용 가능합니다.

  크기가 클 수록 위에 위치, 작을수록 아래에 위치하게 됩니다.

더보기

z-index 예시)

<html lang="en">
<head>
    <title>z-index</title>
    <style>
        div#wrapper {position: relative;border: 1px solid black;height: 500px;}
        div.box{position: absolute;width: 200px;height: 200px;border: 1px solid red;}
        #b1{left: 50px;top: 50px;background-color: darkorange;z-index: 1;}
		#b2{left: 100px;top: 100px;background-color: deepskyblue;z-index: 2;}
        #b3{background-color: gold;z-index: -1;}
    </style>
</head>
<body>
    <h2>z-index</h2>
    <div id="wrapper">
        <div class="box" id="b1"></div>
        <div class="box" id="b2"></div>
        <div class="box" id="b3"></div>
    </div>
</body>
</html>

결과)

 

 

 

float

  HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어줍니다.
  float를 적용 받은 요소들의 다음 요소들이 끌어올려지며, 방향의 결정이 가능합니다.(left, right)
  float를 적용 받은 요소는 다른 요소보다 위쪽에 위치하고 컨텐츠 크기만큼 영역을 설정합니다

더보기
float 예시) 
<html lang="en">
<head>
    <title>float2</title>
    <style>
        div{padding: 20px;}
        #box1 {background-color: gold;float: right;margin-right: 20px;}

        #box2 {background-color: darkgreen;float: left;margin-right: 100px;}

        #box3 {background-color: blueviolet;float: left;}

        #box4 {background-color: aqua;clear: both;}
    </style>
</head>
<body>
    <h2>float2</h2>
    <div id="box1">박스 1</div>
    <div id="box2">박스 2</div>
    <div id="box3">박스 3</div>
    <div id="box4">박스 4</div>
</body>
</html>

결과)

 

 

clear

  float 속성이 적용된 이후 나타나는 요소들의 동작을 조절합니다.
  float 속성이 적용되면 그 이후에 등장하는 모든 요소들의 위치를 설정하기 어렵기 때문에,
  clear 속성을 사용하여 이후에 등장하는 요소들이 더이상 float 속성이 영향받지 않도록 설정합니다.

더보기

clear 예시)

<html lang="en">
<head>
    <title>clear</title>
    <style>
        body {margin: 20px 30px;max-width: 400px;}
        div{padding: 10px;text-align: justify;font-size: 15px;}
        #c1{width: 35%;background-color: wheat;float: left;margin-bottom: 20px;}
        #c2{width: 50%; background-color: silver;margin-bottom: 20px;float: right;}
        #c3{background-color: aqua;clear: both;}
    </style>
</head>
<body>
    <h2>clear</h2>
    <div id="c1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum, modi! Porro perspiciatis dicta numquam ea nesciunt consequatur commodi consectetur qui cum libero voluptates earum aut rem a, neque dolores officia!</div>
    <div id="c2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus odio perspiciatis fuga at vitae blanditiis nesciunt! Magni cupiditate, in tempore minima, dicta ratione delectus eius laboriosam voluptatum iure suscipit blanditiis?</div>
    <div id="c3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet aliquam dolor, repudiandae nihil voluptatum, aperiam quidem eum odit blanditiis hic enim dolores deserunt qui quo ipsum libero dolorum cum assumenda?</div> 
</body>
</html>

결과)

 

 

다단레이아웃

텍스트 단을 column 속성으로 여러개로 나누어 다단을 생성하여 구성합니다.

 

 

< 다단레이아웃 속성 >

 

  column-count : 나누어진 단의 개수를 설정
  column-rule : 단과 단 사이의 구분선
  column-gap : 단과 단 사이의 여백을 설정
  column-span : 단과 안의 포함된 요소를 다단편집에서 해제

더보기

다단레이아웃 예시)

<html lang="en">
<head>
    <title>다단 레이아웃</title>
    <style>
        .col {text-align: justify; padding: 20px; background-color: antiquewhite;
            column-count: 3;
            column-gap: 30px;
            column-rule: 3px solid red;}
    </style>
</head>
<body>
    <h2>다단 레이아웃</h2>
    <div class="col">
        <h2>다단 레이아웃</h2>
        <P>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, possimus dignissimos! Distinctio, voluptates cumque. Voluptate quaerat beatae, nam officia quisquam quod, facere corrupti earum amet, illo inventore. Dolores, similique expedita!
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis sint aspernatur impedit sit doloremque doloribus assumenda odio veniam facilis optio eaque fuga ex, quo, autem, praesentium labore ad tempore culpa.
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at dignissimos similique voluptatum laborum excepturi nemo sint adipisci nam assumenda recusandae amet, consequatur, eos corrupti dicta nulla nostrum reprehenderit? Numquam?
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit nemo officia distinctio quasi voluptatem tempore atque! Quae voluptates in dolor! Necessitatibus velit consectetur exercitationem natus et soluta iure sit.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error vero minus necessitatibus amet modi, temporibus aut tempora eveniet ut sequi recusandae exercitationem veniam facere eum numquam reprehenderit nobis quod perspiciatis.
        </P>
    </div>
</body>
</html>

결과)

 

수평구성을 쉽게 하기 위한 flex도 이론은 배웠으나 아직 테스트를 하지 않아 9일차에 배울 것 같습니다.

 

728x90
저작자표시 비영리 변경금지

'웹 프론트엔드' 카테고리의 다른 글

1차 팀 프로젝트 구상  (1) 2022.06.15
프론트엔드 홈페이지 만들기 첫 연습  (1) 2022.06.12
Front End. Day07 CSS(4)  (1) 2022.05.02
Front End. Day06 CSS(3)  (1) 2022.04.26
Front End. Day05 CSS(2)  (1) 2022.04.25
'웹 프론트엔드' Related Articles more