HTML5


- 태그라는 명령어로 구성되어 있다.

예시) <HTML> ~ </HTML>
<HTML> : 시작태그 </HTML> : 끝(종료) 태그

- 대부분의 태그는 시작과 종료라는 쌍으로 구성되어 있다.

예시) <태그>내용</태그> 혹은 <요소>내용</요소>

- 대소문자는 구분은 안 하지만, 권장은 소문자로 코딩한다.
- 태그는 부모와 자식관계 구조를 갖는다. 
- html 구조는 <html> ~ </html> 구성된다.
- html 태그는 2개의 자식 태그를 갖는다.
<head>~</head> 
<body>~</body>
-<태그 속성 = "값"> ~ </태그>
- 태그는 줄 바꿈기능이 있는 것
- 줄바꿈 기능이 없는 것 : <a>

HTML 시작 실습
<!DOCTYPE html>
<html>
<head>
<title>HTML5를 학습하자.</title>
</head>
<body>

<h1>웹개발자 과정</h1>
<p>웹개발 입문을 환영합니다.</p>

</body>
</html>

 

HTML5를 학습하자.

웹개발자 과정

웹개발 입문을 환영합니다.

 

 

문서 유형 선언


<!DOCTYPE html> : 태그를 html5 버전으로 작성하는 의미. 첫줄에 코딩 작성.

파일 확장자 : *.html

visual studio code 툴 : emmet 기능이 내장되어 있다. (자동완성기능)

 

실습 코드 - basic2.html
<!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>
    <h1>대한민국</h1>
    <h2>대한민국</h2>
    <h3>대한민국</h3>
    <h4>대한민국</h4>
    <h5>대한민국</h5>
    <h6>대한민국</h6>
</body>
</html>

 

Document

대한민국

대한민국

대한민국

대한민국

대한민국
대한민국

 

실습 코드 - basic3.html

 

<!DOCTYPE html>
<head>
</head>
<body>
    <a href = "http://www.naver.com">네이버</a>
    <a href = "http://www.google.com">구글</a>
</body>

</html>

 

네이버 구글

 

실습 - basic4.html

 

<!DOCTYPE html>
<html>
<head> 
</head>
<body>
    <p>이미지 화면에 출력하기 - 크기 제어.</p>
    <img src="/image/sample.jpg" alt = "이미지" width="250" height="300">
</body>
</html>

 

이미지 화면에 출력하기 - 크기 제어.

이미지

 

html 요소와 속성

 

<br> 줄바꿈

href : 링크 속성
src : 이미지 속성
width : 너비 속성
height : 높이 속성
alt : 대체 텍스트 속성
style : 색상, 글꼴, 크기 등과 같은 요소에 스타일을 추가하는 데 사용
lang : 언어 선언 속성

속성값을 묶는 큰따옴표는 html에서 가장 일반적이지만
작음 따옴표도 사용할 수 있다.
일부 상황에서는 속성 값 자체에 큰따옴표가 포함되어 있으면 작은 따옴표를 사용해야 합니다.

<hr> : 수평선 생성 태그

html 텍스트 형식

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p> //굵게
<p><i>This text is italic</i></p> //기울기
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p> //sub 아래 첨자, sup 위 첨자

</body>
</html>

주석 <!-- abc -->

 

실습 - basic5.html
<!DOCTYPE html>
<html>
<head>
   
</head>
<body>
    가<br>
    나<br>
    다<br>
    라<br>
</body>
</html>

 

가
나
다
라

 

실습 - basic6.html
<!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 style="background-color: aqua;">
    <h1 style="font-size: 16pt;">웹 개발자</h1>
    <hr>
    <h6 style = "font-size: 50pt;">웹 개발자</h6>
    <hr>
    <p style = "font-size: 30pt;">웹 개발자</p>
    <hr>
    <span style = "background-color: aqua;">웹 개발자</span>
    스프링
</body>
</html>
저작자표시 비영리 변경금지

'Devlopment > HTML & CSS' 카테고리의 다른 글

[HTML] Form 태그 (2) - 전화번호 입력, 회원정보 실습  (2) 2024.01.04
[HTML] Form 태그 (1) - 이론 및 간단한 예제 실습  (0) 2024.01.04
[HTML] Tables <table> 태그, Ifames 태그 이론 및 실습  (2) 2024.01.04
[HTML] Image/Image Map 이론 및 실습  (0) 2024.01.04
[HTML] Links <a> 링크 태그 이론 설명 및 실습 예제  (1) 2024.01.04

티스토리툴바