Programming/CSS

7. Positioning

코딩하는 포메라니안 2022. 3. 13. 20:39

- element의 위치를 지정

 

 

1. width, height 속성

- block의 너비와 높이 크기를 설정

- block element만 적용됨 (=inline element는 적용X)

 

- default값

  • width = 자신의 상위 block에서 허용하는 내부 width 크기만큼 100% 채움
  • height = 0%, block속의 내용물의 크기

 

 

 

2-1. position 속성

- 위치 옮기기 위한 기준점 잡기

 

속성 값 의미
static default값으로 일반적인 내용물의 흐름, 기준이 없으므로 배치 불가능
relative 일반적인 내용물의 흐름, 자기 자신을 기준으로 배치
absolute 상위 element를 기준으로 절대적인 위치 지정
fixed 사용자가 보는 뷰를 기준으로 배치 (항상 화면상의 지정된 위치에 있음)

 

 

 

2-2. top, left, bottom, right 속성

- element 위치 옮기기

- 속성 값 = 길이 값(px, cm ...) | % | auto

 

 

[예시코드]

<head>
    <style>
        html, body{
            margin: 0;
        }
        .container{
            margin: 5px;
            border: dotted 3px mediumaquamarine;
        }
        .block{ 
            margin: 5px;
            border: solid 1px skyblue;
            width:100px; 
            height:100px
        }
        .relative{
            position: relative;
            top: 20px;
            left: 20px;
        }
        .absolute{
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .footer{
            position: fixed;
            width: 100%;
            height: 70px;
            bottom: 0;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block">first block</div>
        <div class="block relative">second block</div>
        <div class="block">third block</div>
        <div class="block absolute">absolute block</div>
    </div>
    <div class="footer">this is footer</div>
</body>

 

[결과]

 

 

 

3. overflow 속성

- 상위 element보다 속한 내용이 더 클 때, 어떻게 처리할지 설정

 

속성 값 의미
visible 내용 모두 표시
1) box크기가 정해져 있지 않으면, 내용 크기에 따라 box의 가로, 세로 폭이 늘어남
2) box크기가 정해져 있으면, 설정하지 않은 것과 같이 내용이 box 밖으로 나옴
hidden box의 width, heigiht를 지정하면, 지정된 범위를 넘어가는 내용은 보이지 않음
auto 지정된 범위를 넘어가는 내용은 스크롤바를 이용해 나타냄

 

 

[예시코드]

<head>
    <style>
        html, body{
            margin: 0;
            display: flex;
        }
        .block{
            margin: 5px;
            border: solid 1px skyblue;
            width: 200px;
            height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="block">Maybe If I
        Woke up in the morning
        Hearing your voice
        Maybe If I was with you
        어쩌면 우리 어려웠던 날들
        함께 보냈었다면
        혹시 우린 어땠을까</div>
</body>

 

 

[결과]

 

 

 

4-1. float 속성

- 다른 박스 상관 없이 왼쪽, 오른쪽 배치 (글씨는 박스 피해서 흐름)

- 속성 값 = left | right | none

* flex와의 차이 : float와 flex의 결과물은 같지만, flex가 신기술이라 편함

 

 

[예시코드1]

- Box1만 float : left

<head>
    <style>
        html, body{
            margin: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1">Box1</div>
        <div class="box2">Box2</div>
        Maybe If I
        Woke up in the morning
        Hearing your voice
        Maybe If I was with you
        어쩌면 우리 어려웠던 날들
        함께 보냈었다면
        혹시 우린 어땠을까
    </div>
</body>

 

 

[결과1]

- Box1이 앞으로 나오면서 Box2가 뒤에 배치

- 글씨만 박스 다음으로 흐른다.

 

 

[예시코드2]

- Box1, Box2 둘 다 float : left

<head>
    <style>
        html, body{
            margin: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1">Box1</div>
        <div class="box2">Box2</div>
        Maybe If I
        Woke up in the morning
        Hearing your voice
        Maybe If I was with you
        어쩌면 우리 어려웠던 날들
        함께 보냈었다면
        혹시 우린 어땠을까    
    </div> 
</body>

 

[결과2]

 

 

[예시코드3]

- 글씨를 가진 Box의 배치 확인

<head>
    <style>
        html, body{
            margin: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            float: left;
        }
        .box3{
            width: 120px;
            height: 100px;
            background-color: rgb(235, 119, 196);
            color: skyblue;
            margin: 3px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1">Box1</div>
        <div class="box2">Box2</div>
        <div class="box3">Maybe If I Woke up in the morning Hearing your voice</div>   
    </div>
</body>

 

[결과3]

 

 

 

4-2. clear 속성

- float한 element는 문서의 흐름에서 벗어난 상태로, 4-1의 예시1과 3처럼 다른 element를 가리는 현상이 나타난다.

- clear 속성으로 float인 element들의 영향을 받지 않도록 한다.

 

 

[예시코드]

<head>
    <style>
        html, body{
            margin: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(64, 64, 196);
            color: aliceblue;
            margin: 3px;
            clear: left;
        }
    </style>
</head>
<body>
    <div>
        <div class="box1">Box1</div>
        <div class="box2">Box2</div>
    </div>
    
</body>

 

[결과]

 

 

 

5. clip 속성

- 이미지를 일부 가려서 표시할 때 사용

- rect(top, right, bottom, left)

ex) left = 200px이라면, 이미지의 가장 왼쪽 좌표가 0px => 200px로 이 지점 앞으로 잘린다.

ex) right = 200px이라면, 원래 이미지의 가장 왼쪽 좌표가 0px로 거기서 200px인 지점 뒤로 잘린다.

 

 

[예시코드]

<head>
    <style>
        html, body{
            margin: 0;
        }
        img{
            position: absolute;
            clip:rect(auto 400px 200px 100px);
        }
    </style>
</head>
<body>
    <img src="../img/고양.jpg" alt="">
</body>

 

[결과]

 

 

 

6. visibility

- 화면에서 보이게 하거나 숨겨서 안 보이게 하기 위해 사용

- 화면에서 숨기고 자리를 차지하지 않도록 하기 위해 display 속성(display: none)을 사용

 

 

[예시코드]

<head>
    <style>
        .block{
            margin: 5px;
            width: 100px;
            height: 100px;
            border: dotted 2px skyblue;
        }

        .b1{
            display: block; /*없어도 동일*/
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="block b1">Block1</div>
    <div class="block b2">Block2</div>
</body>

 

[결과]

 

 

 

7. z-index

- 여러 element들을 화면에 쌓아 표시하기 위해 사용

- z-index값이 클수록 위에 표시

- 양수, 음수 가능

 

 

[예시코드]

<head>
    <style>
        .block{
            margin: 10px;
            height: 100px;
            position: absolute;
        }
        .b1{
            background-color: skyblue;
            z-index: 2;
        }
        .b2{
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="block b1">Block1</div>
    <div class="block b2">여기는 Block2 입니다!!!!</div>
</body>

 

[결과]

 

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

6. 테이블 & 테두리 속성  (0) 2022.03.12
5. UI(User Inteface) 속성  (0) 2022.03.12
4. Text 속성  (0) 2022.03.12
3. Font 속성  (0) 2022.03.12
2. 선택자  (0) 2022.03.12

'Programming/CSS'의 다른글

  • 현재글7. Positioning

관련글

댓글

티스토리툴바