CSS란 무엇인가?

DG-NOTE·2022년 4월 26일
0

CSS란?

CSS란 cascading Style Sheets의 줄임말로 HTML XHTML XML 같은 웹문서 스타일을 작성하는 스타일 시트 언어이다. 쉽게 말해 HTML문서의 글꼴, 배경색 너비와 높이 위치 등을 디자인해주는 언어이다.

* CSS 적용 방법

  • 스타일 태그 
    <!DOCTYPE html>
<html lang="ko" dir="ltr">
 <head>
   <style>
     body {
       background: : red;
     }
   </style>
   <meta charset="utf-8">
   <title>CSS란?</title>
 </head>
 <body>
   
 </body>
</html>
  • 인라인 스타일
    <!DOCTYPE html>
<html lang="ko" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>CSS란?</title>
 </head>
 <body style="background: red">
   <h1>CSS 적용방법</h1>
 </body>
</html>
  • 외부스타일
    <!DOCTYPE html>
<html lang="ko" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>CSS란?</title>
   <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
   <h1>CSS 적용방법</h1>
 </body>
</html>
 - style.css 파일

    @charset "UTF-8";
    body{
      background-color: purple;
    }

* CSS 우선순위

  1. 속성값 뒤의 !important
  2. 태그에 inline으로 style 속성 지정
  3. 선택자가 #id
  4. 선택자가 .class 및 pseudo 클래스(:hover같은 것)
  5. 선택자가 tag 이름

* CSS 기술 중요 규칙

  1. "{" 로 시작하여 "}"로 끝난다.
  2. 다중 속성 적용시 ";"으로 구분한다.
  3. 태그명을 정확하게 일치시켜서 작성한다.

    h1{ color : red; background-color: blue; }

  4. class와 id들은 첫글자가 숫자가 올수가 없다.
  5. 부모, 자식요소간의 구분은 공백으로 한다.
  6. 다중 클래스는 연경하여 표기한다.

    .wrap .inner{ }
    .header.nav{}

    <div class="wrap">
   <div class="inner">test</div>
 </div>
 <div class="header nav">test</div>

* CSS 초기화

웹브라우저에서 user agent style과 같은 기본 스타일이 적용되어 있다.
하지만 이러한 기본 속성들은 내가 원하는 페이지를 만드는데 걸림돌이 된다.
그리고 브라우저마다 가지고 있는 기본 속성이 각자 다르기도 하기때문에 초기화는 필수적이다.
초기화 하는 방법은 직접 초기화 코드를 만들어서 사용하는 경우도 있지만 이미 만들어진 초기화 코드를 사용하는 경우도 있습니다.

  • normalize.css
  1. https://necolas.github.io/normalize.css 해당 링크에 접속해서 파일 다운로드 후 추가한다.
  2. https://cdnjs.com/libraries/normalize 해당 페이지에서 주소를 복사하여 CDN방식으로 추가한다.
<!DOCTYPE html>
<html lang="ko" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CSS 초기화란?</title>
  <link rel="stylesheet" href="css/initial.css"> <!-- 직접 추가방법 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> 
    <!-- CDN 추가방법 -->
  </head>
  <body>
    <h1>CSS 초기화</h1>
  </body>
</html>
profile
DG-NOTE
수업들은 것을 정리하고, 공부하기 위한 블로그
이전 포스트

HTML 블록,인라인 요소란?

다음 포스트

CSS 선택자란?

0개의 댓글