HTML 및 CSS 기초

파일명의 규칙

html 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<title>제목</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> <!--HTML5 문서라는 선언-->
<html lang="ko"> <!--이 웹페이지는 한국어로 제작됨-->
<head>
	<meta charset="UTF-8" /> <!--한글인코딩-->
	<title>제목</title> <!--문서의 제목(브라우저 상단에 표시)-->
</head>
<body>
	 <!-- 문서의 내용이 들어가는 부분 -->
</body>
</html>

html태그의 특징

자세히보기
<strong> 네이버 </strong>
여는 태그 닫는 태그

<a href="../contents/vision.html" target="_blank">VISION 바로가기</a>
태그 속성명      속성값

CSS 적용방법

html파일 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="css파일경로" />
	<title>제목</title>
</head>
<body>
	<h1>문서의 제목</h1>
	<p class="point">강조할 내용</p>
	<p>일반 내용</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="css파일경로" /> 
	<!--css 파일을 불러오는 명령-->
	<title>제목</title>
</head>
<body>
	<h1>문서의 제목</h1>
	<p class="point">강조할 내용</p>
	<p>일반 내용</p>
</body>
</html>
연결한 css파일 
h1{font-size:50px;color:#3060cd;}
.point{text-decoration:underline;color:#f11883;}
h1{font-size:50px;color:#3060cd;} /*h1태그의 스타일*/
.point{text-decoration:underline;color:#f11883;} /*point라는 class가 갖는스타일*/

css 스타일의 특징

자세히보기
h1 { font-size:50px; color:#3060cd; }
선택자   속성      속성값

반응형 홈페이지

html파일 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />
	<!-- 모바일에서 화면을 최적화하기 위해서 추가하는 태그 -->
	<link rel="stylesheet" type="text/css" href="css파일경로" />
	<title>제목</title>
</head>
<body>
	<ul>
		<li>1번</li>
		<li>2번</li>
		<li>3번</li>
		<li>4번</li>
	</ul>
</body>
</html>
연결은 css파일 
ul li{width:25%;float:left;}
/* 브라우저 사이즈 640px 이하에서만 적용 */
@media screen and (max-width:640px){
	ul li{width:50%;}/* ul li라는 선택자를 반드시 동일하게 해야함.*/
}
/* 브라우저 사이즈 641px 이상에서만 적용 */
@media screen and (min-width:641px){
	ul li{width:25%;}
}
/* 브라우저 사이즈 450px이하 ~ 320px이상 사이에서만 적용 */
@media screen and (min-width:320px) and (max-width:450px){
	ul li{width:100%;float:none;}
}

반응형 홈페이지의 특징, 미디어쿼리

자세히보기
/* 브라우저 사이즈 모든 사이즈에 적용 */
ul li{width:25%;float:left;}
ul li a{font-size:40px;font-weight:600;color:#666;}

/* 브라우저 사이즈 450px 이하일 경우만 적용 */
@media screen and (max-width:450px){
    ul li{width:auto;float:none;}
    ul li a{font-size:25px;}
}

오류 검사

파이어폭스(firefox) 셋팅

메뉴 -> 부가기능 -> 확장프로그램

크롬(chrome) 셋팅

메뉴 -> 도구 -> 확장프로그램 -> 맨 아래에 더 많은 확장프로그램 보기