Recording/멋쟁이사자처럼 BE 13기

[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_23일차_"CSS 선택자와 위치 속성"

LEFT 2025. 1. 3. 18:09

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [23]일차

🚀23일차에는 CSS의 선택자를 배웠는데, 개인적으로는 선택자를 배우면서 좀 어려움을 많이 느꼈다.

선택자 옵션 자체가 많은 것 같기도했고, >, ~, nth-child 등 비슷하면서도 구분하기 좀 어려운 선택자도 많다고 느껴졌다.

이전에 공부할때도 가장 중요하다고 느꼈던 position 옵션도 여전히 어려운 점이 많았다.

단순히 그 태그의 속성만 신경쓰는 것이 아닌 부모 태그의 position 옵션도 고려하여 작성해야한다는 것이다.

이러한 점때문에 오늘 회고를 진행하면서 CSS의 선택자와 position 옵션에 좀 더 친숙해져야겠다고 느꼈다.

자바스크립트의 서버

  • 자바스크립트의 lite-server : 웹서버의 역할로 단순히 요청에 응답을 보내주는 역할만 하므로 정적인 서버
  • 자바의 servlet : 요청을 동적으로 받아서 처리하는 하는 웹어플리케이션 프로그래밍 기술이다.
    하지만 servlet은 웹서버가 동작을 못시키기 때문에 이를 도와줄 웹 어플리케이션 "서버"가 있어야한다.
    ➡️ 이를 도와주는 Apache, Apache Tomcat 등이 있다.

자바스크립트 라이브러리 - 제이쿼리 jQuery

  • 자바스크립트에 다양한 플러그인과 확장기능을 제공하여 웹 개발을 더욱 효율적으로 도와줌
  • 자바스크립트의 이벤트기능 구현 시 호환성 문제를 해결하는 라이브러리
  • ❓제이쿼리 사용의 이점 :
    ➡️이벤트 등 웹 페이지의 동작을 조작할때 브라우저의 영향을 받지 않고 원하는 기능 제공
    ➡️브라우저 버전에 따라 작동하지 않는 코드도 제이쿼리로 변경하여 브라우저에 문제없이 사용 가능

  • ❓등장배경 :
    ➡️코드가 브라우저의 영향을 받아 작동하지 못하는 문제를 해결하기 위해 개발됨
    ex. IE(Internet Explorer)가 대표적으로 호환성문제를 많이 일으켰음
    제이쿼리는 "크로스 브라우징" 기능으로 이 문제를 해결

  • ❓크로스 브라우징 : 
    ➡️ 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오게 하는 관련 API를 제공함

  • 제이쿼리는 DOM(Document Object Model) 구조 탐색이 뛰어남
  • ❓DOM (Document Object Model)
    ➡️문서 객체 모델로 트리 자료구조의 형태를 가져 하위로 펼쳐지면서 내려가는 구조
    ➡️서론 → 본론 → 결론 처럼 순서대로 작성된 코드에서 원하는 위치의 값을 가져오기가 편리해짐

  • 단점 : 순수 자바 스크립트를 이용해 구현한 코드보다 속도가 느림
    ➡️해결을 위해서는 동적 이벤트에선 적은 양 코드, class선택자보다는 id선택자 활용

자바의 서버

  • 자바의 정적인 서버 = Apache (아파치 재단의 HTTP서버로, 웹 서버 전용 기능을 제공)
    ❓Apache가 정적인 서버인 이유 : ➡️HTTP 서버이기때문에 상태유지를 해주지 않는다.

  • 자바의 동적인 서버 = Apache Tomcat (아파치 재단의 오픈소스 WAS(Web Application Server)
    ➡️자바 Sevlet과 JSP가 실행할 수 있는 환경을 제공함

  • servlet : 동적 웹 페이지를 만들때 사용되는 자바 기반의 웹 애플리케이션 프로그래밍 기술

❓Apache 와 Tomcat ?

➡️Apache Tomcat은 웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공
즉 Apache는 웹서버의 역할을, Tomcat은 웹 어플리케이션 역할

CSS 선택자

후손 선택자 (X Y)

  • 특정 태그 뒤에 특정 태그를 함께 사용한다 (띄어쓰기로 구분)
  • X태그 안에 있는 모든 Y태그들에 스타일을 적용한다.
<style>
  div p {
    color: red;
  }
</style>

<body>
    <div id="container">
      <p>[1] My paragraph here.</p>
      <p>[2] My paragraph here.</p>
      <ul>
        <p>[3] My paragraph here.</p>
        <li>List Item 1</li>
        <li>List Item 2</li>
      </ul>
    </div>
</body>
  • div p :
    div태그 안에 있는 모든 후손<p>태그들에 스타일을 적용
    ➡️My Paragraph here - [1], [2], [3] 에 모두 빨간 배경이 적용

후손 선택자

자식선택자 (X > Y)

  • 후손선택자와의 차이는 (자손들을 모두 선택할 것이냐 ↔️ 자식만 선택할 것이냐)의 차이
  • X태그 안 바로 밑에 있는 자식태그에만 스타일을 적용한다.
  • 위의 코드에서 추가된 코드로 실습진행
<style>
  div p {
    color: red;
  }

  div > p {
    color: rgb(53, 53, 191);
  }
</style>
  • div > p 스타일을 추가하여 자식선택자 결과를 확인해본다.

  • 바로 밑의 <p>태그만 파란색으로 적용된 것을 알 수 있다.
    ➡️바로 밑 <p>태그의 자식 <p>태그까지는 적용이 되지 않았다.

❓후손 선택자 (X Y)와 자식 선택자 (X > Y)의 차이점

구분 X Y  X > Y
선택 범위 X태그 내부의 모든 Y태그들 X태그의 바로 아래있는 Y태그
제한 범위 제한없이 모든 후손태그들 선택 직계 자식만 선택
CSS 스타일 적용 모든 후손태그들에 스타일 적용 직계 자식만 스타일 적용

인접 형제 선택자 (X + Y)

  • 같은부모태그 X를 가지며 부모태그 X 바로 뒤의 Y태그 위치

일반 형제 선택자 (X ~ Y)

  • 같은부모태그 X를 가지며 부모태그 X 뒤의 Y태그
  •  X + Y와 유사하지만 제약이 덜하다.
    ➡️X + Y선택자는 바로 뒤에 오는 첫번째 요소만을 선택하지만, X ~ Y선택자는 X아래에있는 모든 Y요소를 선택

▶️실습 - X + Y선택자와 X ~ Y선택자

<style>
  h2 + p {
    /*바로 밑에만*/
    background-color: rgb(179, 248, 119);
  }
  h3 ~ i {
    /*밑 모두 포함*/
    background-color: rgb(185, 135, 233);
  }
</style>
<body>	
    <h2>인접 형제 선택자 X + Y</h2>
    <p>샘플데이터입니다.</p>
    <p>샘플데이터입니다.</p>
    <p>샘플데이터입니다.</p>

    <h3>일반 형제 선택자 X ~ Y</h3>
    <i>샘플데이터입니다.</i>
    <br />
    <i>샘플데이터입니다.</i>
    <br />
    <i>샘플데이터입니다.</i>
</body>

X:visited 와 X:link 선택자

  • X:visited
    가상클래스로 활용 ➡️클릭했거나, 방문했던 페이지를 상태변화시킴
  • X:link
    ➡️ 사용자가 해당 링크를 아직 한 번도 클릭하지 않았을 때 사용
  • X:active
    ➡️클릭하고 있는 상태, color를 넣어주면 클릭하고 있을때의 색깔이 바뀔 것
  • X:hover
    ➡️마우스가 올라갈때의 상태, color를 넣어주면 마우스를 올렸을때 색깔이 바뀔 것 (=사용자 동작 가상클래스)

CSS 선택자 - 속성 선택자

 

X[title]

  • title 속성이 있는 앵커 태그만 선택한다.
<a href="#" title="Some title"> Attributes Selector </a> <!--속성선택자-->

<a href="#"> none </a> 

a[title]{
	color: green;
}
  • a태그의 속성 중 title 속성을 가진 "Attributes Selector"를 선택
  • a태그의 none은 title 속성을 가지지 않으므로 선택되지 않는다.
  • ex. p[class] : p태그 중에 class라는 속성을 가진 것을 선택
    ex. li[id] : li태그 중에 id라는 속성을 가진 것을 선택

X[href="속성값"]

  • 속성값과 일치하는 href속성을 선택
<style>
  a[href="http://www.naver.com"]
  {
    color: #ff0000;
  }
</style>
<!-- ----------------- -->
<p>
  <a href="http://www.google.com">Google</a>
</p>
<p>
  <a href="http://www.naver.com">Naver</a>
</p>

  • 구체적인 url인 www.naver.com에 일치하는 href 속성 값만 스타일을 적용
  • style태그에서 정의된 (www.naver.com) 에 해당하는 url은 밑의 Naver이므로 빨간색이 적용

 

X[href*=”naver”]

  • href 속성값 중 naver.com, blog.naver.com, naverplus.com
    ➡️naver가 붙은 href 값을 모두 찾아 스타일을 적용

X[href^=”http”]

  • href 속성값이 http로 시작하는 값을 모두 찾아 스타일을 적용

X[href$=”.com”]

  • href 속성 값이 .com으로 끝나는 값을 모두 찾아 스타일을 적용

X[data-*="속성값"]

  • ex. a[data-filetype=”image”] :
    ➡️a태그의 data-filetype 속성 중에 “image”속성 값을 가지는 태그를 선택해서 스타일을 적용하는 것
<p>
  <a
    href="http://d2o0t5hpnwv4c1.cloudfront.net/817_rubyNewbies1/preivew.png"
    data-filetype="image">PNG Image</a>
</p>
<p>
  <a href="#">adipisicing</a> elit, sed do eiusmod tempor.
</p>
<p>
  <a href="http://net.tutsplus.com">Nettuts+</a>
  <a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg"
     data-filetype="image"> Getting Good with Git</a>
</p>

  • a태그 중에 data-filetype속성의 속성값이 "image"인 태그들, PNG Image와 Getting Good with Git에 스타일 적용

X[속성~="속성값"]

  • 속성이 특정 속성 값을 단어로 포함하는 태그를 선택
  • ex. a[data-info~=”image”] :
<a href="path/to/image.jpg" data-info="external image"> Click Me. </a>
  • ~ 속성 선택자 방식으로 data-info에 image가 포함되므로 이 Click Me를 선택하여 스타일을 적용하게 된다.

X:checked

  • input[type=radio]:checked :
    ➡️이 가상클래스는 라디오버튼, 체크박스 처럼 체크가 되는 사용자 인터페이스 요소를 조작하게된다.

X:before와 X:after

  • 이 가상클래스는 선택된요소 주변에 콘텐츠를 “새롭게 생성”한다.
<style>
  .exciting-text::before {
    content: " 흥미진진! ->";
    color: green;
  }

  .boring-text::after {
    content: " <- 먼지풀풀";
    color: red;
  }
</style>

X:not 

  • ex. div:not(#container) ➡️id가 container인 div만 뺴고 스타일을 적용
  • negation 가상 클래스로, 모든 div중에 특정 id값을 가진 div만 빼고싶을 경우 유용
  • ex. *:not(p)
    ➡️ p태그를 제외한 모든 태그에 적용하는 이와 같은 코드는 지양해야함. 

X::가상요소

  • :: 를 두개 사용한다.
  • p::first-line : p태그의 첫번째 줄 요소에 스타일을 적용한다.
  • p::first-letter : p태그의 첫번째 글자에 스타일을 적용한다.

  • 신문처럼 글의 첫 글자를 스타일로 꾸밀때 자주 사용

X:nth-child(n)

  • ex. li:nth-child(3) :
    ➡️변숫값을 정수로 받고 (0부터 시작하지않으므로) 이 구문은 3번째 항목을 대상으로 한다.
    즉 li태그들 중 3번째 값마다 특정 스타일을 적용
<style>
  div p:nth-child(1) {color: blue;}
  div p:nth-child(2) {color: red;}
  div p:nth-child(3) {color: green;}
  div p:nth-child(4) {color: purple;}
</style>

<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</body>

  • 각 p태그에 id 선택자나 class 선택자로 스타일을 일일이 지정하지 않고
    nth-child를 통해서 순서에 맞게 스타일을 적용이 가능하다.

X:nth-of-type(n)

  • ex. ul:nth-of-type(3) :
    ➡️위의 X:nth-child(n) 선택자처럼 자식으로 선택하지 않고 type으로 선택하는 경우
    ul태그의 3번째 ul태그를 꾸며주게된다.
<body>
   <div id="container">
      <ul>
         <li> List Item <!-- 1번째 -->
	         <ul>
	            <li> Child </li>
	         </ul>
         </li>
         <li> List Item </li> <!-- 2번째 -->
      </ul>
      <ul>
         <li>
            <a href="#"> Anchor Tag </a>
         </li>
      </ul>
      <ul>
         <li> List Items </li> <!-- 3번째 -->
      </ul>
</body>

  • 3번째 <ul>태그의 <li>들만 꾸며진것을 확인할 수 있다.

X:nth-last-of-type(n)

  • ex. span:nth-last-of-type(2) :
    ➡️일관성을 유지할 수 있는 기능으로 span 태그들 중 끝 span태그를 기준으로 끝에서 두번째 요소를 스타일 적용
<div>
  <span>This is a span.</span> <!--1번째 span태그-->
  <span>This is another span.</span> <!--2번째 span태그-->
  <em>This is emphasized.</em>
  <span>Wow, this span gets limed!!!</span> <!--3번째 span태그 (끝에서 2번째 기준이됨)-->
  <del>This is struck through.</del>
  <span>Here is one last span.</span> <!--4번째 span태그-->
</div>

  • 끝에서 두번째인 3번째 span태그가 스타일이 적용되었다.

X:first-child 와 X:last-child

  • X:first-child : 부모 요소의 첫번째 자식만을 대상으로 삼는다.
  • X:last-child : 부모 요소의 마지막 자식만을 대상으로 삼는다.
  • 목록의 맨 처음과 맨 나중 항목의 스타일을 적용시킬때 흔히 사용한다.

  • List Item의 맨 위와 맨 아래에는 빨간줄이 적용되지 않았는데 
    li:first-child { border-top : none; } 로 설정
    li:last-child { border-bottom : none;} 처럼 설정한 결과이다.
  • 이렇게 맨 위와 맨 아래의 스타일을 적용하고자할때 주로 사용한다.

CSS - 크기 단위

  • 픽셀(px) : 고정 크기 (글자의 크기들에 주로 사용)이기때문에 픽셀을 정해놓고 사용하면
    다른 기기의 브라우저에서는 고정크기로 보여 불편할 것이다.

  • em : 배수 단위의 크기를 나타낸다. 상대적인 의미로 배수를 매긴다.
    (ex.부모요소의 폰트크기를 기준으로 내 폰트크기를 상대적인 배수로 지정) (ex. 1.0em, 1.5em, 2.0em…)
  • rem : em단위와 달리 부모요소의 폰트크기를 신경쓰지 않고 작용한다.

  • % : 가변 크기, ex. 200%인 경우 2.0em과 비슷한 결과를 가지기도 한다.
  • 다양한 기기에서 잘 보여지게하기 위해 픽셀보다는 em이나 % 사용을 권장
  •  

❓em과 rem의 비교

➡️이 둘은 기준점을 토대로 배수가 늘어난다.
하지만 em은 상위 부모가 기준점, rem (=root em)의 기준점은 무조건 root태그이다.
즉 rem 단위는 html태그가 기준이 되어 루트 글꼴크기에 비례하여 상대적으로 바뀐다.
(대부분 1rem은 기본 크기 값 16px을 의미)

<style>
  div p:nth-child(1) {
    font-size: 50px;
    color: blue;
  }
  div p:nth-child(2) {
    font-size: 2em;
    color: red;
  }
  div p:nth-child(3) {
    font-size: 200%;
    color: green;
  }
  div p:nth-child(4) {
    font-size: 5em;
    color: purple;
  }
</style>

<body>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</body>

  • 첫 글자는 50px, 두번째는 2배 크기, 세번째 또한 200%이므로 2배크기, 네번째는 5배 크기의 폰트
<style>
    body{ font-size:20px; }
</style>
  • 여기서태그의 부모태그인 body태그에 font-size를 20px로 지정하게되면
  • 이 body의 20px을 기준으로 <div>태그의 em이나 백분율에 따라 폰트 크기가 달라질 것이다.
    (body의 폰트 기본값은 12px)
<style>
	body { font-size: 20px;}	
  	div{font-size :5px; }
</style>
  • 이렇게 <div>태그의 폰트사이즈를 추가하게되면 <p>태그들은 <div>태그의 자식들이기때문에
    body 안의 div태그 안 모든 요소들은 5px을 가지게된다.
  • 별개로 body 안의 다른 태그들은 20px을 가지게된다.
  • 정리하자면 p태그는 우선순위로 바로 위 부모인 <div>태그의 5px이 적용된다.

CSS - 색상 단위

  • #000000 : HEX코드 단위
  • rgb(red, green, blue)
  • rgba(red, green, blue, alpha)
  • hsl(hue(색조), saturation(채도), lightness(밝기))
  • hsla(hue, saturation, lightness, alpha)

CSS - 박스 관련 속성

출처 : www.educba.com

박스 사이징 box-sizing

  • 위 그림을 기준으로
  • box-sizing: content-box
    ➡️글자만 적용하는 박스 (기본값)

  • box-sizing : border-box
    ➡️글자 + padding + border까지를 한 박스로 적용하는 박스
    ➡️ex. border-box 스타일에 width:100px을 적용하게되면
    100px안에 padding + border값도 포함이 되어야하기때문에 content박스는 그만큼 크기가 줄어든다.

테두리 border 옵션

  • 테두리 속성을 조절한다.
  • border-width : 테두리의 두께 (thick, medium, thin으로 줄 수도 있다)
  • border-style : 테두리 속성 (border-bottom-style 처럼 특정 위치에만 적용할 수도 있다.)
  • border-radius : 테두리의 곡선을 의미 (커질수록 둥글어지는 모서리)

CSS - 배경 관련 속성

background-image

  • CSS3 이전에는 배경이미지를 1개만 적용할 수 있었지만 CSS3부터 여러 장 적용이 가능
  • 여러 장 적용 시 여러 개의 이미지가 층을 이루어 출력 (=이미지가 겹쳐서 출력됨)
    ex. 이를 활용하여 배경이미지와 배경에 어울리는 이미지가 함께 보여지도록 만들 수도 있다.
<body>
	background-image : url('a.png'), url('b.png');
	background-size: 100%, 200%;
</body>
  • size또한 , (쉼표)를 통해 각 크기를 지정해줄 수도 있다.

background-attachment

  • 이미지 여러 장사용 시 여러 개의 attachment를 지정가능
    ➡️background-attachment : local, scroll;
  • attachment 속성 :
    scroll : 배경 이미지와 콘텐츠를 표현하는 기본 값
    fixed : 배경이미지를 고정하고, 콘텐츠만 움직임
    local: 배경이미지와 콘텐츠가 함께 움직임

background-position

  • background-position: 0px 50%;
    ➡️배경 이미지를 어디에 둘 것인지 설정가능

CSS - 폰트 font 속성

  • font-size : 글자의 크기를 지정 (h1태그의 기본크기 32px, p태그의 기본크기 16px)
  • font-family : 폰트를 지정하는 속성
    ➡️font-family : ‘Times New Roman’; - 폰트에 공백있는 것은 따옴표 안에 묶어줌
    ➡️font-family : Aria; - 공백이 없으면 그냥 써준다.

  • font-style: 글꼴 스타일을 지정 ➡️normal, italic, oblique, inherit
  • font-weight : 폰트의 기울기나 두께를 조정하는 속성
    ➡️일반 폰트는 두께가 400, 두꺼운 폰트는 700 normal, bold, 100~900, inherit

  • text-align : 텍스트 정렬
  • line-height : 글자의 높이
  • text-decoration : 밑줄 속성

CSS - 위치 position 속성

  • 절대 위치 좌표 (x, y좌표 설정)
  • 상대 위치 좌표 (요소를 입력한 순서로 상대적 위치 지정)
    position 속성에 static, relative키워드 등 사용 (기본 값은 static)

  • static : 태그가 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 맞게 배치
  • relative : static키워드로 초기 위치가 지정된 상태에서 “상하좌우”이동 가능
  • absolute : 절대 위치 좌표를 설정
  • fixed : 화면을 기준으로 절대 위치 좌표를 설정

▶️실습 - position:static과 position:relative 비교

<style>
  section div {
    width: 300px;
    height: 100px;
    border: 3px solid black;
    margin: 10px;
    display: inline-block;
  }

  .box1 {
    background-color: rgb(91, 226, 172);
  }

  .box2 {
    background-color: rgb(215, 118, 228);
    top: 150px; /*위에서부터 150px*/
    right: 200px; /*오른쪽에서부터 200px*/
    /*하지만 position : static이 기본값으로 설정되어서 적용이 되지 않음*/
    position: relative; /*relative로 바꿔주어야 본인 위치를 기준으로 이동시킴*/
  }
</style>

<body>
    <section>
      <div class="box1"></div>
      <div class="box2"></div>
    </section>
  </body>

  • position : relative 설정으로 본인이 원하는 위치로 이동시킬 수 있다.

🚀실습 - 박스 추가 후 투명도로 위치 비교

.box3 {
  background-color: rgb(56, 117, 170);
  width: 100px;
  height: 300px;
  top: 250px;
  right: 400px;
  opacity: 0.5;
  position: relative;
}

▶️실습 - 부모태그 position:relative + 자식태그 position:absolute

  • 절대적인 위치에 둘 수 있다.
  • 부모를 기준으로 이동한다.
    그 부모를 기준으로 절대적으로 움직이므로, 일반적으로 자식 태그 (position:absolute)를 사용할 경우
    기준이 될 부모 태그는 (position:relative)를 사용하여 원하는 위치를 지정한다.
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #0094ff;
}

  • 부모 wrap이 relative를 가지고, 자식 box가 absolute를 가지는 경우 기준점이 상위부모 - div(wrap) 안에 여러개의 div(box1~5)가 absolute를 가지면서 box들은 wrap을 기준으로 위치하게 된다.

▶️실습 - 부모태그의 위치속성없이 자식태그만 position:absolute

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #0094ff;
}

  • absolute를 설정하게되면 wrap의 relative를 없앴을 경우 루트 태그인 html을 기준으로 위치하므로
    ➡️ wrap을 벗어나 브라우저를 기준으로 위치하게 된다.

🚀정리하자면

➡️부모 태그안에서의 상대적 위치를 지정하고 싶을때는 relative
➡️부모 태그와 상관없이 절대적인 위치 (브라우저 기준)를 지정하고 싶을때는 absolute

position : sticky

  • 스크롤 영역을 기준으로 위치하게되므로 fixed와는 다른 결과를 가진다.
  • 만약 div안에 sticky박스가 위치하게되면 이 sticky박스는 브라우저에서 스크롤을 내릴때 이동되어오다가
    div박스의 끝지점에 도달하면 스크롤을 내려도 더 이상 이동되지 않고 div안에 귀속이 되는 것을 볼 수 있다.

position : fixed

  • 브라우저의 스크롤에 상관없이 항상 같은 자리에 위치한다.
  • 위의 sticky와 달리 스크롤을 많이 내려서 div박스를 벗어나도
    스크롤을 내리는 화면과 함께 계속 따라오며 위치가 이동된다.

z-index 속성

🚀실습 : 클래스 여러 개 적용

<style>
  .box {
    width: 100px;
    height: 100px;
  }
  .red {
    background-color: red;
  }

  .green {
    background-color: blue;
  }
</style>

<div class="box red"></div>
<div class="box green"></div>
  • 이처럼 class안에 box red 처럼 띄어쓰기를 통해 클래스를 여러개 적용할 수 있다.

▶️실습 : z-index 사용으로 우선순위 부여

  • 겹쳐진 세 개의 사각형이 있다고 가정했을때

기존 출력

<style>
  .box {
    width: 100px;
    height: 100px;
    position: absolute;
  }
  .red {
    background-color: rgb(138, 2, 2);
    z-index: 300;
  }

  .green {
    background-color: rgb(62, 198, 164);
    top: 30px;
    left: 30px;
    z-index: 200;
  }

  .blue {
    background-color: rgb(82, 82, 195);
    top: 60px;
    left: 60px;
    z-index: 100;
  }
</style>
  • z-index 값을 각각 부여하여 가장 큰 값이 맨 위에 오도록 우선순위를 부여할 수 있다.

z-index 적용 출력

▶️실습 - 스크롤 박스 안에 객체 넣기

  • <div>태그의 밖으로 넘치는 세 개의 사각형이 있다고 가정했을때

 

  • overflow:hidden :
    overflow는 넘치는 부분을 어떻게 할 것인지를 판단하는 속성이다.
    ➡️hidden 속성값을 통해 넘치는 부분 감춘다.
    ➡️추가로 position:relative 을 적용하여 부모 객체인 div박스(검은 테두리) 안에 세 개의 사각형이 위치하도록 적용

 

  • overflow:scroll ➡️overflow에서 넘치는 부분을 scroll 박스로 처리해 줄 수 있다. 하지만 x축으로는 공간이 충분하기때문에 overflow-y를 사용한다.

  • overflow-y:scroll
    ➡️y축 공간으로만 스크롤을 적용하도록 설정

선택자 부분에서 이해하는 데에 조금 주춤했지만 회고를 통해 다시 정리하고 검색해서 추가 공부를 해보니

이해하는 것에 큰 도움이 되었다.

회고를 진행하면서 position 속성 또한 부모요소의 position을 고려해야하는 부분을 좀 더 이해할 필요성을 느꼈다.

기본적인 화면만 브라우저에 출력했던 HTML+CSS 였는데 스크롤, fixed속성, sticky 속성 등을 통해서

화면이 동적으로 움직이는 것을 간접체험해볼 수 있었다.

CSS 관련 실습을 좀 더 진행해보고 직접 만들어보며 익숙해져야겠다고 느꼈다.🚀

저작자표시 (새창열림)