[ex25~28] CSS(position, align)

대장쿵야 2023. 4. 17. 11:53

ex25

요소의 위치, position
1. padding > 부모가 자식의 위치 지정
2. margin > 스스로 위치 지정
3. position > 정석(CSS1~CSS3)
4. transform > 정석(CSS3)

position
- 좌표값 사용 > 위치 지정
- x(left), y(top)
- 좌표를 지정하는 방식 여러개 제공

1. position: static;
    - 기본값
    - 정적 좌표
    - 워드 프로세스 방식 > FlowLayout 방식
        - 코딩 순서대로 출력되는 방식
            - 먼저 코딩 > 위에 배치, 왼쪽에 배치
            - 나중에 코딩 > 아래에 배치, 오른쪽에 배치

2. position: absoulte;
- 절대 좌표
- left, top
- 문서의 좌측 상단을 기준으로 한다. (X)

> 자신의 직계 조상 중 가장 처음으로 만나는 태그 중 position이 static이 아닌 태그를 기준으로 한다.
    - 원래 있던 공간이 사라진다.

3. position: relative;
    - 상대 좌표
    - left, top
    - 자신의 위치를 기준으로 한다.
    - 원래 있는 공간이 그대로 유지된다.

4. position: fixed;

- 고정 좌표

- left, top

- 브라우저 창(화면)의 좌측 상단을 기준으로 한다.
- 스크롤에 반응하지 않고 그대로 유지된다.

- 원래 있는 공간이 사라진다.

5. position: sticky;

    - 고정 좌표
  - left, top
    - 자신의 위치를 기준으로 한다.
    - 화면에 보일때는 static처럼 동작, 사라질때 fixed처럼 동작
    - 스크롤에 반응하지 않고 그대로 유지된다.
    - 원래 있는 공간이 그대로 유지된다.

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
        .box {
            border: 5px solid black;
            width: 200px;
            height: 200px;
        }

        #box1 { background-color: tomato; }
        #box2 { background-color: gold; }
        #box3 { background-color: cornflowerblue; }

        #box2 {
            
            /* position: absolute;
            left: 0px;
            top: 0px; */

            /* position: relative;
            left: 300px;
            top: 100px; */
            
            /* position: fixed;
            left: 0px;
            top: 0px; */

            /* position: sticky;
            left: 0px;
            top: 0px; */

        }

        #b1, #b2, #b3 {
            border: 5px solid black;
        }

        #b1 {
            width: 500px;
            height: 400px;
            background-color: tomato;
            position: absolute;
            left: 500px;
            top: 200px;
        }
        
        #b2 {
            width: 400px;
            height: 300px;
            background-color: gold;
            /* position: absolute;
            left: 300px;
            top: 200px; */
        }
        
        #b3 {
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;
            /* 기준점이 b1으로 바뀜 */
            position: absolute;
            left: 0px;
            top: 0px;
        }



    </style>
</head>
<body>
    <!-- ex25_position.html -->


    <h1>absoulte</h1>

    <div id="b1">
        상자1
        <div id="b2">
            상자2
            <div id="b3">
                상자3
            </div>
        </div>
    </div>

    <h1>position</h1>

    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>

    <!-- (p>lorem)*10 -->
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut eum esse at veniam facere, deserunt iste ipsam minima magnam molestias vero ea corrupti eligendi soluta nostrum, consequuntur consectetur iure ab!</p>
    <p>Repudiandae nihil aut dicta sapiente, et cumque, aliquam atque eos sunt vero dolorem modi iste animi aliquid. Voluptatum hic quas, necessitatibus deserunt ipsa ex harum similique dicta sit mollitia beatae.</p>
    <p>Perferendis laudantium nihil quam temporibus tempore aspernatur. Odit ipsum neque corrupti illo, quia officiis, nulla aut minus, ipsam quod necessitatibus atque dolor hic. Eos voluptatibus aliquid placeat, et deserunt reprehenderit.</p>
    <p>Voluptatem nobis aliquam animi qui inventore illum, quo soluta ex provident minima nihil fugit, explicabo id accusantium, quod atque maxime aliquid commodi perferendis saepe deserunt quibusdam velit. Omnis, optio odio?</p>
    <p>Quas quia voluptatibus placeat, suscipit est adipisci magnam perspiciatis esse sed fugit nobis ipsum natus. Reprehenderit deserunt ut autem dolorem maxime commodi enim facilis suscipit impedit, recusandae error fugit libero.</p>
    <p>Voluptate voluptatibus ab dicta, unde maiores at quidem reiciendis repellendus. Esse ullam temporibus exercitationem ex autem? Rem maxime eius nobis fuga? Veritatis, modi? Voluptates maiores, tempore quia repellendus cumque nulla.</p>
    <p>Quae, suscipit? Consectetur dicta tenetur rem temporibus deserunt quod saepe quae commodi quaerat iste asperiores tempore neque ipsa numquam aliquam vero corporis, obcaecati repellendus? Quaerat recusandae voluptatibus modi odio earum!</p>
    <p>A aspernatur earum culpa odio distinctio! Saepe vero accusantium alias maiores eligendi veniam eveniet consectetur repellat enim, omnis ut sequi voluptas dolores nemo earum fuga aliquid harum illo! Consequuntur, excepturi.</p>
    <p>Ducimus omnis velit officiis voluptas quidem eum, rem nobis dolores sint inventore molestiae dolor perferendis itaque in commodi eaque id consequuntur rerum. Hic illum ex dignissimos ipsum, nam commodi mollitia.</p>
    <p>Minus consequuntur mollitia atque blanditiis hic officia ad quasi delectus molestiae corporis nulla a dolorum molestias cupiditate, porro quaerat, placeat doloremque nihil rerum. Accusantium dolorum repudiandae fuga ad! Ea, quia.</p>

