<TIL> CSS_기본문법(배경속성추가)

20210722

css block 단위 중앙 정렬

block 레벨의 중앙정렬 코드 예시

     #wrap {
        border: 2px solid blue;
        width: 400px;
        margin: 0 auto;
      }

width로 block 길이 지정 및 margin으로 수직 수평 정렬

css block과 inline

웹에서 인식하는 기준과 가지고 있는 속성이 다르다

예시코드

      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
    <hr />
    <span>A</span><span>B</span><span>C</span>
    <span>D</span>
    <span>I</span>

      span {
        background-color: tomato;
        width: 100px;
        height: 100px;
        padding: 20px;
        display: inline-block;
      }
      
            #box div {
        background-color: yellowgreen;
        width: 200px;
        height: 200px;
      }

➡️ block은 위에서 아래로 쌓이고 부피를 가진다
➡️ inline은 왼쪽에서 오른쪽으로 쌓이고 태그간 공백이 하나씩 출력되어
    간격이 나타난다, 추가로 태그를 붙여주면 이어서 나타난다.

css 선택자 추가 옵션

선택자: link, hover, visited, active
선택자: first-child, last-child, nth-child()

예시코드 1

      .btn {
        width: 120px;
        height: 50px;
        background-color: burlywood;
        color: #fff;
        display: block;
        border-radius: 5px;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
      }
      .btn:hover,
      .btn:active {
        background-color: coral;
      }

➡️ link는 a태그로 링크를 건 상태를 선택
➡️ hover는 마우스를 위로 올려놓았을때
➡️ active는 클릭했을때
➡️ visited는 한번이라도 방문한 링크일때

예시코드 2

      #box {
        border: 5px solid red;
        margin-bottom: 300px;
      }
      #box div {
        background-color: yellowgreen;
        width: 200px;
        height: 200px;
      }
      #box div:nth-child(1) {
        display: block;
      }
      #box div:nth-child(2) {
        padding: 50px;
      }
      #box div:nth-child(3) {
        border: 50px solid orange;
      }
      #box div:nth-child(4) {
        padding: 50px;
        border: 50px solid orange;
      }
      #box div:nth-child(5) {
        padding: 50px;
        border: 50px solid orange;
        box-sizing: border-box;
        /* width -> padding + border */
      }

    <div id="box">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>

➡️ first-child는 해당 선택자의 내부에 있는 첫번째 태그
➡️ last-child는 해당 선택자의 내부에 있는 마지막 태그
➡️ nth-child()는 해당 선택자의 ()안의 n번째 태그

css 부가 설명: box-sizing: border-box

content 밖의 영역인 padding, border를 content영역으로 size를 맞춰주는 속성이다.

css 부가 설명: visibility, display 차이

1. visibility: hidden은 눈에만 사라지고 자리는 남는다
2. display: none은 눈에도 자리도 사라진다

예시코드

      .menu li {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: rgb(36, 160, 160);
        color: #fff;
        display: inline-block;
      }
      
            .menu li:first-child {
        border: 1px solid hotpink;
      }
      .menu li:last-child {
        border: 1px solid blue;
      }
      .menu li:nth-child(2) {
        border: 1px solid gold;
        visibility: hidden;
      }
      .menu li:nth-child(3) {
        border: 1px solid green;
        display: none;
      }

    <ul class="menu">
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </ul>

➡️ menu2의 자리는 남아있고 menu3은 전체적으로 사라졌다

css 문단 맞추기

