코딩 3일째
10월 18일
----------------------------------------------------------------------------
http://www.w3schools.com/
https://necolas.github.io/normalize.css/ 평준화코드, 표준화코드
-> 노멀라이즈 ctrl+s css 폴더에 저장
*업데이트 항상 해줌
https://modernizr.com/
-> 해당 브라우저가 기능을 지원하는지 안 하는지 알려줌
download -> html5shiv 체크 -> build download -> js 폴더 저장
*업데이트 안 해줌
http://www.lipsum.com/
http://hangul.thefron.me/
http://guny.kr/stuff/klorem/ -> html tag 생성
폴더생성, index.html & main.css(서브페이지가 있는 모든 페이지는 메인이 있음)
----------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<tytle>기본문</tytle>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/design.js"></script>
</head>
<body>
본문내용
</body>
</html>
----------------------------------------------------------------------------
*외울 것
css와 자바 불러오기(노멀라이즈, 모더나이저 먼저 불러와야함)
<link rel="stylesheet" href="css/...파일이름..."> ->닫지 않아도 됨. rel 참조!!!이므로 stylesheet 꼭 써야함.
<script src="js/...파일이름..."></script>
<meta charset="utf=8"> 쓰는 것 잊으면 안 됨!!!!!!!!!!!!!!!!
----------------------------------------------------------------------------
웹폰트
1. 영어
https://fonts.google.com/
2. 한국
http://www.typolink.co.kr/
<link rel="stylesheet" href="웹폰트 주소">
----------------------------------------------------------------------------
헤딩 태그 <body>안에 태그
<h1></h1> heading 1
.
.
.
----------------------------------------------------------------------------
제목 태그는 6개까지가능
웹 페이지 만들 때는 일반적으로 h1~h3까지만 사용함.
<!DOCTYPE html>
<html lang="ko">
<head>...</head>
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
</html>
----------------------------------------------------------------------------
margin:0; 다닥다닥 붙어있음 margin:1; 효과주기 전 상태와 거의 같음.
<CSS>
*세미콜론을 꼭 줄 것!
*주석 태그는 ctrl+/
*쓸 때마다 ; 붙이는 것 잊지 말기
margin: 나와 다른 태그 사이의 간격을 조절할 때 0 & 1 !!!!
@charset "utf-8";
/*rest*/
h1 {
margin: ;
}
----------------------------------------------------------------------------
<p></p> paragraph 단락 나누기 // 글자나 이미지와 같은 인라인 요소만 넣어야 한다
<br></br> break line 줄 나누기
<hr></hr> horizontal rule 수평선
<!DOCTYPE html>
<html lang="ko">
<head>...</head>
<meta charset="utf-8">
<body>
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
<p>국회의원은 현행범인인 경우를 제외하고는 회기중 국회의 동의없이 체포 또는 구금되지 아니한다.<br><br><br>국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<hr>
<p>대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
</body>
</html>
----------------------------------------------------------------------------
교재 p.70
html5 = 시멘틱 언어(의미론적 언어)
1. 시각적인 효과만 적용
<b>굵게</b>
<i>기울림</i>
2. 의미론적 적용
<strong>굵게</strong>
<em>기울림</em>
브라우저에 따라 결과가 똑같을 수도, 다를 수도 있음
----------------------------------------------------------------------------
*마지막 질문했던 것!
<br>
<hr>은 닫음 태그 하지 않아도 된다.
*HTML Block and Ilinne Elements 더 읽어보기
Block: div 태그 적용
Iline element: span 태그 적용
css에서 주석처리 할 때 한줄짜리인 경우 //
html에서는 적용되지 않음
margin값을 0으로 주면 head와 h1의 간격이 없어짐
1로 주면 간격이 생김