</body>
</html>

ex26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #box1 {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;

            /* 
                x, y??
                left, top??

                - left / right > x
                - top / bottom > y

            */

            /* left: 0px;
            right: 0px; */

            /* top: 0px; */
            /* bottom: 0px; */

            left: 600px;
            top: 500px;

        }

    </style>
</head>
<body>
    <!-- ex26_position.html -->
    <div id="box1" class="box">상자1</div>
</body>
</html>

ex27

시맨틱 태그(HTML5)
<main>: 메인 컨테이너(<div id="main"></div>)
<header>: 머릿말 컨테이너
<section>: 본문 컨테이너

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        main > header > ul {
            padding: 0;
            margin: 0;
        }
        
        main > header > ul > li {
            float: left;
            width: 20%;
            list-style-type: none;
            /* border-bottom: 1px solid black; */
            border-top: 1px solid black;
            /* outline: 1px solid blue; */
            text-align: center;
            padding: 15px 0px;
            background-color: rgba(240, 240, 240);
            cursor: pointer;
        }

        main > header > ul > li:hover {
            background-color: rgb(220, 220, 220);
        }

        main > section {
            padding: 30px;
            color: #555;
            /* padding-top: 60px; */
            padding-bottom: 60px;
        }

        main > section > h1 {
            border-bottom: 1px dashed gray;
        }

        main > header {
            position: fixed;
            width: 100%;
            bottom: 0px;

            /* position: sticky;
            left: 0px;
            top: 0px; */
        }

    </style>