1. &nbsp
2. `text-indent: -숫자;

예시코드

        <p class="con03">
          ※ 수목원은 자연과 더불어 사는 우리 인간에게 매우 소중한 존재입니다.<br />
          식물이나 <strong>시설을 훼손</strong>하거나 타인에게 방해가 되는
          행동은 삼가시기 바랍니다. <br />방문해주신 모든 분께 감사드립니다.^^
        </p>

      .con03 {
        padding: 10px 0 10px 30px;
        margin-left: 20px;
        display: block;
        border: 1px solid #bcd3be;
        background-color: #f6fdf7;
        line-height: 1.8;
        width: 650px;
        text-indent: -17px;
      }

css 색상 표현법

1. 색상명
2. rgb(red, green, blue)
3. #nnn
4. rgb(red, green, blue, opt = 투명도(0~1))

예시코드

      ul li {
        padding: 20px 0;
        list-style-type: none;
        text-align: center;
        color: #fff;
      }
      ul li:nth-child(1) {
        background-color: red;
      }
      ul li:nth-child(2) {
        background-color: #1212e9;
      }
      ul li:nth-child(3) {
        background-color: rgb(6, 131, 6);
      }
      ul li:nth-child(4) {
        background-color: rgba(6, 131, 6, 0.5);
      }

    <ul>
      <li>빨강</li>
      <li>파랑</li>
      <li>그린</li>
      <li>노랑</li>
    </ul>

css 중요 배경속성

1. background-color
2. background-size
3. background-repeat
4. background-position
5. background-attachment
6. background-image
7. opacity

예시코드

      .bg {
        height: 400px;
        border: 1px solid red;
        background-image: url(main_image.jpeg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 500px;
        background-color: cornflowerblue;
      }

  <body>
    <ul>
      <li>빨강</li>
      <li>파랑</li>
      <li>그린</li>
      <li>노랑</li>
    </ul>
    <div class="bg"></div>
    <div class="gradient_liner">선형 그라데이션</div>
    <div class="gradient_radial">원형 그라데이션</div>
  </body>

➡️ img는 url 옵션을 주어 이미지파일을 지정할 수 있다
➡️ repeat은 기본적으로 화면에 다 찰때까지 넣어준 이미지가 반복되는데
    이를 반복을 어떻게 할지 정해주는 옵션이다.
    (repeat-x, repeat-y, no-repeat)
➡️ color는 배경색 지정
➡️ position은 위치 지정 (right, center, 100px 50px 등 다양하게 지정가능)
➡️ size는 배경 크기 지정
➡️ attachment는 이미지를 고정할지 스크롤에 따라 움직일지 등을 지정해준다
➡️ opacity는 투명도를 뜻하고 0 ~ 1까지 올라갈수록 진해진다

배경에 여러개 이미지를 넣을때
background-image: img 1, img 2;
속성을 추가로 줄때
background-size: img 1, img 2;

css 그라데이션

1. linear-gradient
2. radial-gradient

사용법

• linear-gradient(위치 및 각도,  시작색,  마무리색 );
• radial-gradient(원중앙시작색,  원바깥색 );

예시코드

      .gradient_liner {
        background-image: linear-gradient(225deg, black, hotpink);
        background-image: -webkit-linear-gradient(225deg, black, hotpink);
        background-image: -moz-linear-gradient(225deg, black, hotpink);
        background-image: -o-linear-gradient(225deg, black, hotpink);
      }
      .gradient_radial {
        background-image: radial-gradient(
          rgb(217, 255, 0),
          yellow,
          coral,
          orange
        );
      }

    <div class="gradient_liner">선형 그라데이션</div>
    <div class="gradient_radial">원형 그라데이션</div>

css parallax

background-attachment: fixed를 이용한 스크롤에 따른 배경 변경

예시코드

      html,
      body {
        height: 100%;
        margin: 0;
        color: #777;
      }
      .bg01,
      .bg02,
      .bg03 {
        background-color: #333;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        opacity: 0.7;
      }
      .bg01 {
        background-image: url(images/bg01.jpg);
        min-height: 100%;
      }
      .bg02 {
        background-image: url(images/bg02.jpg);
        min-height: 400px;
      }
      .bg03 {
        background-image: url(images/bg03.jpg);
        min-height: 400px;
      }

<body>
    <div class="bg01">
      <span class="caption">SCROLL start</span>
    </div>
    <div class="txt01">
      <h2>HAPPY HAPPY HAPPY</h2>
    </div>
    <div class="bg02">
      <span class="caption">Test Demo1</span>
    </div>
    <div class="txt02">
    </div>
    <div class="bg03">
      <span class="caption">Test Demo2</span>
    </div>
    <div class="txt03">
    </div>
    <div class="bg01">
      <span class="caption">SCROLL end</span>
    </div>
  </body>

스크롤 이동 👇

스크롤 더 이동 👇👇

👀   위 그림에서 보는 것과 같이 스크롤에 따라 배경이 움직이면서
       화면에 바뀌어 나타난 것을 볼 수 있다.

이유는 바로 body에 100% 높이를 주고 해당 배경 클래스에 각각 min-height: 100%, background-size: cover;를 줌으로써 100%로 이미지가 꽉차게 나오게 한뒤 background-attachment: fixed;를 부여하므로써 이미지를 스크롤에 독립적으로 작용하게 되어 div 박스 크기에 따라 부여된 이미지가 부분부분 짤려서 움직이듯 보여지게되는 것이다.

이런 시각적인 현상을 parallax라고 한다.