본문 바로가기
웹/CSS

CSS 디스플레이, 포지션

by 코낄2 2023. 10. 15.

1. CSS display

( : block, inline, inline-block, none)

- 웹 페이지의 레이아웃을 결정하는 속성입니다.

✔ visibility: hidden;  /  visibility: visible; 
    visibility: visible - hidden은 글씨만 나타났다 없어지고 dispaly: block - none은 글씨가 차지하던 자리까지 함께 나타났다 없어짐.

 

2. CSS position

- position은 요소의 위치를 결정하는 방식을 설정합니다.

1. 정적 위치 지정방식
▶ static Position (기본값)
- HTML 요소의 위치를 결정하는 기본적인 방식
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

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

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

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

5. 절대 위치 지정 방식
▶ absolute Position
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상 요소를 기준으로 위치를 저장할 수 있음

- 조상 요소를 기준으로 위치를 설정하려면 조상 요소는 반드시 정적 위치 지정 방식이 아니어야함

   (조상 요소가 정적위치 지정방식이 아니면 자동으로 기준이 조상 요소로 잡힘)
- 조상 요소를 가지지 않으면 body요소를 기준으로 위치를 설정
- top, left, right, bottom 속성값을 사용할 수 있음

 

3. 페이지 레이아웃

▶ z-index
- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있습니다.

   (기본값인 정적 위치 지정 방식은 이미지가 절대 겹치지 않습니다.)
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용합니다.
- 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래 위치하게 됩니다.

   (숫자의 연속성은 필요X)


▶ float
- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만드는 속성입니다.
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right)

- 주로 블록 레벨 요소의 레이아웃 흐름을 변경하고 블록 레벨 요소를 다른 블록 레벨 요소 주변으로 띄우기 위해 사용됩니다.
- 컨텐츠 크기 만큼만 영역을 설정합니다.
- float를 적용받은 요소는 다른 요소보다 위쪽(배경보다 위)에 위치합니다.

▶ clear

( : left, right, both)
- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절합니다.

- float가 적용된 요소는 주변 내용에 영향을 미치는 특징이 있으며, 부모 요소의 높이를 자동으로 계산하지 않는다는 문제가 있습니다.

- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듭니다.
- clear 속성을 이용하여 float 이후에 등장하는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정합니다.

 

float을 사용하여 레이아웃 만들어보기

HTML <body>

<body>
    <div id="container">
        <header id="header">
            <h1>사이트 제목</h1>
        </header>
        <div id="sidebar1">
            <h2>사이드바1</h2>
                <ul>
                    <li>항목1</li>
                    <li>항목2</li>
                    <li>항목3</li>
                    <li>항목4</li>
                </ul>
        </div>
        <div id="contents">
            <h2>본문</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam maiores rem, ab voluptatem voluptatum officia quae quisquam, nihil, debitis vitae eum repudiandae fuga earum? Quam nemo possimus nostrum esse reiciendis.</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis odit voluptate, quo aspernatur explicabo quas at, sed esse quidem voluptatibus eaque, eum culpa deserunt odio officiis impedit vero deleniti modi.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio nihil fuga iste labore, recusandae laboriosam, at similique maiores iusto dolore, earum rerum assumenda! Quisquam consectetur praesentium sint ullam at minus.</p>
        </div>
        <div id="sidebar2">
            <h2>사이드바2</h2>
                <ul>
                    <li>항목1</li>
                    <li>항목2</li>
                    <li>항목3</li>
                    <li>항목4</li>
                </ul>
        </div>
        <footer id="footer">
            <h2>푸터</h2>
            <p>출처</p>
            <p>관리자 연락처</p>
        </footer>
    </div>
</body>

CSS

#container {
    width: 1000px;
    margin: 0 auto;
}

header {
    padding: 20px;
    border: 1px solid gray;
    background-color: rgb(75, 204, 255);
    margin: 20px auto;
}

h1 {text-align: center;}
#contents h2 {text-align: center;}

#sidebar1 {
    padding: 20px 20px 220px;
    width: 160px;
    background-color: rgb(44, 44, 70);
    border: 1px solid gray;
    float: left;
    margin-bottom: 20px;
    color: aliceblue;
}

#contents {
    padding: 20px;
    width: 500px;
    background-color: rgb(172, 252, 255);
    border: 1px solid gray;
    float: left;
    margin-left: 30px;
    margin-bottom: 20px;
}

#sidebar2 {
    padding: 20px 20px 220px;
    width: 160px;
    background-color: rgb(44, 44, 70);
    border: 1px solid gray;
    float: right;
    margin-bottom: 20px;
    color: aliceblue;
}

#footer {
    border: 1px solid gray;
    padding: 20px;
    background-color: rgb(98, 91, 199);
    clear: both;
}

결과

float을 이용하여 만든 레이아웃

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

CSS 애니메이션/우선순위/변수  (0) 2023.10.16
CSS flex  (0) 2023.10.15
CSS 텍스트/배경  (0) 2023.10.15
CSS(Cascading Style Sheets)  (1) 2023.10.10

관련글

티스토리툴바