티스토리 뷰

HTML+CSS

#Beyond / is,has선택자 / 배경투명도속성 /day14 / 25.04.18

one-dy 2025. 4. 18. 12:38

2주 배웠는데 중급 중반까지 배웠다고 한다...이제 고급을 배운다고 한다...난 아직 왕초보인데........!!!!!!!

가상요소 설명 추가 :-)
가상요소는 해당 태그 안에꺼다.
<h2>title</h2> 
::before일 때 ,
<h2> ::before title </h2>라고 생각하면 된다. 
가상요소들은 전부 다 인라인 속성이라 display: block; 써줘야되고,
content:" " 컨텐트 속성이 반드시 써있어야한다!
아이콘 폰트를 쓸 때 컨텐트 속성에 유니코드를 넣으면 종모양, 로그인 아이콘 등등이 나온다. 
예시 사이트 : fontawesome.com  에서 태그를 갖다 붙인다.
그 이전에 코드들을 내 html에 연결해놔야 쓸 수 있다.
코딩할 때 아이콘은 피그마에서 svg로 다운받아서 쓰는게 안전하다.

 

#코딩숙제 Beyond Space 레이아웃 만들기 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>레이아웃 실습</title>
    <!-- css -->

    <link rel="stylesheet" href="./css/layout.css" />

  </head>
  <body>
    <div class="container">
      <div class="left_text">
        <h4>Overview</h4>
        <h2>Beyond Space</h2>
        <p>
          1985년 창사 이래 쌓아온 탄탄한 기술력과 고객만족을 통한 신뢰는
          인테리어의 미래를<br />
          열어갈 대혜건축의 또 다른 도전이자 가능성입니다. 최적의 설계와
          완벽한시공으로<br />
          실내건축의 미래가치를 실현하기 위해 끊임없이 혁신하는 대혜건축이 될
          것입니다.
        </p>
        <!-- more view버튼 -->
        <div>
          <a href="#">view more</a>
        </div>
      </div>
      <!-- 오른쪽 이미지 -->
      <div class="right_img">
        <div>
          <img src="./img/sec1_img1.jpg" alt="벽" />
        </div>

        <div>
          <img src="./img/sec1_img2.jpg" alt="나무" />
        </div>
      </div>
    </div>
  </body>
</html>

css↓

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #111;
}
ul,
li {
  list-style: none;
}
img {
  border: none;
  display: block;
}
body {
  font-family: 'Noto Sans KR', 'Cormorant Garamond';
  font-size: 17px;
  line-height: 1.7em;
  color: #111;
}
p {
  color: #666;
}
/* 레이아웃 */
.container {
  width: 1600px;
  overflow: hidden;
  margin: 100px auto;
  display: flex;
  justify-content: space-between;
}
.left_text {
  width: 50%;
}
.left_text > h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
}
.left_text > h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 100px;
  /* 상하여백 30, 양옆여백 0, 아래여백만 다시 50px */
  margin: 30px 0 50px;
  line-height: 1.4;
  font-weight: 400;
}
.left_text > p {
  margin-bottom: 50px;
}
.left_text > div {
  /* 넓이 높이는 자식요소에 맞춰 설정 */
  width: fit-content;
  height: fit-content;
}
.left_text a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  gap: 20px;
  align-items: center;
}
.left_text a::after {
  content: "→";
  display: block;
  width: 46px;
  height: 46px;
  background-color: #111;
  color: #fff;
  line-height: 46px;
  text-align: center;
  border-radius: 100%;
  font-weight: 400;
}
/* 오른쪽 이미지 */
.right_img {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

is 선택자

같은 스타일을 여러 태그에 한번에 적용하고 싶을 때 사용한다. 복잡한 선택자를 조금 더 간단하게 바꿔준다.

[기본형] 그냥 바로 :is써준다.

:is(선택자1, 선택자2, 선택자3...){속성 : 값;}

    <title>is선택자</title>
    <style>
      /* is선택자를 안 쓰고 각각 태그마다 hover효과를 줌. */
      h1:hover,
      h2:hover,
      h3:hover {
        color: blue;
      }
 
      /* is선택자를 사용하여 공통스타일 한꺼번에 적용하기. 한꺼번에 hover효과같은 걸 줄 때 굉장히 편리하다. */
      :is(h1, h2, h3) {
        font-size: 24px;
        color: seagreen;
      }
     
    ***제목1,2,3한테 동일한 hover 스타일을 적용하고 싶을 때
       :is(h1, h2, h3):hover {
        color: palevioletred;
      }
    </style>
  </head>
  <body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>

has 선택자

부모태그가 특정 자식태그를 가지고 있는지 체크하는 선택자

[기본형]

선택자:has(B)

B라는 자식태그를 가지고 있는지 판단할 때 사용하는 선택자이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>has선택자</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      :is(ul, li) {
        list-style: none;
      }

      ul {
        width: 500px;
        height: 50px;
        background-color: rgb(40, 87, 65);
        margin: 50px auto;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }

      li {
        color: white;
        text-transform: uppercase;
      }
      /* li에 마우스를 올리면 해당 태그에 글자색을 바꾼다. */
      li:hover {
        color: pink;
      }
      /* ul에 li:hover선택자가 있다면 :hover선택자가 적용되지 않은 li를 불러오기 */
      ul:has(li:hover) li:not(:hover) { 메뉴 클릭했을 때 다른 메뉴들을 흐리게 만드는 효과를 줄 수 있다.
        color: #777;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>home</li>
      <li>about</li>
      <li>product</li>
      <li>notice</li>
      <li>contact</li>
    </ul>
  </body>
</html>

ul:has(li:hover) li:not(:hover) {}결과

 

배경속성

웹 문서를 꾸미기 위해 특정 영역이나 글자 등 여러 요소에 배경을 넣을 수 있다.

배경에는 단순한 이미지나 색상을 넣을 수 있고, gradient와 같은 배경 색상으로 효과를 만들 수 있다.

[속성]

1. background-image : url(이미지경로); 배경 이미지를 불러와서 해당 영역에 채운다.

   여러 개 이미지를 한꺼번에 가져올 수 있다. 동일한 속성의 배경이미지를 여러 개 불러올 때 ,(콤마)로 구분한다.

   먼저 불러온게 맨 앞에 나온다. 

2. background-repeat : no-repeat / repeat-x / repeat-y;   배경의 반복여부. 배경속성은 기본적으로 불러온 이미지를 바둑판 배열로 꽉 채운다.

  • ★no-repeat 배경 이미지를 반복하지 않고 1번만 출력한다.
  • repeat-x 배경이미지를 가로로 반복한다.
  • repeat-y 배경 이미지를 세로로 반복한다.

3. background-attachment : fixed / scroll;   배경 고정 여부. 

  • fixed : 스크롤이 움직이더라도 배경 이미지는 해당 위치에 고정된다.
  • scroll : 기본값으로 스크롤이 아래로 내려가면 이미지는 위로 올라간다. 즉, 스크롤 따라 이동한다. 

4. background-position : px / left, right, center, top, bottom / %   배경 위치 

 

5. background-size : px / % / cover / contain ...  배경의 크기 

  • cover : 영역의 가로에 맞춰 이미지를 정비율로 채운다.
  • contain : 영역의 세로에 맞춰 이미지를 정비율로 채운다. 

6. background-origin : content-box / border-box / padding-box;  배경이 차지하는 영역을 지정 

  • content-box : padding, border영역을 제외한 순수한 컨텐츠 영역만큼만 채운다.
  • padding-box : 기본값으로 padding영역까지 배경을 채운다.
  • border-box : border영역까지 배경을 채운다.

+백그라운드컬러까지~

<title>배경속성</title>
    <style>
      body {
        background-image: url(./img/bg.jpg); /* 배경이미지 불러오기 , 작은 사진을 받아오면 바둑판 배열로 채워진다. */
        background-image: url(./img/dog.svg), url(./img/bg.jpg); /* 여러 개의 배경을 한 번에 불러온다. */
        background-repeat: no-repeat;
      }

      div {
        width: 200px;
        height: 200px;
        background-color: seashell;
        border: 5px solid #000;
      }
    </style>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>배경속성</title>
    <style>
      body {
        /* 스크롤을 만들기 위한 물리적인 높이 */
        height: 5000px;
      }
      div:first-child {
        width: 50%;
        height: 300px;
        border: 5px solid darkblue;
        /* 배경속성 한 번에 적용 */
        background: url(./img/bg.jpg) no-repeat;
        /* width에 맞춰 정비율로 100%를 채움 */
        background-size: 100%;
        /*
        넓이에 맞춰 여백이 남지 않도록 정비율로 채움.
        만약 공간이 부족하면 이미지를 일부 잘라서라도
        정비율로 채운다.
        */
        background-size: cover;
        /*
          높이에 맞춰 영역에 배경이미지를 채운다.
          이때 정비율을 항상 유지하며, 박스의 크기에 따라
          빈공간이 생긴다.
        */
        background-size: contain;
      }

      div:nth-child(2) {
        width: 500px;
        height: 300px;
        margin-top: 40px;
        border: 5px solid sandybrown;
        background: url(./img/bg.jpg) no-repeat;
        background-size: 200px;
        /* 배경위치 */
        background-position: 50px 10px; /* 가로위치 세로위치 */
        background-position: left; /* 왼쪽 중앙(세로 기본값은 middle) */
        background-position: center; /* 가로세로 중앙으로 감 */
        background-position: right top;
      }

      div:nth-child(3) {
        width: 500px;
        height: 500px;
        margin-top: 40px;
        border: 5px solid #f46074;
        background: url(./img/bg.jpg) no-repeat;
        background-size: cover;
        /* 스크롤에 따른 고정여부 */
        background-attachment: scroll; /*기본값. 고정안함*/
        background-attachment: fixed; /*배경만 고정함*/
      }
      h2 {
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        margin-top: 200px;
      }
      p {
        text-align: center;
        color: #fff;
      }

      div:last-of-type {
        margin-top: 50px;
        width: 300px;
        height: 300px;
        padding: 40px;
        border: 30px solid hsla(197, 71%, 73%, 0.451);

        background: url(./img/bg.jpg) no-repeat;
        background-size: cover;
        /* 배경 영역 지정 여부 */
        background-origin: padding-box; /*기본값. 패딩영역까지 배경을 채움*/
        background-origin: content-box; /* width,height만큼만 채움*/
        background-origin: border-box; /* border영역까지 채움*/
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div>
      <h2>awsome title</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div></div>
  </body>
</html>

 다양한 색상 단위
      ===========================
      CSS에서는 색상을 표현할 때 다양한 단위로 표현할 수 있다.

      1. hex👍 : 앞에 #을 붙인 16진수로 색상을 표현한다. 색상을 다루는 모든 분야 전반에서 사용한다.
 
      2. 색상명 : red, blue, orange 등 색상명을 단어로 표현하는 단위.
 
      3. rgb(red, green, blue)
      : rgb색상단위. 각 색상 자리에 0~255까지의 숫자를 입력하여 빛으로 색을
        표현한다. 디바이스와 관련된 기기를 이용할때 가장 많이 쓰임.
 
      4. rgba(red, green, blue, alpha)👍
      : rgba단위. 투명도(alpha)가 포함된 색상단위. alpha값은 0 ~ 1 사이의 값을 쓸 수 있다.
        0이 완전 투명하고 1이 완전 불투명한 상태를 말하며, 0.5라고 쓰면 50% 투명한 상태를 말한다.
 
      5. hsl(hue, saturation, lightness)
      : hue는 색상을, saturation는 채도를, lightness는 밝기를 말한다. 잘 쓰이진 않음.
        각 값을 %로 표현한다.

      6. hsla(hue, saturation, lightness, alpha)
      : hsl색상 단위에 alpha값이 포함된 단위. 잘 쓰이진 않음.
 
    <title>다양한 색상 단위</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100%;
        height: 100px;
        margin-bottom: 20px;
        font-size: 24px;
      }

      #word {
        background-color: red;
      }

      #hex {
        background-color: #ff0000;
      }

      #rgb {
        background-color: rgb(255, 0, 0);
      }

      #hsl {
        background-color: hsl(0, 100%, 50%);
      }

      #rgba {
        background-color: rgb(255, 0, 0, 0.5);
      }

      #hsla {
        background-color: hsla(0, 100%, 50%, 0.3);
      }
    </style>
  </head>
  <body>
    <div id="word">word</div>
    <div id="hex">hex</div>
    <div id="rgb">rgb</div>
    <div id="hsl">hsl</div>
    <div id="rgba">rgba</div>
    <div id="hsla">hsla</div>
  </body>
