코딩응애의 개발블로그

드림코딩&생활코딩(CSS 선택자, display, position) 본문

HTML CSS

드림코딩&생활코딩(CSS 선택자, display, position)

이너멜 2021. 9. 17. 17:37

* 드림코딩님 강의 보고 더 궁금한게 있으면 생활코딩님 강의도 찾아보고 구글 검색해서 찾아보고 했습니다 

전체 선택자 (Universal Selector)

모든 태그들을 선택한다 

<style>
  * {
      color:blue;
   }
</style>
<!-- 모든 태그들에 있는 글자들이 파란색으로 변한다 -->

태그선택자 영어로는 type selector 라고 한다 (처음알았음;)

state 선택자 (의사 클래스 가상 클래스 라고 한다)

<style>
  button:hover {
   color:red;
  }
</style>
.
.
.
<body>
    <button>Button 1</button>
</body>
<!-- Button 1 이라는 글자에 마우스 커서를 올리면 빨간색으로 변한다 hover는 마우스 커서를 
컨텐츠에 올렸을때 작동한다 -->

:hover 부분이 state 선택자 

attribute 선택자

<style>
 a[href] {
   color:pink;
 }
</style>
.
.
.
<body>
    <a href="naver.com">Naver</a>
    <a href="google.com">Google</a>
</body>
<!-- 위에 처럼 태그 선택자에 괄호를 이용해서 href가 있는 a 태그에 글자를 분홍색으로 바꾼다 
근데 여기서 더 자세하게 할려면 a[href="naver.com"] 이런식으로 쓰면 Naver 글자만 분홍색으로 바뀐다 -->

display : inline;

콘텐츠 자체만을 꾸며준다 CSS에서 width나 height 크기를 정해주어도 무시하고 콘텐츠에 크기에 맞춰서 변경이 된다 .

<style>
      span {
        width: 80px;
        height: 80px;
        margin: 40px;
      }
</style>
.
.
.
<body>
	<span>1dfdsfdsfasdfdsafdsaf</span>
    <span>2</span>
    <span>3</span>
</body>

콘텐츠 크기에 맞게 변경되는 모습 

display: inline-block;

inline과 마찬가지로 한줄에 여러개를 넣지만 block 단위로 변환되어서 block 안에 콘텐츠 사이즈에는 상관없이 우리가 지정한 width나 height에 맞춰서 표기가 된다 

<style>
      div, span {
        width: 80px;
        height: 80px;
        margin: 40px;
      }
      div {
        background: red;
        display: inline-block;
      }
      span {
        background: orange;
        display:block;
      }
    </style>
    .
    .
    .
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <span>1</span>
    <span>2</span>
    <span>3</span>

</body>

div는 inline-block으로 span은 block으로 설정해서 한줄에 하나만 들어가 있는 모습 

position - (static,relative)

태그들의 위치를 결정하는 CSS

<style>
  .container {
        background: yellow;
        left: 20px;
        top: 20px;
      }
</style>
.
.
.
<article class="container">
<!-- 이렇게 left top 크기를 지정을 해줘도 아무런 변화가 없다 왜냐하면 position은 기본값으로
static을 가지고 있어서 (static은 element에 position을 지정하지 않았을때 기본적으로 적용되는 값을
의미함) 따라서 크기를 지정한대로 위치를 바꾸고 싶다면 position의 값을 relative로 바꿔 주어야 함
-->
<style>
  .container {
        background: yellow;
        left: 20px;
        top: 20px;
        position:relative;
      }
</style>

relative는 top,right,left,bottom 속성에 따라 위치가 조절이 된다 자기가 원래 있던 위치에서 움직인다 부모 태그에 위치를 기준으로 해서 자신의 위치가 결정된다

왼쪽이 relative 적용하기 전 오른쪽이 적용 후 

position (absolute)

<style>
      div {
        width: 80px;
        height: 80px;
        margin-bottom: 40px;
        background: red;
      }
      .container {
        background: yellow;
        left: 20px;
        top: 20px;
        position:relative;
      }
      .box {
        background: orange;
        left: 20px;
        top: 20px;
        position:absolute;
      }
</style>
.
.
.
<article class="container">
      <div></div>
      <div class="box">BOX</div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

<!-- relative가 static인 기준에서 속성만큼 움직이는 거였다면 absolute는 position:static 속성이
아닌 부모를 기준으로 움직인다 여기서 div 부모는 article 이고 이 부모 속성이 relative라서 
이 부모의 위치를 기준으로 자신의 속성 만큼 움직이는 것이다 만약 부모가 다 static이라면 <body>
를 기준으로 움직인다 -->

 

왼쪽이 relative를 적용시켰을때 원래 위치에서 속성값에 따라 이동한 모습 오른쪽이 absolute 적용시켰을때 container 위치를 기준으로 속성 값의 따라 이동을 한 모습 
간단히 그림으로 해봄

position(fixed)

부모중에 누군가가 position:relative가 있는지 없는지 상관하지 않음 최상위에 있는 태그에 위치를 기준으로 해서 자신의 속성에 따른 위치를 잡는다 (화면에 시작부분을 기준으로) 그리고 심지어 스크롤도 무시한다 

position:fixed로 해주면 됨 

fixed 적용시킨 모습 스크롤을 내려도 그대로 저 위치에 있다 

position(sticky)

top,left 같은 위치값을 반드시 작성해 주어야 sticky 속성을 적용할 수 있다  fixed와 같이 스크롤을 내려도 그 위치에 존재하는데 fixed와 다른점이 있다면

<style>
  .wrap{height:500px; overflow:hidden; overflow-y:scroll;}
  .inner{height:100px; background:skyblue;}
  .inner2{height:100px; background:#0f9d58;}
  .box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;}
</style>
<body>
  <div class="wrap">
    <div class="inner">
      <div class="box"></div>
    </div>
    <div class="inner2"></div>
  </div>
</body>

스크롤의 위치가 .inner 영역을 벗어나고 .inner2 영역으로 넘어가면 .box 영역은 더 이상 스크롤을 따라오지 않는다

즉 sticky 속성은 sticky 선언한 영역의 부모 요소 안에서만 고정 되어 스크롤에 따라 움직인다 (부모요소를 기준)

* 참고 https://abcdqbbq.tistory.com/70

저작자표시 비영리 변경금지

'HTML CSS' 카테고리의 다른 글

드림코딩 (웹사이트 따라 만들기, 반응형 헤더편) + 생활코딩  (0) 2021.10.04
드림코딩 & 생활코딩 (CSS Flex box)  (0) 2021.09.22
생활코딩(WEB2-CSS 반응형 디자인 ~ 마무리 )  (0) 2021.09.05
생활코딩(WEB2-CSS CSS 선택자를 스스로 알아내는 방법~그리드)  (0) 2021.08.23
생활코딩(WEB2-CSS CSS 등장 이전의 상황~CSS 속성을 스스로 알아내는 방법)  (0) 2021.08.21
'HTML CSS' Related Articles more
Comments