-
웹 페이지 구성 3요소
-
웹 페이지의 구조, 내용-HTML 태그
-
모양-CSS
-
행동 및 응용 프로그램-Javascript
-
HTML은 텍스트 뿐만 아니라 이미지, 링크 등을 자유롭게 표현가능
-
비주얼 스튜디오 코드에서 Live Server를 마켓플레이스에서 다운로드
-
작업하려는 컴퓨터 공간에 HTML 폴더를 만들고 VSC에서 새파일 만들기-다른 이름으로 저장-문서 확장자는 HTML 설정
-
편집기에서 ! 치고 키보드 TAB 누르면 (에밋 기능) 문서 포맷이 자동완성된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫번째 웹프로그램</title>
</head>
<body>
<h1>시간이란</h1>
<p>내일 죽을 것 처럼 오늘을 살고<br>
영원히 잘 것처럼 내일을 꿈꾸어라.</p>
</body>
</html>
-
viewport:자동으로 휴대폰이나 태블릿 사이즈에 맞춰서 웹사이트를 출력
-
width=device-width: 디바이스에 맞춰 가로사이즈를 변환
-
이미지 삽입
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫번째 웹프로그램</title>
</head>
<body>
<h1>시간이란</h1>
<p>내일 죽을 것 처럼 오늘을 살고<br>
영원히 잘 것처럼 내일을 꿈꾸어라.</p>
</body>
</html>
-
특수기호 입력하기: 엔티티 코드 사용.
-
웹 문서에서 사용할 수 있는 특수 기호 제공
<h1>& 웹 개발 기초＆</h1>
-
<hr>과 <blockquote>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제주 이색 여행지</h1>
<h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>
<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.</p>
<p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데,
국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.</p>
<hr>
<blockquote>성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로
1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다.
이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)
</blockquote>
</body>
</html>
-
<pre>는 들여쓰기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>로컬 스토리지(Local Storage)를 저장하는 함수
로컬 스토리지(Local Storage)를 저장하는 함수 : </h2>
<pre>
function savetheLocal(){
var second = document.getElementById("second");
var thevalue = second.value;
localStorage.setItem(1, thevalue);
gettheLocal();
}
</pre>
</body>
</html>
'Learning > HTML&JavaScript' 카테고리의 다른 글
| 폼 관련 태그들 (0) | 2020.07.14 |
|---|---|
| 이미지와 하이퍼링크 (0) | 2020.07.14 |
| 표 제목(<caption>, <figure>, <figcaption>), 표 구조 정의(<thead>, <tbody>, <tfoot>), 열 스타일(<col>, <colgroup>) (0) | 2020.07.07 |
| 목록태그(<ul>,<li>,<ol>), 설명목록(<dl>,<dt>,<dd>), 표를 만드는 태그(<table>,<tr>,<td>,<colspan>) (0) | 2020.07.07 |
| <strong>, <br>, <q>, <q cite>, <mark>, <span>, <div>, <ruby>, <rt> (0) | 2020.07.07 |