</head>
<body>
    <!-- ex27.html -->
     <div></div>
     <main>
        <header>
            <ul>
                <li>Java</li>
                <li>Oracle</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
            <div style="clear:left;"></div>
        </header>
        <section>
            <h1>Java</h1>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis soluta sapiente odit! Odit soluta, consequatur suscipit eius iure nesciunt laborum illo nostrum animi quibusdam doloremque non velit ea maiores expedita?</p>
            <p>Consectetur sit architecto facilis, et aperiam accusantium. Quis vitae temporibus sit repudiandae ratione explicabo sint vel corrupti in dignissimos. Labore obcaecati sapiente sint minima aliquid officia! Dolorem, minus. Autem, facilis.</p>
            <p>Velit itaque odio eligendi enim nisi minima nam natus ab eaque quidem, assumenda tempora sapiente quibusdam id nesciunt, distinctio quasi pariatur quaerat porro! Id non aliquam doloribus enim accusamus ad!</p>
            <p>Quae repellendus similique explicabo quisquam voluptatem. Ullam odio ut hic nisi temporibus? Non molestias repudiandae voluptate minus? Eligendi aperiam minima corporis delectus neque porro nemo, rem id expedita amet quas!</p>
            <p>Asperiores, reprehenderit est eligendi quam tenetur voluptates voluptatibus expedita doloribus dolorem officiis consequatur totam quidem, possimus laboriosam! Est exercitationem perspiciatis voluptatum autem veniam, consequatur minima. Nam recusandae provident earum cupiditate.</p>
            <p>Doloribus hic error iure reprehenderit dolorum atque quos non ea. Placeat quis quibusdam, rem sint fugiat voluptatem aliquam, sed assumenda eaque alias enim officiis soluta, voluptates eos voluptatibus inventore a.</p>
            <p>Facilis enim earum, expedita, fuga tempora modi maxime libero a accusantium corrupti quia necessitatibus molestias sint odit, placeat sapiente dignissimos repellat consequatur consequuntur officiis maiores molestiae repudiandae nihil? Praesentium, rerum?</p>
            <p>Eos facere distinctio odio, officiis, eligendi voluptate adipisci explicabo nihil recusandae natus qui repudiandae temporibus perspiciatis fugit similique exercitationem sed sunt. Libero sapiente dolore provident necessitatibus aspernatur illum maxime cum!</p>
            <p>Eligendi recusandae facilis suscipit quae ut accusamus. Repellat, eos, ullam harum quos quidem qui ea eius saepe incidunt, voluptas assumenda perspiciatis. Iusto consequatur dolore blanditiis magnam eum explicabo numquam iste!</p>
            <p>Sint sapiente quibusdam eum aliquid placeat dolores corporis, commodi consequatur deleniti doloribus, voluptatem rerum ipsum nulla laudantium provident in. Adipisci error quibusdam et praesentium minima asperiores facilis fugiat, reprehenderit repudiandae?</p>

            <h1>Oracle</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi id fugit enim quam assumenda commodi ratione adipisci atque tempore nihil asperiores maxime, autem, laborum corrupti accusantium consequuntur numquam libero fuga?</p>
            <p>Aut voluptatum nihil maxime magnam temporibus totam recusandae aliquid est rem asperiores at eius quisquam, eos, eaque id tenetur adipisci, quas inventore? Hic voluptas iste nihil enim! Fuga, omnis modi!</p>
            <p>Totam iure nulla architecto inventore nobis voluptatibus maxime ad similique quibusdam, qui aspernatur velit quod vel unde perferendis placeat voluptates cupiditate. In exercitationem laudantium facere officiis provident ducimus perferendis dolorem.</p>
            <p>Similique, rerum. Dicta est velit nesciunt facere iusto adipisci quo exercitationem reprehenderit soluta quam nemo autem voluptatum ullam dolorem sint ex asperiores rerum quisquam labore, nihil excepturi nisi veritatis ab?</p>
            <p>Itaque tenetur ab, temporibus laborum minus exercitationem, illum sequi voluptate nemo placeat excepturi nesciunt odit, obcaecati dolorum magni eveniet earum non! Provident mollitia voluptate minima facilis repellendus officiis dolorum delectus.</p>
            <p>Accusamus ipsum architecto reiciendis voluptates repellat, odio dolorem quod, maiores rerum eaque earum numquam voluptatem error quam aspernatur magni quaerat! Aperiam enim alias quibusdam dolorem cupiditate quo ipsa eaque vitae?</p>
            <p>Corporis reiciendis provident, assumenda porro error voluptatum ea at natus iure iusto autem maxime non hic itaque. Laboriosam placeat a repudiandae facilis explicabo. Rerum expedita maxime doloribus vitae dolor iure.</p>
            <p>Tenetur odio cumque dicta maxime temporibus, officia est quasi perspiciatis aliquam. Blanditiis nulla velit molestias harum excepturi cumque, odio deleniti, alias, asperiores et perferendis expedita unde dicta pariatur voluptas voluptatum?</p>
            <p>Amet facilis dolores similique in illum cumque eaque deleniti, ex, aperiam necessitatibus consectetur commodi! Ipsam, temporibus repellat facilis soluta optio totam veniam sit. Sequi amet placeat obcaecati tenetur laborum rem!</p>
            <p>Quidem inventore sunt excepturi, magnam tempora ducimus voluptatem. Esse non mollitia, sint sed reprehenderit autem itaque quae, fugit, expedita rem dolor iure corrupti. Modi, iusto placeat. Cumque esse sapiente eum!</p>

            <h1>HTML</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus modi delectus vitae tenetur similique, facere velit ducimus repudiandae voluptate nobis est atque odio, quasi, a earum asperiores neque doloremque facilis.</p>
            <p>Reprehenderit atque odio esse, exercitationem commodi doloribus sunt unde eum inventore nobis nulla dolore accusantium velit. A delectus debitis, molestias necessitatibus fugit tempora? Impedit repellendus doloremque ex, soluta consequuntur ab.</p>
            <p>Corrupti animi id adipisci tenetur? Accusamus reprehenderit laborum sapiente, ducimus quas, explicabo incidunt dolore dicta perspiciatis doloribus placeat doloremque eum assumenda ex culpa possimus nihil, impedit veritatis quos quia quasi?</p>
            <p>Magni quas, eos illum laudantium, fugit illo dicta autem error quidem sed sit culpa ab voluptatum atque? Quibusdam nam dicta ullam saepe, hic aspernatur autem voluptates doloremque consequatur velit in!</p>
            <p>Laudantium necessitatibus dolore eum veniam nihil cum maiores asperiores et placeat iure, error tenetur, aspernatur accusantium? Ea non quam, aspernatur, ut repellendus accusamus saepe incidunt impedit delectus, aliquid natus nam!</p>
            <p>Nihil sint doloremque similique maxime doloribus voluptatibus, tenetur iure repellat expedita animi maiores quae soluta quam quidem eos eligendi. Doloremque consectetur nulla praesentium fugiat dolores! Quam corrupti accusantium dicta. Animi?</p>
            <p>Nulla voluptas nam nobis? Inventore provident excepturi non voluptatum id nesciunt nisi voluptatem aperiam corrupti, distinctio sunt harum nam beatae. Dolorem ab facilis qui eligendi, excepturi incidunt consequuntur minus debitis.</p>
            <p>Ex adipisci culpa eos quibusdam. Vero accusantium consectetur suscipit laudantium placeat, quidem unde est expedita eius, illum odio provident, tempora nam quis eaque quos aliquid incidunt animi inventore. Ullam, ducimus?</p>
            <p>Reprehenderit maxime molestias accusamus sapiente odio inventore beatae aspernatur expedita magni odit amet repellat dolor autem commodi cupiditate, labore deserunt, in, a atque consequatur libero? Quae rerum nesciunt delectus optio.</p>
            <p>Nulla ipsam rem eveniet voluptates veniam accusamus voluptatibus deserunt non sunt facilis, accusantium odio vero quod eum porro unde tempora? Consectetur eveniet quidem molestias tenetur qui quam laborum repudiandae quo?</p>

            <h1>CSS</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa ipsa sequi inventore est odit consectetur magni provident nostrum! Soluta doloremque voluptates quos sit amet officiis cumque suscipit excepturi distinctio voluptatum?</p>
            <p>Tenetur inventore soluta aperiam quisquam dolore nobis assumenda at maxime iste totam rerum pariatur, nemo labore earum facilis debitis, distinctio iure odio? Facere nihil deserunt perferendis, dicta necessitatibus cum quam!</p>
            <p>Explicabo alias, soluta dicta ad dolores, iusto numquam pariatur aliquam necessitatibus nobis atque quidem quaerat adipisci. Odio, inventore officia. Eum, reiciendis? Suscipit dolores numquam, esse consectetur beatae dolore magni ex!</p>
            <p>Dolorem atque beatae, odit ea eos veniam voluptatibus hic debitis consectetur ab quasi pariatur saepe fugit qui optio fugiat tenetur magnam, aperiam commodi voluptatem sunt animi iste omnis autem. Vitae!</p>
            <p>Dolore magni sapiente repudiandae non expedita aspernatur, recusandae aliquam eos illum repellendus sint veritatis molestias! Consequatur tempore, molestias voluptatibus quas ex modi! Magnam consequatur delectus ab natus, dolores possimus eius?</p>
            <p>Nesciunt voluptate sapiente consequatur id nam architecto qui asperiores perferendis dolore ipsum adipisci alias, nihil assumenda sunt velit, quia deserunt optio perspiciatis quam corrupti est quod vitae? Omnis, porro reiciendis!</p>
            <p>Qui ab et deserunt quia assumenda quam vero asperiores dolor dolorum atque dolore ipsam reiciendis, nesciunt mollitia? Blanditiis maxime provident pariatur itaque adipisci enim magnam est, veniam tempora aspernatur dicta?</p>
            <p>Eius accusamus nihil ratione earum id incidunt odit quia consectetur provident velit? Asperiores officia quibusdam, minima sit laboriosam molestias voluptates sapiente voluptatum a eum laudantium aperiam corrupti eligendi ex dignissimos.</p>
            <p>Accusantium perspiciatis vel quisquam vero laudantium minima nesciunt quia minus enim, mollitia error ipsum quasi impedit officiis architecto necessitatibus pariatur ducimus tenetur rem. Inventore placeat illum, vitae dolor officia dolorum?</p>
            <p>Exercitationem ipsa molestias sapiente fugit enim cum fugiat laboriosam quidem molestiae odit nemo, unde neque saepe atque facere, placeat voluptate architecto quod. Eos veniam repudiandae velit laboriosam provident temporibus a?</p>

            <h1>JavaScript</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, repellendus quibusdam necessitatibus molestiae nisi repellat vero mollitia, nihil numquam quisquam pariatur reprehenderit assumenda facere doloribus quod tempore iure fuga dolore.</p>
            <p>Voluptate voluptatum saepe sunt rem error molestias consectetur sapiente numquam eos illum ipsam possimus, nulla doloremque eaque animi ducimus facilis nisi reprehenderit quod incidunt aliquam? Deleniti eveniet nostrum quas veritatis?</p>
            <p>Deserunt aliquid dignissimos odit adipisci fugiat eligendi illum dolorem nisi incidunt dicta facilis nulla dolore maxime ducimus porro corporis eaque culpa aut quia, vero molestiae quibusdam sapiente assumenda. Quis, quam?</p>
            <p>Dolorem itaque, vitae blanditiis repudiandae alias nostrum ducimus quo sunt eos beatae praesentium dignissimos porro facere fuga adipisci minus sit in delectus incidunt, eligendi ut? Necessitatibus, provident quod? Sequi, velit.</p>
            <p>Eius modi pariatur aliquam magni architecto in ipsa sequi, officia, quasi cumque atque commodi. Non minus aliquid adipisci reiciendis! Ex, veniam enim earum ut eligendi eius inventore porro vitae magni.</p>
            <p>Est sed, ad numquam non in ratione nam eligendi, inventore nulla magnam pariatur atque voluptas aut, at minus accusamus architecto. Necessitatibus, commodi illum voluptates ab repellat dolorem cumque dolore eos!</p>
            <p>Cum, iste provident. Quod ex earum repudiandae soluta numquam error delectus totam tempora sunt modi magnam quia provident voluptatibus accusamus, culpa, eius quisquam, dolores veniam! Dolore odit porro quae aspernatur.</p>
            <p>Unde at provident quod molestiae minus dolore ipsa cupiditate quasi mollitia, cumque similique distinctio voluptas blanditiis commodi sit beatae. Hic quaerat expedita veniam rem corporis, mollitia voluptate saepe odit vitae.</p>
            <p>Iure distinctio, quia ratione dicta laborum ea tempore at error vel expedita earum itaque autem, deserunt, amet blanditiis voluptates. Eaque doloremque consectetur eveniet adipisci excepturi dignissimos! Placeat autem cupiditate aspernatur.</p>
            <p>Maxime accusamus, dicta in unde illum inventore qui repellendus suscipit? Laudantium amet delectus ullam nihil saepe debitis cupiditate consequuntur quo reprehenderit dolorem aliquam, ipsum nesciunt error magnam doloribus itaque. Iusto?</p>
        </section>

     </main>
