External 방식을 이용한 외부 CSS파일 호출

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<!-- External 방식 / 외부파일 호출  -->
<link rel="stylesheet" href="cssFile.css">

</head>
<body>

<div id="header"><h1>City Gallery</h1></div>

<div id="nav">
	London<br>
	Paris<br>
	Seoul<br>
</div>

<div id="section">
	<h2>London</h2>
	
	<p>
	런던(London)은 영국의 수도이며 근대 민주주의의 발상지이다. 북해에 이르는 템즈강을 끼고 발달한 런던은 예술, 상업, 교육, 오락, 패션, 의료, 미디어, 전문 서비스 분야의 세계적인 중심지 가운데 한 곳이다. 특히 금융산업은 독보적이다. 다양한 인종과 문화가 공존하고 런던탑, 웨스트민스터 사원, 그리니치 등이 있다. 버킹엄 궁전, 세인트 폴 대성당, 대영박물관이 관광객을 끌어들이고 있다.
	</p>
	
	<h2>Paris</h2>
	
	<p>
	프랑스의 수도이자 가장 인구가 많은 도시로 프랑스 북부 일드프랑스 지방의 중앙에 있다. 센강 중류에 있으며, 행정 구역은 1~20구로 나뉘어 있다. 센강을 기준으로 우안과 좌안으로 나뉜다. 17세기 이후 파리는 유럽의 금융, 외교, 상업, 패션, 과학, 예술 중심지다. 생활비가 싱가포르에 이어 세계에서 두 번째로 비싼 도시다.
	</p>
	
	<h2>Seoul</h2>
	
	<p>
	대한민국의 수도인 서울을 지방자치단체인 특별시로 부르는 명칭이다. 한반도 중앙에 있으며, 한강을 사이에 두고 남북으로 펼쳐져 있다. 북쪽 끝은 도봉구 도봉동, 동쪽 끝은 강동구 상일동, 남쪽 끝은 서초구 원지동, 서쪽 끝은 강서구 오곡동이다. 시청은 중구 을지로1가(태평로1가 31)에 있다.
	</p>
	

</div>

<div id="footer">
City@naver.com
</div>


</body>
</html>

CSS파일

@charset "UTF-8";

#header{
	background-color:black;
	color:white;
	text-align:center;
	padding:5px;
}

#nav{
	line-height:30px;
	background-color:#eeeeee;
	height:300px;
	width:100px;
	float:left;
	padding:5px;
}

#section{
	width:800px;
	float:left;
	padding:10px;
}

#footer{
	background-color:black;
	color:white;
	clear:both;
	text-align:center;
	padding:5px;
}

결과물

저작자표시

'🌍 HTML\CSS' 카테고리의 다른 글

하이퍼 링크 클릭시 동적이미지 추가 - link, hover, visited, active등 (0)	2021.02.25
Body{} 배경에 색과 이미지 추가 (0)	2021.02.25
div이용 internal방식 적용 예제 - 1 (0)	2021.02.25
CSS 이용한 글자크기 조정 (0)	2021.02.25
CSS - inline 방식과 Internal 방식 (0)	2021.02.25

👨‍💻 코딩 도서관

External 방식을 이용한 외부 CSS파일 호출

'🌍 HTML\CSS' 카테고리의 다른 글

댓글

티스토리툴바

External 방식을 이용한 외부 CSS파일 호출

'🌍 HTML\CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바