처음부터 차근차근

[CSS] CSS란 & 기본적인 사용법 본문

Style Sheet/CSS

[CSS] CSS란 & 기본적인 사용법

HangJu_95 2023. 12. 13. 18:21
728x90

CSS(Cascading Style Sheet)란?

CSS는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다.

 

기본적으로 HTML은 마크업 언어로서, 구조화 된 문서 파일입니다.

콘텐츠의 구조를 정의하는 뼈대만 만들고, 그 안에 있는 내용을 보여주고 있지만, HTML만 사용한다면 굉장히 밋밋합니다. CSS를 통해 HTML 문서를 이쁘게 만들 수 있습니다.

 

CSS는 HTML이나 XML같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. 즉, HTML의 각 요소(Element)의 style(design, layout 등)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에 설명하는 언어입니다.

아래와 같이 글자 색을 바꾸고 싶을 때 CSS를 통하여 변경할 수 있는 것입니다.

글자에 색 변경하기

CSS 기본 문법

/* h1 : 선택자 */
h1 {
  /* 속성 : 값 */
  color: red;
  font-size: 5em;
}

CSS의 기본 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.

  • 선택자 : CSS를 적용하고자 하는 HTML 요소
  • 선언부 : 하나 이상의 선언들은 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({})를 사용하여 전체를 둘러쌉니다.

중괄호 안에는 속성과 값 쌍의 형태를 취하는 하나 이상의 선언이 있어야 합니다. 그리고 속성과 값은 콜론으로 연결됩니다.

CSS 선언 방식

인라인(in-line) 방식

HTML 요소(태그)의 style 속성에 직접 작성하는 방식입니다.

<h1 style="color:blue">레드향</h1>

내장 Style sheet 방식

HTML head 안에 <style>태그 안에 직접 작성하는 방식입니다.

  <head>
    <meta charset="UTF-8" />
    <title>상품 소개 페이지</title>
    <style>
      h1 {
        color: blue;
        font-size: 30px;
      }
    </style>
  </head>

링크 Style sheet 방식

HTML <link>태그를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식입니다.

<head>
    <meta charset="UTF-8" />
    <title>상품 소개 페이지</title>
    <link href="css/register.css" , rel="stylesheet" />
  </head>

참조

 

CSS 란 무엇인가? - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹

developer.mozilla.org

 

🎨 CSS 기본 사용법 & 문법 정리

CSS(Cascading Style Sheets) 란? CSS는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layou

inpa.tistory.com

https://www.youtube.com/watch?v=QC6e80wLrLU&t=1349s

'Style Sheet > CSS' 카테고리의 다른 글

[CSS] 선택자 종류 & 스타일 우선순위과 상속  (0) 2023.12.13
'Style Sheet/CSS' Related Articles more