기본 문법/스타일 방법

CSS - [CSS 기본 문법]

선택자(대상) {
  /* 대상 선택자, { 선언구간 시작 */
  속성1: 값; /* ; 선언문 구분 */
  속성2: 값2; /* : 속성, 값 구분 */
} /* 선언구간 종료 */
<html>
    <head>
        <style type="text/css"> /* MIME type 지정, 하지만 html 5 에서는 생략 가능 */
          h1 {
              color: deeppink;
              font-size: 2em;
          }
        </style>
    </head>
    <body>
        <h1>Embed Style Sheet</h1>
    </body>
</html>

  • css는 html 문서 내에 포함시킬 수 있다

  • <head> 내부에서만 사용 가능하고 <style> 태그를 사용해서 css코드 넣기

  • <text/css> MIME type 지정, 하지만 html 5 에서는 생략 가능

CSS - [CSS 스타일 방법]

  • CSS 코드를 HTML 문서에 적용하여 스타일링하는 3가지 방법

    • 인라인 스타일 (inline style)

    • 인터널 스타일 (iternal style)

    • 익스터널 스타일 (external style)

인라인 스타일

  • 요소에 직접 스타일링을 추가하는 방법

    • 요소 내부에 style 속성을 이용하여 css 코드 작성

    <html>
  <head>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <h1>Embed Style Sheet</h1>
  </body>
</html>
    <body>
<section style="color: #903000">
<h1 style="color: tan">
    <abbr
    style="cursor: help; text-decoration: none"
    </abbr>
 언어란?
</h1>
</body>

인터널 스타일

  • CSS 코드를 HTML 문서에 포함

<head>
  <style>
    section {
      color: #903000;
    }
    h1 {
      color: tan;
    }
    abbr {
      cursor: help;
      text-decoration: none;
    }
  </style>
</head>

★익스터널 스타일★

  • CSS 파일을 HTML 문서에 연결

    = Link 요소를 사용하여 외부에 있는 css 파일을 적용하는 방법

<head>
  <link rel="stylesheet" href="css/style.css" />
</head>
section {
  color: #903000;
}
h1 {
  color: tan;
}
abbr {
  cursor: help;
  text-decoration: none;
}

<link> 요소

  • 외부의 있는 문서를 연결할 때 사용

  • <head> 태그 안에 사용해야 한다. (중복된 <link>사용 가능)

  • <link>``</link> 형식이 아닌 <link /> 형식으로 태그를 닫는다.

    • <rel>속성

      • 외부에서 불러오는 문서와의 관계를 설명하는 속성이다.

        <link rel="stylesheet"> : 스타일 시트로써 문서를 불러오겠다는 의미다.

    • <type> 속성

      • link를 통해 연결된 문서의 MIME 유형을 나타낸다.

        • css 파일일 경우 type="text/css"

        • js 파일일 경우 type="text/javascript"

        • xml 파일일 경우 type="application/txml"

      • MIME type이란?

        • 클라이언트에게 전송된 문서의 올바른 MIME 타입을 전송하도록 설정하는 것. 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 대게 MIME 타입을 사용한다.

        • MIME 타입은 대소문자를 구분하지는 않지만 대부분 소문자로 쓴다.

        • MIME 유형 : https://www.sitepoint.com/mime-types-complete-list/

    • <href> 속성

      • 연결될 문서를 불러오는 속성

      • 상대경로와 절대경로

        • 상대경로 : 현재 머물고 있는 페이지에서 부터 시작해 경로를 설정하는 것

        • 절대경로 : 불러오려는 페이지를 가지고 있는 최상위 경로부터 시작해 설정하는 것

        • 예) 아래의 위치에 css와 html이 저장되어 있다고 가정한다면

          • /home/nana/one/style.css

            /home/nana/three/index.html

          • index.html의 위치에서 상대 경로로 css 파일을 불러올 때 : href="./one/style.css"

          • index.html의 위치에서 절대 경로로 css 파일을 불러올 때 : href="/home/nana/one/style.css"

PreviousCSS란?NextCheck box

Last updated