-
728x90반응형
HTML 과 CSS
CSS란?
CSS란 Cascading Style Sheets의 약자이다.
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.
HTML4부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해 졌다.
오늘날 대부분의 웹브라우저들은 모두 CSS를 지원하고 있다.
CSS 적용 방법
HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같다.
- 인라인 스타일(Inline style)
- 내부 스타일 시트(Internal style sheet)
- 외부 스타일 시트(External style sheet)
인라인 스타일 (Inline style)
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.
예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML CSS</title> </head> <body> <h1>인라인 스타일</h1> <p style="color:green; text-decoration:underline;"> 인라인 스타일을 이용하여 스타일을 적용하였습니다. </p> </body> </html>실행결과 :
인라인 스타일
인라인 스타일을 이용하여 스타일을 적용하였습니다.
내부 스타일 시트 (Internal style sheet)
내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정한다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.
예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML CSS</title> <style> body { background-color: lightyellow; } p { color: red; text-decoration: underline; } </style> </head> <body> <h1>내부 스타일 시트</h1> <p>내부 스타일 시트를 이용하여 스타일을 적용하였습니다.</p> </body> </html>실행결과 :
내부 스타일 시트
내부 스타일 시트를 이용하여 스타일을 적용하였습니다.외부 스타일 시트 (External style sheet)
외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
스타일을 적용할 모든 웹 페이지의 <head>태그 내에<link>태그를 사용하여 외부 스타일 시트를 포함하면 된다.
예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML CSS</title> <link rel="stylesheet" href="/examples/media/expand_style.css"> </head> <body> <h1>외부 스타일 시트</h1> <p>외부 스타일 시트를 이용하여 스타일을 적용하였습니다.</p> </body> </html>실행결과 :
외부 스타일 시트
외부 스타일 시트를 이용하여 스타일을 적용하였습니다.위의 예제에서 사용된 CSS 파일을 내용
body { background-color: lightyellow; } p { color: red; text-decoration: underline; }스타일 적용의 우선순위
위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.
- 인라인 스타일
- 내부/외부 스타일 시트
- 웹 브라우저 기본 스타일
예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다.또한, 내부 스타일 시트와 외부 스트일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.CSS 선택자 (selector)
스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자는 다음과 같다.
- HTML 요소 선택자
- 아이디(id) 선택자
- 클래스(class) 선택자
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.
p { color : red; font-size : 14px; }
아이디 (ID) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.
예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML CSS</title> <style> #para { color: teal; text-decoration: line-through; } </style> </head> <body> <h1>아이디 선택자를 이용한 선택</h1> <p id="para">이 부분에 스타일을 적용합니다.</p> <p>아이디 선택자를 이용하여 스타일을 적용할 특정 HTML 요소를 선택할 수 있습니다.</p> </body> </html>실행결과 :
아이디 선택자를 이용한 선택
이 부분에 스타일을 적용합니다.
아이디 선택자를 이용하여 스타일을 적용할 특정 HTML 요소를 선택할 수 있습니다.
HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.
하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다.
따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.
클래스 (class) 선택자
클래스 선택자는 특정 집단의 요소를 한번에 선택할 때 사용한다.
이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 준다.
예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>HTML CSS</title> <style> .paras { color: lime; text-decoration: overline; } </style> </head> <body> <h1>클래스 선택자를 이용한 선택</h1> <p class="paras">이 부분에 스타일을 적용합니다.</p> <p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p> <p class="paras">이 부분에도 같은 스타일을 적용합니다.</p> </body> </html>실행결과 :
클래스 선택자를 이용한 선택
이 부분에 스타일을 적용합니다.
클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.
이 부분에도 같은 스타일을 적용합니다.
728x90반응형'Mark Up > Html' 카테고리의 다른 글
HTML 과 자바스크립트 (0) 2018.10.05 Input 요소의 속성 (0) 2018.10.05 form 요소(feat.input 요소) (0) 2018.10.04 레이아웃(HTML5 추가 의미요소) (0) 2018.10.04 블록과 인라인 (0) 2018.10.04
