2022-12-29 TIL(2)

가상 요소

CSS요소만 필요할 때 굳이 HTML작성을 하지않고도 추가 가능하며, html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다.
선택자:가상클래스 { property: value; }

앵커(a) 가상 클래스

 /* 클릭 전 링크 */
    a:link {   
        color: blue;
    }
     /* 클릭 후 링크 */
    a:visited {
        color:purple;
        text-decoration: none;
    }
    /* 커서가 해당 요소위에 있을때 */
    a:hover {
        color: red;
    }
    /* 클릭한 상태(눌리는중) */
    a:active {
        color: gray;
    }

순서에 따른 가상 클래스

: 여러개의 같은 태그요소들에 따로 CSS를 주기 위해 클래스를 추가할 필요가 없다

:first-child : li 중 첫번쩨 요소에 해당 CSS를 적용한다.
:last-child : li 중 마지막에 해당 CSS를 적용한다.
:nth-child(n) : li 중 n번쩨 요소에 해당 CSS를 적용한다. (odd,even)

가상요소 ::before, ::after

가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면, 가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.

  <header>
    <h1>Hello World</h1>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, hic!
    </p>
  </header>

단순한 HTML 파일만 있지만 ,

 header {
      display: ?;
      flex-direction: ?;
      justify-content: ?;
      align-items: ?;
      text-align: center;
      height: 100vh;
    }

    header h1 {
      font-size: 6rem;
      margin: 1rem;
    }

    header::before {
      content: '';
      background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.5;
    }

BEFORE를 사용하여 이미지 BACKGROUD 활용 가능 .

글자와 박스에 대한 쉐도우, 번짐

글자

 h1.a {
      /* 가로 | 세로 | color, rem은 기본 폰트사이즈 *0.2 */
      text-shadow: 0.2rem 0.2rem steelblue;
    }

    h1.b {
      /* 가로 | 세로 | 번짐 */
      text-shadow: 0.4rem 0.3rem 0.7rem steelblue;
    }

    h1.c {
      /* 글자가 흰색일때 쉐도우로 나타냄 */
      color: #fff;
      text-shadow: 0.2rem 0.2rem 1rem steelblue;
    }

    h1.d {
      /* 음수일때 반대쪽 */
      text-shadow: -1rem -1rem 0.9rem chocolate;
    }

박스

 .box {
      padding: 1rem;
      margin: 1rem;
      background: coral;
      color: #fff;
      /*   가로  |  세로  | color */
      /* box-shadow: 10px 10px teal; */
      /*   가로  |  세로  | 번짐정도 | color */
      /* box-shadow: 5px 5px 20px teal; */
      /* 음수값 적용시 */
      /* box-shadow: -5px -5px 20px teal; */
      /*   가로  |  세로  | 번짐정도 | 번짐거리 | color */
      /* box-shadow: 3px 3px 10px 10px rgba(64, 16, 148, 0.3); */
      /* 멀티 박스 쉐도우 적용 안쪽쉐도우, 바깥쪽 쉐도우 */
      box-shadow: inset 1px 1px 20px teal, 10px 10px 20px olive;
      border-radius: 50% 20% / 10% 40%;
    }

CSS3 특수효과 transform과 transition

변화 모양에 대한 코드

박스와 박스 호버시 변화에 대한 코드
 .box {
      background: white;
      width: 300px;
      height: 300px;
      /* Transform - rotate, scale, skew */
      /* transform: rotate(75deg); */
      /* 찌그러뜨리기!! */
      /* transform: skew(25deg); */
      /* 사이즈 조절 */
      /* transform: scale(2); */

      transform: translate(100px 100px);
      /* 변화하는 시간 조절 */
      transition: all 1s ease-in-out;
    }

    .box:hover {
      transform: rotate(180deg);
      /* transform: skew(25deg); */
      /* transform: scale(2); */
      /* border-radius: 50%;
        background-color: blue; */
      /* transform: translateY(100px); */
      /* transform: translateX(-100px); */
      /* x & y */
      /* transform: translate(100px, 100px); */
      /* transform: translate3d(100px, 100px, 100px); */
    }

변화의 시간에 대한 코드

 .box {
      background: white;
      width: 100px;
      height: 100px;
      transition-property: background-color border-radius height width;
      /* transition-property: all; */
      transition-duration: 1s;
      /*ease-out 끝날때 천천히, ease-in 시작할때 천천히  */
      transition-timing-function: ease-out;
      /* 지연 시간  */
      transition-delay: 0.5s;

      /* 단축키워드 - property/duration/timing-function/delay */
      /* transition: all 1s ease-in-out; */
    }

    .box:hover {
      background: red;
      border-radius: 50%;
      height: 300px;
      width: 300px;
    }