CSS 실습2
다른 페이지의 레이아웃도 이전시간에 했던 것과 같은 양식으로 수정하기
기본 => style 태그안에 있는 내용을 복사 붙여넣기 하는 것으로 시작.
실습 1. body 안에있는 h2를 50px로 다 키우고 싶다.
h2{
font-size:50px;
}
작성하고 다 복사 붙여넣기를 해야한다. ==> page수가 엄청 많을 때에는 문제가 된다.
방법 => CSS를 완전히 HTML로부터 분리한다.
htdocs 안에 style.css 라는 파일을 만든다. 확장자 명이 css라는 것에 유의한다.
본래 style 태그 안에 있던 내용을 cut 해서 style.css 안에 paste
cut 한 페이지로 가서 style 태그를 지우고
link라고 치고 tab 키를 누른다.
href 뒷 부분에 http://localhost/style.css 라고 입력하고 저장을 한다.
type="text/css" 로 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8 /">
</head>
<body>
<header>
</header>
<nav>
<ol>
</ol>
</nav>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>
HTML이 link를 만나면 뒤에 있는 내용을 보고 외부에 있는 것을 읽어오려고 한다는 것으로 파악한다.
'웹 프로그래밍' 카테고리의 다른 글
| 웹 페이지에 코드 삽입하기 (0) | 2017.12.18 |
|---|---|
| PHP & JavaScript (0) | 2017.12.18 |
| CSS 실습1 (0) | 2017.12.17 |
| CSS 이론 - float (0) | 2017.12.17 |
| CSS 이론 - 박스모델 (0) | 2017.12.17 |