CSS 기초 03(속성정리02

Notice

Recent Posts

Link

« 2024/06 »
일	월	화	수	목	금	토
						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

Tags more

Archives

관리 메뉴

공부기록용

CSS 기초 03(속성정리02_position관련) 본문

📚강의록📚/유노코딩)CSS

CSS 기초 03(속성정리02_position관련)

과부하가즈아 2023. 4. 14. 15:43

🔴position

🔻static: position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용되며 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.

🔻relative(부모요소): 요소를 원래 위치에서 벗어나게 배치할 수 있다.

🔻absolute(자식요소): position속성이static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준이 된다.

🔻fixed

🔻sticky

position

position은 문서 상에 요소를 배치하는 방법을 정의한다. position이 요소의 배치 방법을 결정하면, top/bottom/right/left를 필요에 따라 사용하므로써 최종 위치를 결정하는 방식이다. (~부터 얼만큼)

※오프셋(보충)이란, 위치를 얼마간 이동시키는 것을 의미

static

기본값, 요소를 일반적인 문서의 흐름에 따라 배치함(없음과 무방)

요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시된다.

relative(부모요소에)

요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하며 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.

position: relative;
top: 100px; left: 100;

요소를 일반적인 문서의 흐름에 따라 배치하지만(다른 태그에는 영향을 끼치지 않음), 상하좌우 위치 값에 따라 오프셋을 적용한다. (즉, 일반적인 문서의 흐름에 따라 위치해야 하는 위치에서 상하좌우 지정한 위치 값에 따라 오프셋이 적용한다는 의미)

---> '원래의 위치보다 위에서부터 100xp, 왼쪽에서부터 100px 떨어진 위치에 지정'

▶내용실습◀

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>
   div{
    width: 100px; height: 100px;
    background-color: red;
   } 
  </style>
</head>
<body>
 <div></div>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>
   div{
    width: 100px; height: 100px;
    background-color: red;

    position: relative;
    top: 100px; left:100px;          --->position속성 지정
   } 
  </style>
</head>
<body>
 <div></div>
</html>

absolute(자식요소에)

position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.

position: absolute;
top: 100px; left: 100;

요소를 일반적인 문서의 흐름에서 제거하고, 상위 요소 중 가장 가까운 position지정 요소에 대해 상대적으로 오프셋을 적용한다.

position지정 요소란, position 속성에 속성값이 정의되어 있는 요소

즉, relative처럼 일반적으로 지정된 위치가 기준이 아닌 상위 요소 중 가장 가까운 position지정 요소가 기준이 된다는 의미

▶내용실습◀

상위 요소 중 가장 가까운 position지정 요소에 대해 상대적으로 오프셋을 적용 (상위 요소 중 position속성이 지정된 요소가 없다면, 브라우저 화면을 기준으로 위치하게 됨)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>
   div{
    width: 200px; height: 200px;
    background-color: yellow;
    border: 1px solid black;

    position: relative;        ---> 2. abs의 상위인 2번째 div position에서
   } 

   .abs{
    width: 100px; height: 100px;
    background-color: red;
    position: absolute;                
    top: 100px;                ---> 3. abs의 상위인 2번째 div position의 위에서 100px 떨어진 곳에 위치를 지정하겠다
   }

  </style>
</head>
<body>

 <div></div>                   ---> (1번째 div)

 <div>                         ---> (2번째 div)
    <div class="abs"></div>    ---> 1. abs의 상위인 2번째 div
 </div>

</html>

요소를 일반적인 문서의 흐름

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>
   div{
    width: 200px; height: 200px;
    background-color: yellow;
    border: 1px solid black;

    position: relative;
   } 

   .abs{
    width: 100px; height: 100px;
    background-color: red;
   
   }

  </style>
</head>
<body>

 <div></div>                          ---> (1번째 div)

 <div>
    <div class="abs"></div>           ---> (2번째 div)
    <p>absolute없는 본 흐름의 위치라면</p>
 </div>

</html>

(absolute 없이)문서의 흐름대로 2번째 div 다음으로 p태그의 내용이 오는 것이 확인

요소를 일반적인 문서의 흐름에서 제거

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>
   div{
    width: 200px; height: 200px;
    background-color: yellow;
    border: 1px solid black;

    position: relative;
   } 

   .abs{
    width: 100px; height: 100px;
    background-color: red;

    position: absolute;            ---> absolute 설정
    top: 100px;   
   }

  </style>
