창 띄우기
※ 생성된 html파일을 크롬 창으로 드래그앤 드롭 한다.
※ 비주얼 코드 사용시, 파일명 뒤에 .html을 붙여준다.
타이틀 태그, 주석 달기
※ 주석 다는 방법
<!-- 주석 내용 -->
※ 타이틀 태그를 주석처리 하면 파일 이름이 창 제목이 된다.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<title>TITLE</title> <!--창 제목-->
</head>
<body>
<!--h1 태그-->
<h1>Hello HTML5</h1> <!--흰색 바탕에 쓰여지는 내용-->
</body>
</html>
스타일 태그
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<title>TITLE</title> <!--창 제목-->
<style>
h1{
color:white;
background-color: aqua;<!--기본적으로는(=스타일 태그 미작성시) 흰 바탕에 검정 글씨로 되어있음.-->
}
</style>
</head>
<body>
<!--h1 태그-->
<h1>Hello HTML5</h1> <!--흰색 바탕에 쓰여지는 내용-->
</body>
</html>
※ 위와 똑같은 출력이지만 파일을 구분해서 표현 할 수도 있다.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<title>TITLE</title> <!--창 제목-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--h1 태그-->
<h1>Hello HTML5</h1> <!--흰색 바탕에 쓰여지는 내용-->
</body>
</html>html파일
h1{
color: white;
background : peru;
}css 파일
자바 스크립트를 활용하여 경고창 띄우기
※ 자바 스크립트에서 주석은
//주석 내용
으로, 앞서 나온 형식과는 차이가 있다.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<title>TITLE</title> <!--창 제목-->
<link rel="stylesheet" href="style.css">
<script>
//경고창 출력
alert('Hello JavaScript..!');
</script>
</head>
<body>
<!--h1 태그-->
<h1>Hello HTML5</h1> <!--흰색 바탕에 쓰여지는 내용-->
</body>
</html>
글자 사이즈 조절
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<!--<title>TITLE</title> --><!--창 제목-->
<link rel="stylesheet" href="style.css">
<script>
//경고창 출력
alert('Hello JavaScript..!');
</script>
</head>
<body>
<!--h1 태그-->
<h1>Hello HTML5</h1> <!--흰색 바탕에 쓰여지는 내용-->
<h2>Hello HTML5</h2>
<h3>Hello HTML5</h3>
<h4>Hello HTML5</h4>
<h5>Hello HTML5</h5>
<h6>Hello HTML5</h6>
</body>
</html>
긴 문장 쓰기 <p>
※ 스페이스바는 하나까지 인식하고, <p></p>안에서 Enter키로 줄을 바꿔도 인식하지 않는다.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<!--<title>TITLE</title> --><!--창 제목-->
<link rel="stylesheet" href="style.css">
<script>
//경고창 출력
alert('Hello JavaScript..!');
</script>
</head>
<body>
<!--h1 태그-->
<h1>제목 글자</h1> <!--흰색 바탕에 쓰여지는 내용-->
<p> The Lorem ipsum
text is derived from sections 1.10.32 and
1.10.33 of Cicero's 'De finibus bonorum et malorum'.
[7][8] The physical source may have been the 1914
Loeb Classical Library edition of De finibus,
where the Latin text, presented on the left-hand
(even) pages, breaks off on page 34 with
"Neque porro quisquam est qui do-" and continues on page 36 with
"lorem ipsum ...", suggesting that the galley type of that page
was mixed up to make the dummy text seen today.</p>
<p>The discovery of the text's origin is attributed to Richard McClintock, a Latin scholar at Hampden–Sydney College. McClintock connected Lorem ipsum to Cicero's writing sometime before 1982 while searching for instances of the Latin word consectetur, which was rarely used in classical literature. McClintock first published his discovery in a 1994 letter to the editor of Before & After magazine, contesting the editor's earlier claim that Lorem ipsum held no meaning.</p>
</body>
</html>
※ <hr> : 수평으로 뻗는 선 생성.
※ <br> : <p></p>안에서의 줄 바꿈.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<!--<title>TITLE</title> --><!--창 제목-->
<link rel="stylesheet" href="style.css">
<script>
//경고창 출력
alert('Hello JavaScript..!');
</script>
</head>
<body>
<!--h1 태그-->
<h1>제목 글자</h1> <!--흰색 바탕에 쓰여지는 내용-->
<hr>
<p> The Lorem ipsum text is <br>derived from sections 1.10.32 and 1.10.33 of Cicero's 'De finibus bonorum et malorum'.[7][8] The physical source may have been the 1914 Loeb Classical Library edition of De finibus, where the Latin text, presented on the left-hand (even) pages, breaks off on page 34 with "Neque porro quisquam est qui do-" and continues on page 36 with "lorem ipsum ...", suggesting that the galley type of that page was mixed up to make the dummy text seen today.</p>
<p>The discovery of the text's origin <br>is attributed to Richard McClintock, a Latin scholar at Hampden–Sydney College. McClintock connected Lorem ipsum to Cicero's writing sometime before 1982 while searching for instances of the Latin word consectetur, which was rarely used in classical literature. McClintock first published his discovery in a 1994 letter to the editor of Before & After magazine, contesting the editor's earlier claim that Lorem ipsum held no meaning.</p>
</body>
</html>
사이트 링크 삽입, 이동
※ 사이트 링크를 넣을 때는 <a 링크>링크 이름</a>를 사용한다.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<!--<title>TITLE</title> --><!--창 제목-->
<link rel="stylesheet" href="style.css">
<script>
//경고창 출력
alert('Hello JavaScript..!');
</script>
</head>
<body>
<!--h1 태그-->
<h1>사이트 이동</h1> <!--흰색 바탕에 쓰여지는 내용-->
<hr>
<a href="https://www.naver.com/">네이버</a>
</body>
</html>
동일한 페이지 내에서 이동
※ #아이디
로 아이디를 지정해준 후, 내용 작성시 해당 아이디의 내용임을 밝히고 작성한다.
아이디를 누르면 아이디에 해당하는 내용이 있는 곳으로 이동된다.
<!DOCTYPE html> <!--html5를 기준으로 하는 문서라는 것을 의미함. 모든 코드의 처음에 들어가게 됨.-->
<html>
<head>
<!--title 태그-->
<title>TITLE</title><!--창 제목-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#alpha">Alpha 부분</a>
<a href="#beta">beta 부분</a>
<hr>
<h1 id="alpha">Alpha</h1>
<p>alpha 입니다. 내용을 작성해주세요.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
<h1 id="beta">Beta</h1>
<p>beta 입니다. 내용을 작성해주세요.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
</body>
</html>