기본적인 html문법
December 10, 2020
HTML이란?
HTML은 Hyper Text Markup Language의 약자이다.
다른 페이지와 연결된 (Hyper Text)
정보를 전달하기 위해 구조화된 언어(Markup Language)
주석
HTML은 JAVA와는 주석 작성 방법이 다르다.
<!-- 주석 --> 이렇게 작성한다.
DOCTYPE
DOCTYPE은 HTML 문서에서 태그를 정의하기 전에 가장 먼저 선언되어야 한다.
DOCTYPE은 문서의 유형을 정의하기 위해 사용하는 선언문(Document Type Definition/DTD)이다.
선언된 페이지의 HTML 버전이 무엇인지를 웹브라우저에게 알려준다.
doctype은 대소문자를 구분하지 않는다.
선언방법 : <!DOCTYPE HTML>
html태그는 페이지 전체를 감싸는 태그이다.
작성하는 모든 html 코드는 html 태그 안에서 작성되어야 한다.
ROOT 요소라고 부른다.
<!DOCTYPE HTML>
<html>
<html>
<br>페이지 제목, 설명, CSS, 문자집합(인코딩)과 같은 html 페이지에 대한 정보를 작성한다.
브라우저에게 해당 html 파일에 대해 알려줘야하는 정보들을 작성한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>페이지 제목</title>
</head>
</html>이 페이지를 방문한 사용자에게 보여주고자 하는 모든 컨텐츠를 body 안에 넣는다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>페이지 제목</title>
</head>
<body>
<h1>Hello world!</h1>
<h1></h1> : 태그(tag)
Hello world! : content
<h1>Hello world!</h1> : element
</body>
</html>제목 태그
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>결과
h1 태그입니다.
h2 태그입니다.
h3 태그입니다.
h4 태그입니다.
h5 태그입니다.
h6 태그입니다.
문단을 나누는 태그
<p></p> 와 <pre></pre> 태그가 있다.
p태그 는 문단 영역을 나누는 태그이지만, 줄바꿈 처리는 별도로 지정해줘야 한다.
pre태그 는 여러 칸 띄우기 또는 줄바꿈등을 포함해서 입력한 내용 그대로 표현하는 태그이다.
글자 관련 태그
1.일반 글꼴
<strong>2.굵게</strong>
<b>3.굵게(볼드체)</b/>
<em>4.기울이기(이텔릭체)</em>
<mark>5.형광팬 효과</mark>
<u>6.글자에 밑줄 긋기</u>
<small>7.글자를 작게</small>
<sub>8.아래첨자</sub>
<sup>9.윗첨자</sup>
<s>10.취소선</s>
기본 글자에 <sub>아래첨자</sub>나 <sup>윗첨자</sup>를 나타낼 수 있다. 결과
1.일반 글꼴
2.굵게
3.굵게(볼드체)</b/>
4.기울이기(이텔릭체)
5.형광팬 효과
6.글자에 밑줄 긋기
7.글자를 작게
8.아래첨자
9.윗첨자
10.취소선
기본 글자에 아래첨자나 윗첨자를 나타낼 수 있다.
수평선
<hr>를 입력하면 수평선을 넣을 수 있다.
결과
Code
<code></code> 를 사용합니다.
<code>
public static void main(String args){
System.out.println("Hello HTML!");
}
</code>결과
public static void main(String args){
System.out.println("Hello HTML!");
}
title: HTML 표,block,inline excerpt: 표와 block, inline에 대해 알아보자. categories: TIL tog: true tags: [ HTML ] toc : false
표(table)
<table> : 기본적인 표를 생성하는 태그
<th> : 표의 제목 셀을 나타내는 태그
<tr> : 표의 행을 나타내는 태그
<td> : 표의 일반 셀을 나타내는 태그
<caption> : 테이블에 제목을 달 때 사용하는 태그
| 브라우저명 | 제조사 | 홈페이지 |
|---|---|---|
| explore | MS | https://www.microsoft.com |
| edge | MS | https://www.microsoft.com |
| chrome | https://www.google.com | |
| firefox | mozila | https://www.mozila.org |
셀 병합
colspan: 열을 합칠 때 사용
rowspan: 행을 합칠 때 사용
| 사진 | 이름 | ||
| 연락처 | |||
| 주소 | |||
| 자기소개 | |||
테이블 태그의 구조
thead: 제목 컬럼을 작성하는 구역
tbody: 일반 컬럼을 작성하는 구역
tfoot: footer contents를 작성하는 구역
block과 lnline
HTML의 요소들은 block과 inline으로 구분할 수 있다.
block: 한 줄에 오직 하나의 엘리먼트만 위치할 수 있다.
inline 한 줄에 여러 엘리먼트가 있을 수 있다.
div태그(block element)
span태그(inline element)
첫번째 영역
두번째 영역
세번째 영역
![[OnyouJeong]](/static/628a38be316497319759c665bcbd8978/a12fc/profile.png)