HTML 07 HTML 확장

17159 단어 htmlhtml

HTML과 CSS

CSS

  • Cascading Style Sheets
  • HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어

CSS 적용방법

1. 인라인 스타일(Inline style)

  • HTML 요소 내부에 style 속성을 사용
  • 해당 요소에만 적용 가능
<p style="color:green; text-decoration:underline;">
	인라인 스타일을 이용하여 스타일을 적용하였습니다.
	</p>

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

  • HTML 문서의 < head >태그 내에 < style >태그를 사용
  • 해당 HTML 문서에만 스타일을 적용 가능
<head>
	<meta charset="UTF-8">
	<title>HTML CSS</title>
	<style>
		body { background-color: lightyellow; }
		p { color: red; text-decoration: underline; }
	</style>
</head>

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

  • 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록
  • 스타일을 적용할 모든 웹 페이지의 < head >태그 내에 < link >태그를 사용
<head>
	<meta charset="UTF-8">
	<title>HTML CSS</title>
	<link rel="stylesheet" href="/examples/media/expand_style.css">
</head>

4. 스타일 적용의 우선순위

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

인라인 스타일이 적용되었다면 다른 스타일은 무시되고 내부, 외부 스타일의 경우 가장 마지막에 적용된 스타일 시트가 적용된다

5. CSS 선택자(selector)

HTML 요소 선택자

  • HTML 요소의 이름을 직접 사용
p { color: red; font-size: 14px; }

아이디(id) 선택자

<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>
  • #id_value { style properties }
  • CSS를 적용할 대상의 태그에 속성명은 id, 속성값은 큰따옴표로 묶어서 임의로 지정한 후 head태그의 style태그에서 샵#으로 호출한 후 { } 안에 적용
  • 그 아이디 이름을 가지는 요소만 선택
  • 아이디 중복 지양

클래스(class) 선택자

<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>
  • .class_name { style properties }
  • 특정 집단을 클래스(class)라고 부르며, 동일한 클래스 이름을 가지는 요소들을 한 번에 선택할 때 사용

HTML과 자바스크립트

HTML => 웹 내용 작성
CSS => 웹 디자인
JAVSSCRIPT => 웹 동작 구현

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML JS</title>
</head>

<body>

	<h1>자바스크립트를 이용한 문장 삽입</h1>
	<p id="demo"></p>
	<script>
		document.getElementById("demo").innerHTML = "자바스크립트를 배워보죠!";
	</script>

</body>

</html>
  • javscript는 HTML 문서의 < script > 태그 안에서 구현
  • HTML의 script 요소는 해당 웹 페이지에 사용할 스크립트(script)를 정의하기 위해 사용

HTML과 XHTML

GDSC 9주차 WIL
Github로 Laravel 프로젝트 관리 프로세스 [독학 노트]

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage