[HTML] HTML - 19.HTML과 CSS — Koras02코딩웹

이번 시간에는 HTML에 스타일을

더해줄 CSS에 대해 알아보도록 하겠습니다.

CSS란?

css란 Cascading Style Sheets의 약자로

HTML 요소들의 각종 미디어에서

어떻게 보이는가를 정의하는 데

사용되는 스타일 시트 언어입니다.

HTML4부터 이러한 모든 서식 설정을

HTML 문서로부터 따로 분리하는 것이

가능하게 되었습니다. 오늘날 대부분의

웹 브라우저들은 무도 CSS를 지원하고

있습니다.

CSS 적용법

HTML 문서에 CSS

스타일을 적용하는 방법은

다음과 같습니다.

인라인 스타일(inline style)
내부 스타일 시트(Internal style sheet)
외부 스타일 시트(External style sheet)

인라인 스타일(Inline style)

인라인 스타일이란 HTML 요소 내부에

style 속성을 사용해 CSS 스타일을

적용하는 방법 중 하나입니다.

이러한 인라인 스타일은 해당

요소에만 스타일을 적용할 수 있습니다.

<p style="color:slateblue; text-decoration:underline;">
   인라인 스타일을 이용하여 스타일을 적용
</p>

내부 스타일 시트(Internal style sheet)

내부 스타일 시트를 이용한 방법으로는

HTML 문서의 <head>태그 내에

이러한 내부 스타일 시트는 해당

HTML 문서에만 스타일을

적용할 수 있습니다.

<style>
    /* <!--  Internal style sheet - 내부 스타일 시트 --> */
    body { background-color: aliceblue;}
    h1 { color: blue; text-decoration: underline;}

</style>

외부 스타일 시트(External style sheet)

외부 스타일 시트를 이용해

웹 사이트 전체 스타일을

하나의 파일에서 변경할 수

있도록 합니다.

스타일을 적용할 모든 웹 페이지의

<head> 태그내에 <link> 태그를

사용해 외부 스타일 시트를

포함시키면 됩니다.

<link rel="stylesheet" href="css/style.css" />

위 예제에서 사용된 css는

다음과 같습니다.

body {
  background-color: magenta;
}

p {
  color: blue;
  text-decoration: underline;
}

스타일 적용의 우선순위

위에서 설명한 스타일 적용 방법들이

혼합되어 사용될 경우에는

최족적으로 적용되는 스타일은

다음 순서에 따라 결정됩니다.

인라인 스타일
내부 / 외부 스타일 시트
웹 브라우저 기본 스타일

예를 들어 인라인 스타일이 적용된

태그에는 내부나 외부 스타일 시트와

상관없이 무조건 인라인 스타일만

적용됩니다. 또한 내부 스타일 시트나

외부 스타일 시트는 가장 마지막에

적용된 스타일 시트가 적용됩니다.

CSS 선택자(selector)

스타일을 적용할 HTML 요소를

선택하는데 사용하는 대표적

선택자는 다음과 같습니다.

HTML 요소 선택자
아이디(id) 선택자
클래스(class) 선택자

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의

이름을 직접 사용해 선택이 가능합니다.

p { color: blue; font-size:24px; margin: 5px; }

아이디 (id) 선택자

아이디 선택자는 CSS를 적용할

대상으로 특정 요소를 선택할때

사용합니다.

이 선택자로는 웹 페이지에

포함된 여러 요소 중에서

특정 아이디 이름을 가지는

요소만을 선택해 줍니다.

<style>
    #para {
       color: mediumseagreen;
       text-decoration: line-through;
    }
</style>
...
<p id="para">아이디 선택자의 예</p>

HTML과 CSS에서는 하나의 웹 페이지에

속하는 여러 요소에 같은 아이디 이름을

사용해도 별 문제없이 작동합니다.

하지만 이렇게 중복된 아이디를

자바스크립트에서 작업하게 되면

오류가 발생하는데 따라서 되도록

하나의 웹 페이지에 속하는 요소에

다른 아이디 이름을 사용하거나

클래스를 사용하는 사용하는

것이 좋습니다.

클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를

한 번에 선택할 때 사용합니다.

이러한 특정 집단을 클래스(class)

라고 하고 동일한 클래스 이름을

가지는 요소들을 모두

선택해 줍니다.

<style>
 .paras {
    color: lime;
    text-decoration: overline;
  }
</style>
...
<p class="paras">클래스 선택자 부분</p>
<p>클래스 선택자를 이용해 적용한 HTML 요소 스타일 한번에 선택할 수 있다</p>
<p class="paras">클래스 선택자 부분</p>

참고 자료

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

GitHub - HTML5-STR/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to HTML5-STR/html-study development by creating an account on GitHub.

github.com

'프론트 엔드 > HTML' 카테고리의 다른 글

[HTML] HTML - 20.HTML과 자바스크립트 (0)	2023.01.25
[HTML] HTML - 18.Input 요소의 속성 (0)	2023.01.20
[HTML] HTML - 17.Form요소 (1)	2023.01.19

CSS 적용법

참고 자료

'프론트 엔드 > HTML' 카테고리의 다른 글

티스토리툴바