1. <!DOCTYPE html>
<!DOCTYPE html>- HTML 문서가 HTML5 표준을 따름을 선언하며 브라우저가 표준 모드로 렌더링하도록 유도한다.
- 한 번만 써야하며 대소문자 구분을 하지 않는다.
- 과거 HTML4나 XHTML에서는 DOCTYPE 선언이 복잡했지만 HTML5에서는 단순히 <!DOCTYPE html>만쓰면 된다.
2. <meta charset="UTF-8">
<meta charset="UTF-8">- UTF-8은 유니코드 문자 인코딩 방식 중 하나로 전 세계 대부분의 문자를 표현 가능하다.
- 가변 길이 (1~4바이트)로 문자를 저장한다.
- 브라우저의 인코딩 방식을 지정해 글자가 깨지는 것을 방지한다. head에 넣어두는 것이 좋다!!
3. HTML의 요소
<tag> 내용 </tag>- HTML 요소는 기본적으로 시작 태그, 내용, 끝 태그로 구성된다.
- Empty elements의 경우 내용도 없고 끝 태그도 없을 수 있다. 이러한 태그들은 단독으로 사용되며 <br> 줄바꿈, <img> 이미지 삽입(alt 속성만 필요하다), <hr> 등이 있다.
- html의 요소들은 nested(중첩)될 수 있다. 대표적인 예로 <html>태그 안에 <head>와 <body>가 들어간다. 중첩된 요소들을 활용해서 더 구조화된 HTML 페이지를 만들 수 있다.
- html은 대소문자를 구분하지 않아 <p>와 <P>가 똑같이 동작하기는 하지만 일관성과 가독성을 높이기 위해 소문자 사용을 권장한다.
4. HTML의 속성
- 아래 예시들처럼 요소들은 attrivutes, 속성들을 포함할 수 있다. 속성들은 요소들에 대한 추가 정보를 나타낼 수 있다.
- 속성들은 start tag에서 정의되어야 하며 이름과 값으로 구성된다. (name = "value")
- 아래 코드의 href, alt 같은 것들은 다 속성이다!
HTML의 기본적인 요소들
1. headings
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>- html의 heading은 <h1>부터 <h6>까지 6단계의 제목 태그가 있고 h1은 가장 크고 중요한 제목, h6은 가장 작고 덜 중요한 제목을 나타낸다.
- heading 요소는 문서의 제목이나 섹션 주제를 나타내는 태그이다.
- 검색 엔진과 사용자가 페이지의 내용을 이해하고 탐색하는데 도움을 준다. heading을 통해 페이지를 효율적으로 구성하고 검색엔진을 최적화(SEO)할 수 있다. 따라서 단순히 텍스트를 크게 만들거나 굵게 처리하지 않고 heading을 통해 정의하는 것이 좋다.
- 헤딩 태그의 단계를 통해 페이지의 계층 구조를 명확하게 할 수 있다. 각 페이지에는 하나의 h1만을 사용하는 것이 좋다. 너무 많이 사용하면 SEO( Search Engine Optimization )에 좋지 않다.
<h2 style = "font-size : 60px;"> heading 2, font-size : 60px </h2>- 당연히 heading에서도 style을 통해 여러 스타일 속성들을 지정할 수 있다.
2. Paragraphs
<p> paragraph 1 </p>
<p> paragraph 2 </p>
<p> <strong> paragraph 3 with strong tag </strong></p>- <p>를 통해 문단을 나타냄. 텍스트를 문단 단위로 묶을 때 사용한다.
- <p> 태그 안에 들어간 텍스트는 항상! 자동으로 줄바꿈이 되며 문단간에 기본적인 여백(margin)이 들어간다.
- <p> 태그 안에는 <div>, <h1> 같은 블록 요소를 넣을 수 없다.
- 문법적으로 <p> 태그 안에는 인라인 요소(<strong>, <span> 등)만 포함할 수 있다.
- HTML에서 페이지가 정확히 어떻게 표시될 지 예측하기 어렵다. 화면 크기나 브라우저 창 크기에 따라 페이지의 표시 방식이 달라질 수 있다. 큰 화면으로 한 줄로 표시되던 문장이 작은 화면에서 여러 줄에 걸쳐 표시될 수 있고, 페이지 레이아웃이 달라질 수도 있다.
- HTML 코드에서 여러 개의 공백이나 빈 줄을 추가한다고 해서 웹 페이지에서 공백과 빈 줄이 반영되지 않는다. 웹 브라우저는 여러 공백이나 빈 줄을 하나의 공백으로 처리한다.
<p> paragraph 4 </p>
<p> paragraph 5 </p>
<p>
paragraph 6
</p>
- 따라서 HTML 코드는 내용을 구조화하는 데 주로 사용되고, 실제 디스플레이나 스타일을 설정하려면 CSS로 스타일을 조정하는 것이 필요하다.
- <hr> 태그: <hr> 태그는 html 페이지에서 주제 구분(thematic break)를 위해 사용되며 내용과 끝태그가 없는 태그(empty tag)이다. 일반적으로 수평선으로 화면에 표시되며 페이지 내에서 콘텐츠를 구분하거나 변경을 정의하는데 사용된다.
- <br> 태그: <br> 역시 빈 태그이며 줄바꿈에 사용된다. <br>을 사용해 새로운 <p>를 정의하지 않고도 줄을 바꿀 수 있다.
- pre 요소: 미리 포맷된 텍스트(preformatted text)를 정의하는데 사용된다. <pre> 안의 텍스트들은 고정 폭 글꼴(fixed-width font)로 표시되며 (I와 M이 같은 폭을 가짐) 텍스트의 공백과 줄 바꿈이 그대로 유지된다. (Courier와 비슷한 글꼴로 표시됨)
<pre>
paragraph 7
paragraph 8
paragraph 9
</pre>
- 주로 소스 코드나 명령어를 표시할 때 사용된다. 코드 내 들여쓰기나 공백을 그대로 표시할 수 있다. (프로그래밍 코드 or json 데이터를 웹 페이지에서 보여줄 때)
- 정렬된 데이터나 표 형식을 유지해야 하는 텍스트에도 pre를 사용할 수 있다.
3. Links
<a href = "https://driedmin.tistory.com/"> link 1 </a><br>
<a href = "https://driedmin.tistory.com/" target = "_blank"> link with target blank</a><br>
<a href = "https://driedmin.tistory.com/" title = "link to tistory"> link with title</a><br>
<a href = "../imgs/a.jpg" download> download </a><br>
<a href = "mailto:dried021@gmail.com?subject=제목&body=내용"> mail </a><br>
<a href = "#section1"> id = section1으로 스크롤 이동</a><br>
<a href = "https://driedmin.tistory.com/" >
<img src = "../imgs/b.jpg" alt = "img b" width = "100">
</a><br>
<a href = "tel: +821012345678">전화 걸기</a><br>
<button onclick = "window.location.href = 'https://driedmin.tistory.com/'"> button to website</button>
<button onclick = "document.location = '../imgs/b.jpg'"> button to image</button>- <a> 태그(anchor, 앵커)를 통해 링크(하이퍼링크)를 만들 수 있다.
- 링크를 통해 웹페이지 간 이동이 가능하고, 특정 파일이나 이메일을 열 수 있다.
- href(Hypertext REFerence) 속성에서 이동할 URL을 지정하며 a 태그 안의 텍스트를 사용자가 클릭하면 지정한 URL로 이동하게 된다.
- 편의상 코드 뒤에 <br>을 넣어 줄바꿈을 한다.
- 상대적인 url로 작성하는게 좋다. 예를 들어 위의 코드에서 img source를 현재 html 파일이 속해있는 파일의 상위 주소의 imgs 폴더의 이미지 파일로 지정했다. 만약 절대적인 주소(예를 들어 C:\Workspace\JSPEx\src\main\webapp\imgs\a.jpg)로 지정했을 경우 html 파일의 경로가 바뀌는 경우 a.jpg를 불러오는 모든 코드를 수정해야 한다. 이처럼 상대적인 url(relative url)을 사용해서 도메인이나 경로가 변경되더라도 링크가 작동할 수 있도록 하는 것이 좋다. 웹사이트를 다른 도메인으로 옮기거나 여러 서버에서 호스팅할 때, 상대 url을 사용하면 도메인이나 호스팅 서버를 변경해도 링크가 유지될 수 있으며 상대 url을 사용하면 긴 도메인 주소를 반복하지 않아도되어 코드가 깔끔하고 관리하기 쉬워진다.
1. target: taget 속성에서 링크를 여는 방식을 지정할 수 있다. 기본값은 _self이며 현재 창에서 href의 url이 열어진다. 값이_blank일 경우 새 창(새 탭)에서 열어지며 _parent의 경우 부모프레임에서 열어지고 _top의 경우 최상위 프레임에서 열어진다. _parent와 _top의 경우 여러 프레임으로 나누어진 페이지에서 동작할 수 있다.
2. title로 링크에 마우스를 올렸을 때 툴팁이 표시되게 할 수 있다. 아래 이미지처럼 표시된다.
3. 상위 폴더에 폴더 imgs가 위치해있고 그 안에 a.jpg라는 파일을 넣어두었다. 클릭하면 이미지가 있는 창으로 이동한다.
4. 메일이 어떻게 뜰까 궁금했는데 이렇게 뜬다.
5. id가 section1인 위치로 이동한다. 링크를 사용해 같은 페이지 안에서도 특정 위치로 이동할 수 있다. (이와 같은 북마크의 경우에는 unique한 값인 id를 활용한다.)
6. 이미지를 클릭해서 링크로 이동할 수도 있다. 이때 alt(alternative text) 속성은 이미지가 표시되지 않을 때 대신 보여줄 텍스트를 의미한다. img 태그에서 반드시 추가하는 것이 좋다!!
- html 기본 링크는 파란색이고 밑줄이 그어져 있으며 클릭했다면 보라색으로 변하며 active link의 경우 빨간색으로 변하지, css를 사용하여 스타일을 변경할 수 있다 .
7. Button:
- Links의 스타일 변경하기 : 앞서 언급했듯이 CSS를 사용하여 link의 상태 색을 바꿀 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Tutorial</title>
<style>
a:link {
color : pink;
background-color : transparent;
text-decoration : none;
}
a:visited {
color : PaleVioletRed;
background-color : transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color : transparent;
text-decoration: underline;
}
a:active{
color: yellow;
background-color : transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<a href = https://driedmin.tistory.com/ target = "_blank"> https://driedmin.tistory.com </a><br>
</body>
</html>- link는 기본, visited는 방문한 것, hover는 마우스를 올렸을 경우, active의 경우 이동하는 동안 반짝 노란색이 된다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Tutorial</title>
<style>
a:link, a:visited {
color : white;
background-color : pink;
padding: 15px 25px;
text-align: center;
text-decoration : none;
display : inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<a href = https://driedmin.tistory.com/ target = "_blank"> https://driedmin.tistory.com </a><br>
</body>
</html>- 여기서 a:hover, a:active일 때 스타일 재정의가 일어남. CSS는 상태별로 스타일을 적용하며, 이전 상태의 스타일을 덮어씀.
4. Images
<img src = "../imgs/b.jpg" alt = "img b"><br>
<img src = "../imgs/b.jpg" alt = "img b" width = "100">
<img src = "../imgs/b.jpg" alt = "img b" height = "200">
<img src = "../imgs/b.jpg" alt = "img b" width = "200" height = "400">- 위에서 설명한 것처럼 alternative text를 설정할 수 있다.
- 이미지는 웹 페이지에 직접 삽입되는 것이 아니라 사실 웹 페이지에 연결된 형태로 표시됨. 이미지가 웹 페이지의 파일 자체에 포함되는 것이 아니라, 웹 페이지가 이미지를 표시하도록 연결된다. 이미지 파일 자체는 웹 서버나 다른 위치에 별도로 저장되어 있으며 HTML 문서 안에서 src 속성을 사용하여 그 이미지 파일의 경로를 참조한다.
- 웹 페이지가 로드되면 그 순간 웹 서버로부터 이미지를 가져와 페이지에 삽입하는 것은 브라우저이다. 따라서 이미지가 실제로 웹페이지와 관련하여 같은 위치에 있는지 확인해야 하며, 그렇지 않으면 깨진 링크 아이콘과 대체 텍스트가 표시되게 된다.
- 대체 텍스트는 screen reader를 통해 읽힌다.
- width와 height만 설정한 경우 가로 세로 비율 유지가 자동으로 되고, 각각 값을 지정한다면 비율을 유지하지 않는다.
- img 태그에 width와 height 속성을 직접 추가해 이미지 크기를 지정할 수 있다. 직관적이지만 반응형웹 디자인에 불편할 수 있고, 스타일 시트에서 크기를 변경할 때 우선순위 문제가 발생할 수 있다.
- CSS를 통해 style 속성으로 이미지 크기를 조정하면 html 코드가 더 깔끔해지고 반응형 디자인을 구현할 수 있다.
- 절대경로를 표시해 다른 서버나 웹사이트의 이미지도 표시할 수 있다.
- gif 이미지도 삽입 가능하다.
HTML의 기본적인 속성들
1.style
<tagname style = "property: value;">Content</tagname>- html의 style 속성은 html 요소에 css 스타일을 직접 적용할 때 사용하는 속성이다. 이 속성을 사용해 색상, 글꼴, 크기 등 다양한 스타일을 각 요소에 인라인으로 적용할 수 있다.
- html 태그 안에서 스타일을 직접 지정할 경우 html 코드와 스타일이 섞이기 때문에 유지 보수에 불편하다. CSS 파일을 활용하는 것이 더 효율적이고 코드가 더 깔끔하다.
<p style = "color : blue;"> paragrapht 4 with blue color</p>
- color 외에도 font-size, background-color 등의 여러 style 속성이 있으며 세미콜론;을 통해 여러 스타일을 동시에 적용시킬 수 있다.
| background-color | 배경색 지정 | <body style="background-color:red;"></body> |
| color | 텍스트색 지정 | <p style="color:red;">paragraph</p> |
| font-family | 폰트 지정 | <p style="font-family:courier;">paragraph</p> |
| font-size | 텍스트 크기 지정 | <h1 style="font-size:300%;">heading</h1> |
| text-align | 텍스트 정렬 |
<p style="text-align:center;">paragraph</p>
|
2. lang
<!DOCTYPE html>
<html lang = "en>
...
</html>- 웹 페이지의 언어를 선언할 수 있다.
- <html> 태그에 포함되어야 한다. 검색 엔진이 웹 페이지의 언어를 정확하게 인식할 수 있도록 도와주며 브라우저가 페이지의 텍스트나 인터페이스를 올바른 언어로 표시하고, 언어별 맞춤 설정을 적용하는데 도움을 준다.
- 언어 코드 뒤에 국가 코드를 추가하여 더 명확하게 구분할 수 있다.
- 언어 코드의 예시로는 영어(영국): en-GB, 스페인어(스페인): es-ES, 영어(미국): en-US 등이 있다.
3. title
<a href = "https://driedmin.tistory.com/" title = "link to tistory"> link with title</a><br>- <a> 태그를 설명할 때 언급한 것처럼 어떤 요소에 마우스를 올렸을 때 title 속성이 정의되어 있다면 title로 정의된 텍스트가 툴팁으로 나타난다. title 속성을 통해 추가적인 정보나 설명을 제공할 수 있다.
- 이 때 툴팁은 기본적으로 브라우저의 스타일에 따라 표시되며, 추가적인 CSS로 스타일을 바꾸는 것은 불가능하다.
html에 대한 추가적인 내용
1. ctrl+U키 또는 웹페이지 마우스 우클릭+페이지소스 보기를 통해 HTML 소스 코드를 확인할 수 있다!
마우스 우클릭+검사로 HTML과 CSS를 모두 확인할 수도 있다.
2. html은 대소문자를 구분하지 않아 <p>와 <P>가 똑같이 동작하기는 하지만 일관성과 가독성을 높이기 위해 소문자 사용을 권장한다.
3. 따옴표 사용 권장: 아래 코드도 동작하기는 하지만 attribute value를 따옴표로 감싸는 것이 좋다. 특히 속성 값에 공백이 있거나 특수 문자가 포함된 경우 HTML 문법 오류가 발생할 수 있기 때문에 따옴표로 감싸야 한다.
<a href = https://driedmin.tistory.com/> link 1 </a><br>
<p title = "title with 'single quotes' "> paragrph with title </p>- 위 코드처럼 속성값에 따옴표가 포함될 경우 다른 종류의 따옴표로 감쌀 수 있다.
~ 위 글의 모든 예제 코드 ~ (CSS 제외)
중간의 <br> 들은 <a> 태그를 통한 페이지 내 이동을 보기 위해서 썼습니다
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset="UTF-8">
<title>HTML Tutorial</title>
</head>
<body>
<h1 id = "section1"> heading 1 , id = "section 1" </h1>
<h2 style = "font-size : 60px;"> heading 2, font-size : 60px </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>
<p style = "background-color : blue;"> paragraph 1 </p>
<p style="font-family:courier;"> paragraph 2 </p>
<p> <strong> paragraph 3 with strong tag </strong></p>
<p style = "color : blue;"> paragrapht 4 with blue color</p>
<p style="text-align:center;" > paragraph 4 </p>
<p> paragraph 5 </p>
<p>
paragraph 6
</p>
<br>
<pre>
paragraph 7
paragraph 8
paragraph 9
</pre>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<a href = https://driedmin.tistory.com/> link 1 </a><br>
<a href = "https://driedmin.tistory.com/" target = "_blank"> link with target blank</a><br>
<a href = "https://driedmin.tistory.com/" title = "link to tistory"> link with title</a><br>
<a href = "../imgs/a.jpg" download> download </a><br>
<a href = "mailto:dried021@gmail.com?subject=제목&body=내용"> mail </a><br>
<a href = "#section1"> id = section1으로 스크롤 이동</a><br>
<a href = "https://driedmin.tistory.com/" >
<img src = "../imgs/b.jpg" alt = "img b" width = "100">
</a><br>
<a href = "tel: +821012345678">전화 걸기</a><br>
<hr>
<br>
<img src = "../imgs/b.jpg" alt = "img b"><br>
<img src = "../imgs/b.jpg" alt = "img b" width = "100">
<img src = "../imgs/b.jpg" alt = "img b" height = "200">
<img src = "../imgs/b.jpg" alt = "img b" width = "200" height = "400">
<p title = "title with 'single quotes' "> paragrph with title </p>
</body>
</html>'국비 > HTML' 카테고리의 다른 글
| [HTML Tutorial] 4. HTML Styles CSS (0) | 2025.03.04 |
|---|---|
| [HTML Tutorial] 3. HTML 기초 - Text Formatting, 인용 및 출처 표시, 주석 (1) | 2025.03.04 |
| [HTML Tutorial] 1. HTML 소개 (0) | 2025.02.27 |