lunaticholic.log

lunaticholic.log

CodeStates / CSS & Selector

WeWorship TV·2020년 8월 24일

CSS: Cascading Style Sheets

웹 페이지 구성요소의 스타일을 정의하는 언어

How to use CSS?

CSS를 HTML에 적용하는 세가지 방법

inline

HTML의 특정 태그에 직접 style을 적용

<h1 style="color:red; font-style: italic">Hello World<h1>

h1 태그에 style이라는 속성을 부여해서 적용

HTML 내부에 stylesheet 작성

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <style>
      h1 {
        color: red;
        font-style: italic;
      }
      /* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */
    </style>
  </head>
  <body>
    <h1>Hello world</h1>
    <div>Contents here
      <span>Here too!<span>
    </div>
  </body>
</html>

style 태그 이용
보통 head 태그 안에 삽입
태그를 선택하는 규칙에 따라 일괄 적용

HTML 외부에 stylesheet 작성

link 태그 이용

css 확장자로 저장된 stylesheet 파일을 href 속성을 이용해 삽입

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
  <link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
</head>
<body>
  <h1>Hello world</h1>
  <div>Contents here
    <span>Here too!<span>
  </div>
</body>
</html>

myFisrtStyle.css

h1 {
color: red;
font-style: italic;
}
/* 모든 h1 태그에 빨간색, 기울임꼴을 적용 */

CSS Selector

css에서 요소(element)를 선택하는 규칙

note: 태그라는 용어는 시작 및 종료 태그와 같이 마크업(Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미함

CSS Layout

css Layout 관련 문서

자 이제 시작이야 내 꿈을

이전 포스트

CodeStates / HTML

다음 포스트

ubuntu / Slack 설치

0개의 댓글