</head>
<body>
 <div></div>

 <div>
    <div class="abs"></div>
    <p>absolute있으니까 본 흐름을 깨고 위로 올라감</p>
 </div>

</html>

(absolute 지정) 본 흐름에서 absolute 지정된 2번째 div가 제외된채 p태그가 본 흐름(원래 흐름 : 2번째 div->p태그) 위로 올라간것으로 확인 abs는 absolute 지정때문에 흐름에서 제외된 상태이기때문에 p태그와 겹쳐질수도 있다.

📌absolute, fixed, sticky

position의 해당 속성 값들을 사용하게 되면 사용된 요소가 inline요소이든 block요소이든 inline-block요소로 변하는 특징이 있다.
<div>
  <span></span>
</div>
span {
  background-color: black;

  width: 20px;
  height: 20px;
}
span은 inline요소로 크기 값을 가질 수 없어서 다음과 같이 css를 설정한다면 아무것도 나타나지 않게 된다. 이를 해결하기 위해서 크기 값을 가질 수 있는 block요소나 inline-block로 속성을 바꿔줘야 한다.

display속성 사용하기
span {
  background-color: black;

  display: inline-block;
  width: 20px;
  height: 20px;
}
span {
  background-color: black;

  display: block;
  width: 20px;
  height: 20px;
}
position을 사용하기
span {
  background-color: black;

  position: absolute; 
  width: 20px;
  height: 20px;
}
span {
  background-color: black;

  position: fixed;
  width: 20px;
  height: 20px;
}
span {
  background-color: black;

  position: sticky;
  width: 20px;
  height: 20px;
}

fixed

posotion: fixed;
top: 50px; left:50px;

요소를 일반적인 문서의 흐름에서 제거하고, 지정된 위치에 고정시킨다.

---> 위에서부터 50px, 왼쪽에서부터 50px 떨어진 자리에서 움직이지 않음

▶내용실습◀

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>

   .pos{
    width: 200px; height: 200px;
    background: tomato;

    position: fixed;
    top: 50px; left: 50px;
   }

  </style>
</head>
<body>

  <div>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
  </div>

  <div class="pos"></div>

  <div>
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
  </div>
</body>
</html>

sticky

position: sticky;
bottom: 0px;

요소를 일반적인 문서의 흐름에 따라 배치하고, 스크롤되는 가장 가까운 상위 요소에 대해 오프셋을 적용한다.

---> 스크롤 이동으로 요소가 움직여도 sticky요소는 고정된 상태를 유지함

▶내용실습◀

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML 문서</title>
  <style>

   .pos{
    width: 200px; height: 200px;
    background: tomato;

    position: sticky;                     ---> 1번째 div의 요소가 많아서 스크롤 될것이고, 이 뒤에 붙은채로의 위치는 고정되는것을 의미함
    top: 0px;
/*이 class=pos의 상위요소는 1번째 div이고, 요소가 많아 스크롤 되는데 이 스크롤 되는 1번째 div를 기준으로 top: 0px;의 지정값을 가지고 이 위치에서 움직이지 않음*/ 
   }

  </style>
</head>
<body>

  <div>                                          ---> 1번째 div
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
    첫번째<br>첫번째<br>첫번째<br>첫번째<br>
  </div>

  <div class="pos"></div>

  <div>                                          ---> 2번째 div
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
    두번째<br />두번째<br />두번째<br />두번째<br />
  </div>
</body>
</html>

출처 : https://www.youtube.com/@uknowcoding

'📚강의록📚 > 유노코딩)CSS' 카테고리의 다른 글

CSS 기초 04(의사클래스, 의사요소) (0)	2023.04.19
CSS 기초 03(속성정리03_Box관련속성) (0)	2023.04.14
CSS 기초 03(속성정리01) (0)	2023.04.14
CSS 기초 02(선택자) (0)	2023.04.14
CSS 기초 01 (0)	2023.04.14

'📚강의록📚/유노코딩)CSS' Related Articles

Comments

공부기록용

CSS 기초 03(속성정리02_position관련) 본문

CSS 기초 03(속성정리02_position관련)

position

static

relative(부모요소에)

absolute(자식요소에)

▶내용실습◀

fixed

▶내용실습◀

sticky

'📚강의록📚 > 유노코딩)CSS' 카테고리의 다른 글

티스토리툴바