[CSS] CSS 기초

저녕호 2024. 3. 20. 14:58

2024. 3. 20. 14:58

CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 전체 선택자 */
      * {
        color: red;
        background: yellow;
      }

      /* 태그 선택자 */
      b {
        font-size: 30px;
      }

      /* id 선택자 */
      #id_txt {
        background: gray;
      }

      /* class 선택자 */
      .class_txt {
        color: black;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt><b>css</b></dt>
      <dd id="id_txt">스타일 시트 표준안</dd>
      <dd class="class_txt">
        웹 문서에 글꼴, 색상, 정렬과 각 태그의 배치 방법 등 디자인 적용
      </dd>

      <dt><b>css구성</b></dt>
      <dd>선택자(selector) : 디자인을 적용할 대상 지정</dd>
      <dd>속성 : 어떤 디자인을 설정할지</dd>
      <dd>속성 값 : 속성에서 선택한 디자인을 어떻게 반영할지</dd>
    </dl>
  </body>
</html>

선택자

id 선택자와 class 선택자의 차이

- id 선택자는 id 선택자를 여러개 중첩하여 사용할 수 없다.

- class 선택자는 여러 class 를 중첩하여 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #id01 {
        color: red;
      }
      #id02 {
        background: aqua;
      }
      .class01 {
        color: blue;
      }
      .class02 {
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div id="id01" class="class02">
      <!-- id 선택자는 동시에 여러개 적용 불가 -->
      <!-- id 선택자와 class 선택자는 동시에 적용 가능 -->
      id를 부여할 경우 문서 내의 유일한 값으로 사용<br />
      문서내에서 동일한 id를 부여하면 안된다
    </div>
    <div class="class01 class02">
      <!-- class 선택자는 동시에 여러 클래스를 적용할 수 있음 -->
      class는 다른 태그에서 사용해도 된다<br />
      여러개를 동시에 부여할 수 있다
    </div>
  </body>
</html>

id 선택자와 class 선택자의 차이

하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자

- 하위 선택자 : 특정 선택자 하위의 모든 요소를 말한다

- 자식 선택자 : 직속 자식 요소를 말한다

- 인접 선택자 : 바로 뒤에 나오는 하나의 요소

- 형제 선택자 : 같은 계층에 있는 요소에 적용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box p {
        color: lime;
      } /* 하위 선택자 */
      .box > p {
        color: orange;
      } /* 자식 선택자 */
      .box + div {
        background: gray;
      } /* 인접 선택자 */
      .box ~ p {
        background: green;
      } /* 형제 선택자 */
    </style>
  </head>
  <body>
    <div class="box">
      <p>1. 하위 선택자는 특정 선택자 하위의 모든 요소를 말한다</p>
      <div>
        <p>2. 자식 선택자는 직속 자식 요소를 말한다</p>
      </div>
      <p>3. 다음 내용</p>
    </div>
    <div>1. 인접 선택자는 바로 뒤에 나오는 하나의 요소</div>
    <div>2. 인접 선택자는 바로 뒤에 나오는 하나의 요소</div>
    <p>형제 선택자는 같은 계층에 있는 요소에 적용 된다</p>
  </body>
</html>

하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자

가상 선택자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      div {
        width: 200px;
        height: 100px;
        color: blue;
        background: green;
        opacity: 0.9;
      }
      div:hover {
        width: 400px;
        height: 50px;
        color: red;
        background: yellow;
        opacity: 0.3;
        transition: all 1.5s linear 0.5s;
        /*  all : 모든 내용을
            1.5s : 1.5초 동안 구현하세요
            
            linear : 선형 그라데이션 효과
            0.5s : 0.5초 동안 마우스가 위에 있으면
        */
      }
    </style>
  </head>
  <body>
    <h2>가상 선택자</h2>
    <div>가상 클래스를 이용한 애니메이션 효과</div>
  </body>
</html>

가상 선택자

마우스가 올라가면 0.5초 간 대기 후에 1.5초 동안에 div:hover 가 구현됨

실습 예제

실습 풀이

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .main_back {
        background: lightgray;
        height: 300px;
        width: 190px;
      }
      .hover:hover ~ div > h2 {
        color: aqua;
      }
      .main_back > ul > li > h3:hover {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <h1 class="hover">오늘의 할 일</h1>
    <div class="main_back">
      <h2>12월 31일 할 일</h2>
      <ul>
        <li>
          <h3>오전 10시</h3>
          <p>아침밥 먹기</p>
        </li>

        <li>
          <h3>낮 12시</h3>
          <p>광합성</p>
        </li>

        <li>
          <h3>오후 4시</h3>
          <p>집 나가기</p>
        </li>
      </ul>
    </div>
  </body>
</html>

코드 실행

a 태그 가상 선택자

1. link : 방문한적 없는 링크

2. visited : 방문한 적 있는 링크

3. hover : 마우스가 올라갔을 경우

4. active : 클릭이 되는 순간

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a:link {
        color: pink;
        text-decoration: none;
      }
      a:visited {
        color: red;
      }
      a:hover {
        text-decoration: overline;
        color: black;
      }
      a:active {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">test</a> &nbsp;
    <a href="https://www.naver.com">naver</a>
    <hr />
    link : 웹 문서에서 사용자가 방문하지 않았던 곳<br />
    visited : 웹 문서에서 사용자가 방문한 곳<br />
    hover : 포인터가 올라갔을 경우<br />
    active : 클릭이 되는 순간
  </body>
</html>

시크릿 모드로 창을 열어놓은 상태라 방문한 사이트로 인식하지 않음

overflow: hidden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div01 {
        overflow: hidden;
        background: blue;
        height: 100px;
      }
      .div01 div {
        background: red;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="div01">
      hello
      <div>css</div>
    </div>
    <h1>다음 내용</h1>
  </body>
</html>

overflow: auto

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .div01 {
        overflow: hidden;
        background: blue;
        height: 100px;
      }
      .div01 div {
        background: red;
        width: 200px;
        height: 200px;
      }
      .txt {
        overflow: auto;
        height: 100px;
        width: 100px;
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div class="div01">
      hello
      <div>css</div>
    </div>
    <h1>다음 내용</h1>
    <div class="txt">
      제230조<br />
      회원이 지켜야할 내용이 있다면 지켜주세요<br />
      더 이상 내용은 없음<br />
      그래 반갑다<br />
      즐거운 하루 되세요~^^
    </div>
  </body>
</html>

일반적인 글은 overflow 가 발생했을때 hidden 을 사용하게 되면 글자가 사라져 버린다, 이때 auto 옵션을 사용하면 스크롤 바 형식으로 텍스트가 형식에 맞춰서 보존된다

Hover Effect

1. transform: scale(배수); : 마우스가 올라가면 크기가 배수만큼 커짐

2. transition: all 시간초s; : 마우스가 올라가면 작동할 모든 기능을 설정한 시간초동안 실행

실습 예제

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: red;
        text-align: center;
        height: 40px;
        width: 180px;
        color: white;
        padding-top: 20px;
        font-weight: bold;
      }
      div:hover {
        background: gray;
      }
    </style>
  </head>
  <body>
    <div
      style="
        background: pink;
        height: 400px;
        width: 900px;
        padding-top: 10px;
        padding-left: 10px;
      "
    >
      <div>Home</div>
      <div>Profile</div>
      <div>Board</div>
      <div>Contact</div>
    </div>
  </body>
</html>

코드 실행

link

외부 파일로 생성한 css 파일을 불러오는 태그인 link 태그

.px {font-size: 24px;}
.pt {font-size: 24pt;}
.per {font-size: 150%;}
.em {font-size: 1.5em;}

css 파일 내부 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="test09.css" />
  </head>
  <body>
    기본 글자 크기는 16px <br />
    글자 크기 단위<br />
    - px : 해상도에 따라 상대적으로 달라지는 단위<br />
    - pt : 무조건 고정 크기<br />
    - % : 부모 요소의 크기를 100% 기준으로 계산<br />
    - em : 부모 크기를 100% 기준으로 100분의 1단위

    <hr />

    <a href="https://pxtoem.au" target="_blank">단위 변환 사이트</a>
    <div class="px">내용</div>
    <div class="pt">내용</div>
    <hr />
    <div>기본 크기 16px 크기</div>
    <div class="per">부모가 없는 기본 16px 의 150% 크기</div>
    <div class="em">부모가 없는 기본 16px 의 1.5em 크기</div>
    <div class="px">
      부모 크기 24px
      <div class="px">자식 24px</div>
      <div class="per">자식 150%</div>
      <div class="em">자식 1.5em</div>
    </div>
  </body>
</html>

html 코드에 link 태그를 사용하여 css 파일을 불러와서 사용

inline, block

display 태그에서 inline 태그를 block 으로 변경할 수도 있고 block 태그를 inline 으로 변경할 수도 있다

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        background: skyblue;
        display: inline-block;
        width: 200px;
        text-align: center;
      }
      span {
        background: olive;
        display: block;
      }
      .visible:hover ~ .none {
        display: inline;
      }
      .none {
        display: none;
        background: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div>div-01</div>
    <div>div-02</div>
    <span>span-01</span>
    <span>span-02</span>
    <h1 class="visible">마우스를 올려주세요</h1>
    <h1 class="none">내용</h1>
    즐거운 날~~~~
  </body>
</html>

코드 실행

텍스트 가운데 정렬

한 줄 가운데 정렬 : height 의 값과 line-height 값을 일치시키면 줄의 가운데로 이동한 뒤 text-align: center 를 사용하여 중앙에 위치

여러줄 가운데 정렬 : display: table-cell 지정 후 vertical-align: middle 설정

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .in-block {
        display: inline-block;
        background: orange;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
      }
      div {
        background: aqua;
        width: 300px;
        height: 300px;
        display: table-cell;
        vertical-align: middle;
      }
      label {
        width: 100px;
        height: 30px;
        background: red;
        display: inline-block;
        line-height: 30px;
        text-align: center;
      }
      input {
        width: 300px;
        height: 30px;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <a href="#" class="in-block">홈으로 이동1</a>
    <a href="#" class="in-block">홈으로 이동2</a>
    <a href="#" class="in-block">홈으로 이동3</a>
    <div>
      여러줄<br />
      가운데<br />
      정렬<br />
      되나요
    </div>
    <label>아이디 입력</label><input />
  </body>
</html>

728x90

'FE > CSS' 카테고리의 다른 글

[CSS] CSS 기초2 (0)	2024.03.21

저녕호의 개발 블로그

[CSS] CSS 기초

CSS

id 선택자와 class 선택자의 차이

하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자

가상 선택자

실습 예제

a 태그 가상 선택자

overflow: hidden

Hover Effect

실습 예제

link

inline, block

텍스트 가운데 정렬

'FE > CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바