layout 8
layout 8 들어가기 전
+FileZilla 설치
+DOTHOME 회원가입 후 무료 호스팅 만들기
+Brackets 확장 기능 관리자 synapse 기능 설치 -> server setting 하기
(로그인은 DOTHOME 참고)
** layout 8은 style을 아래와 같이 주석 처리하여 연동(link)
; style을 헤더 안에 쓰지 않고 링크에 씀
<!-- Style -->ex) css 폴더의 style.css 파일 link
<link rel="stylesheet href="css/style.css">reset.css
@charset "utf-8";
/* 여백 초기화 */
body,div,ul,li,dl,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form{margin: 0; padding: 0;}style.css
@charset "utf-8";
/* 레이아웃 */
#wrap {width: 100%; }
#header {width: 100%; height: 325px; background: #111;}
#contents {width: 100%; height: 800px; background: #222; }
#footer {width: 100%; height: 200px; background: #333;}index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="w0n">
<meta name="description" content="웹 표준을 준수한 예제입니다.">
<meta name="keywords" content="웹표준, 웹접근성, 사이트 만들기">
<meta name="generator" content="brackets">
<title>WEBSTANDARD SITE</title>
<!-- CSS STYLE -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
</body>
</html>참고할 내용
<html lang="ko">-> html lang =" " 부분 안에 따로 언어 설정
ex) ko로 해주면 한국어로 설정됨
meta 정보
<meta charset="UTF-8">-> meta charset =" " 부분은 문서에 쓰인 언어
<meta name="author" content="rue">->사이트를 누가 썼는지(사이트는 누가 만들었는지)에 대한 정보
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">-> 사이트에 대한 설명 설정 (사이트 검색할 때 나오는 부분)
<meta name="keywords" content="웹류, 웹표준, 웹접근성, 사이트 만들기">->이 keywords로 누군가가 사이트 만들며 검색할 때 내 사이트 보일 수도 있음
<meta name="generator" content="brakets">->사이트를 만든 툴에 대한 정보
-
emmet 툴 기능 사용하여 div>div3 말고도 #wrap>div3 같이 활용도 가능
-
작업물 확인 방법
http:// 자기 아이디.dothome.co.kr/폴더/파일
ex)http:// 자기 아이디.dothome.co.kr/web/index.html
+페이지 소스 보기페이지 만들다가 반영이 잘 안 되면 f5-> 마우스 오른쪽 클릭 후 검사-> 강력 새로고침
-
css 한글 깨지지 않게 하는 법: @charset "utf-8"; 추가하기
-
기존에 쓰던(이전 layout에서 쓰던) * {margin: 0; padding: 0;} (전체 선택자 쓰는 방법)은 모든 태그들을 선택하는 문제점이 생기기 때문에 딱 필요한 부분만 태그를 지정할 거임
ex) body,div{margin: 0; padding: 0;} -
순서대로 우선순위 처리하기 때문에 중요한 코드부터 우선적으로 쓰기