</html>

 

 

투명도 속성

컨텐츠에 투명도를 적용하고 싶을 때 경우에 따라 alpha값을 사용하거나 opacity속성을 이용할 수 있다. 

opacity속성도 alpha값과 마찬가지로 값을 0~1까지만 입력할 수 있다.

[기본형]

선택자{

opacity : 0~1 사이의 값;

opactiy는 '속성명'!! alpha값은 '속성값'!! 구분해서 사용해야 한다. 

색상을 나타나는 속성에 쓴다. 실제 컨텐츠에는 영향을 줄 수 없다. 

opacity속성은 컨텐츠 자체를 투명하게 만들 때 사용하고 

alpha는 배경색이나 테두리색, 글자색  등을 투명하게 만들 때 사용한다. 

opacity속성과 alpha값의 차이

 

전체적으로 투명하게 만드는게 opacity, 실제 컨텐츠는 건들 수 없으나 배경이나 border의 색상을 투명하게 만드는게 alpha.

 

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

스프라이트 / #SplitShire시멘틱구조 / day17 / 25.04.23  (1) 2025.04.25
테이블 태그 칸 합치기 / day18 / 25.04.24  (0) 2025.04.25
구조&형태구조 / 제외.속성.상태.가상요소선택자 / day13 / 25.04.17  (1) 2025.04.17
#대남병원 / list-style속성 / day12 / 25.04.16  (1) 2025.04.16
HTML+CSS / ★flex속성 6가지 / day11 / 25.04.15  (2) 2025.04.15