</body>
</html>

ex28

태그의 수평 정렬
            - 인라인 태그와 블럭 태그의 수평 정렬

            수평 정렬(내용물의 정렬)
            - text-align
            1. 인라인 태그
                - 불가능 > 여백(공백)이 없어서...
            2. 블럭 태그
                - 가능 > 여백(공백)이 있어서... > text-align 속성은 블럭 태그에서만 적용이 가능하다.

            수평 정렬(태그 스스로 정렬) > 불가능(지원하는 속성 없음)
            1. 인라인 태그
                - 가능 > 부모(블럭) 태그의 text-align을 사용해서 정렬

            2. 블럭 태그
                - 불가능 > 부모 영역과 자식 영역이 일치하기 때문에 > 좌우에 공간이 없음
                - 가능 > 좌우 margin을 동일하게 지정(auto)

	<style>
		#span1, #div1 {
            background-color: yellow;
        }

        #span1 {
            text-align: right;
        }

        #div1 {
            /* text-align: right; */
            width: 200px;
            margin-left: auto; /* n/1 > 블럭태그 가운데정렬 */
            margin-right: auto;
        }

    </style>
</head>
<body>
    <!-- ex28_align.html -->
    <h1>인라인 태그</h1>

    <div style="background-color: aquamarine; padding: 10px; text-align: center;">
        <span id="span1">인라인 태그</span>
    </div>

    <h1>블럭 태그</h1>

    <div style="background-color: aquamarine; padding: 10px; text-align: center;">
    <div id="div1">블럭 태그</div>
    </div>

</body>
</html>

화면