Notice
Recent Posts
Recent Comments
Link
«   2026/07   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

어리바리 신입 개발자의 얼렁뚱땅 개발 기록 ✨

23.03.10 / CSS배치 position 본문

Front - end/CSS

23.03.10 / CSS배치 position

낫쏘링 2023. 3. 10. 11:57
728x90

[ 7. CSS 배치 : position ]

웹 문서에서 이미지나 글자를 원하는 위치에 넣고 싶을 때 사용한다.

/사용 방법

  • 위치 상 부모 요소로 인식시킬 요소를 정한다. (기준을 잡으면 위치를 설정할 수 있게 된다.) : position: relative; 
  • 기준으로 할 요소를 정한다. position: absolute;
  • 위치 설정 값을 정한다.

/1. 기준

- 요소 자기 자신 기준 : relative 

  • 사용하면 정상적인 배치에 어긋나기 때문에 사용하는 경우가 드물다.

- 위치 상 부모 요소 기준 : absolute 

  • 부모 요소를 기준으로 배치  (부모 요소에 relative 입력해서 위치 상 부모 요소 인식 시키기)
  • 무조건 부모 요소가 아니고 내 위치 상 부모 요소를 기준으로 배치
  • 위치 상 부모 요소를 먼저 인식 시킨다(relative) - absolute로 기준 잡고 방향 설정

 - 뷰 포트(화면 전체) 기준 : fixed

/2. 위치 설정 값

left, right, top, bottom, z-index

/3. 값

left, right, top, bottom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css 배치 position</title>
        <link rel="stylesheet" href="linkToCSS" />
        <style>
          * {      /* 전체에 있는 여백 없애기 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;  /* 가장 외곽 테두리까지 포함해서 */
          }
          
          .container {
            width: 500px;
            height: 500px;
            background-color: #c4cf20;
            /* 1. 위치 상 부모요소로 인식 시킨다. */
            position: relative;
          }

          .container .item {
            border: 20px solid rgb(250, 0, 137);
          }

          .container .item:nth-child(1) {
            width: 150px;
            height: 100px;
          }

          .container .item:nth-child(2) {   /* 기준 요소 */
            width: 250px;
            height: 70px;
            /* 2. 기준을 잡는다. */
            position: absolute;
            /* 3. 기준을 잡으면 위치를 지정할 수 있게 된다. */
            top: 30px;
            left: 200px;

          }

          .container .item:nth-child(3) {
            width: 200px;
            height: 100px;
          }
        </style>
    </head>
    <body>
      <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
      </div>
        
    </body>
</html>
728x90
저작자표시 (새창열림)

'Front - end > CSS' 카테고리의 다른 글

23.03.10 / 색상 표현, 박스 모델, 마진, 배경  (0) 2023.03.10
23.03.09 / 글꼴, 문자  (0) 2023.03.09
23.03.09 / overflow, opacity, display  (0) 2023.03.09
23.03.09 / 적용 우선 순위 & 스타일 상속  (0) 2023.03.09
23.03.09 / 가상 클래스 , 가상 요소, 속성 선택자  (0) 2023.03.09
'Front - end/CSS' Related Articles more