CSS_Basic

22-03-03 1 분 소요

📚 CSS

📚 Basic

CSS이란 무엇인가 ?

cascading Style Sheets의 약자이며 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.
CSS는 웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서이다.

.css { margin : 30px; color : red; }
____ 선택자           ____________ 선언
      _______ 속성
                ____ 값
     _______________________________ 선언 블록

CSS는 선택자와 선언 두 부분으로 구성되어있다.

선택자 ( selector )
규칙이 적용되는 엘리먼트
선언 ( declaration )
선택자에 적용될 스타일을 작성
속성 ( Property )
선택자에서 바꾸고 싶은 요소 ( ex> color, font, width .. )
값 ( Value )
속성에 적용할 값
중요한 부분
- 선언은 중괄호로 감싼다 ( { } )
- 각각의 선언 안에 각 속성을 해당 값과 구분하기 위해 콜론 ( : ) 사용
- 각각의 선언을 구분하기 위해 세미콜론 ( ; ) 사용 ( 하나 이상의 속성 작성 가능 )

CSS 주석

/* 출력되지 않는 부분 입니다 */

CSS 스타일

스타일 적용 우선순위
인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트
외부 스타일 시트가 가장 유지보수가 용이하고 많이 사용한다.

외부 스타일 시트

link tag

HTML 페이지 안에 head tag안에 작성하며 link tag를 이용하여 외부 CSS 파일과 연결시키는 방법이다.

rel
HTML 페이지와 링크된 파일간의 관계
href
CSS file 경로

<head>
  <link rel="stylesheet" type="text/css" href="../css/main.css" />
</head>

@import

style tag 안에 설정한다. 이는 CSS 파일 내부에서도 사용가능하다는 뜻이다.
@import는 style 시트 중 최상단에 위치해야 한다.

<head>
  <style type="text/css" media="screen">
    @import url("../css/main.css");
    /* @import "../css/main.css"; */
  </style>
</head>

내부 스타일 시트

style tag를 이용하여 내부에 CSS 규칙을 작성한다.
외부 스타일 시트보다 우선 적용이다.
head tag 내부에 작성한다.

<head>
  <style type="text/css">
    h2 {
      color: magenta;
    }
    p {
      background-color: skyblue;
      color: purple;
    }
  </style>
</head>

인라인 스타일

개별 element 마다 스타일을 작성한다.
유지보수에 용이하지 않다.
우선순위는 가장 높다.

<body>
  <h2 style="color:magenta;">Inline Style Sheet</h2>
  <p style="background-color: skyblue; color: purple;">p style</p>
</body>

CSS 기본 마무리

CSS가 무엇인지, 어떤 식의 구조를 가지고 있는지만 알아보았다.
사실 이제 어떻게 쓰이고 어떤 것들이 있는지가 중요하기 때문에 다음 포스팅을 통해 더 자세히 공부하도록 하겠다.
CSS도 마찬가지로 모든 것을 외울려고 할 필요는 없다. 필요할 때 어떤 것이 있고 어떤 것을 써야하고 정도만 알아도 충분히 잘 활용할 수 있을 것 같다.
웹에서 디자인도 굉장히 중요하기 때문에 웹 페이지의 디자인 담당인 CSS를 잘 알 필요가 있다 !!

👏 참조
https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

Kim Ji Soo