※ 이 글을 쓰는 사람은 SW 비전공자입니다.
※ 개인 공부를 위해 정리하는 글이며, 작성한 코드들은 효율성, 깔끔함(?) 등과는 거리가 멀 수 있습니다.
1편 : 2021.04.11 - [코딩/Web & Java Script] - [웹코딩]Front end 및 Back end 개념, 공부 방향
2편 : 2021.04.12 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 1 : 기초
3편 : 2021.04.19 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 2 : 문단, 정렬, 이미지
4편 : 2021.04.20 - [코딩/Web & Java Script] - [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table
참고 : 2021.04.22 - [코딩/Web & Java Script] - [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법
오늘은 저번 HTML 1편 포스팅에 이어 자주 쓰이는 태그들에 대해 추가 정리하였다.
1. p 태그 : 단락 구분
-. p 태그는 paragraph의 줄임말이다.
-. p는 단락을 구분할 때 사용하는 태그이다.
-. 줄간격은 일정하게 고정 된다.
-. p 태그는 css를 통해 줄바꿈 간격을 조절할 수도 있다.(이 포스팅에서는 다루지 않음)
<코드>
<p>연습문구1</p>
<p>연습문구2</p>
2. br 태그 : 줄바꿈
-. A forced line break.
-. 줄바꿈을 하는 태그이다. p 태그와 달리 br은 closing 태그(닫는 태그)를 넣지 않아도 된다.
-. br 개수에 따라 줄바꿈의 간격을 조절할 수 있다.
<코드>
<br>
연습문구1
<br>
<br>
<br>
연습문구2
3. em 태그와 strong 태그 : 기울임꼴, 강조
-. em 태그는 텍스트를 기울임꼴로 보여준다.
-. strong 은 텍스트를 강조한다.(굵게)
<코드>
<body>
<p><em>연습문구1</em></p>
<strong>연습문구2</strong>
</body>
4. ul, li, ol
-. ul : 비정렬 목록
-. ol : 정렬 목록
-. li : 목록의 항목 , li는 ul과 ol 사이에 있어야 한다.
아래 HTML을 보며 이해해보자.
1) ul 을 사용한 경우
<코드>
<ul>
<li>안녕하세요.</li>
<li>투손플레이스 티스토리입니다.</li>
<li>Two Hands Place</li>
<li>Welcome to the my tistory!!</li>
<li>Nice to meet you</li>
</ul>
2) ol 을 사용하는 경우
<코드>
<ol>
<li>안녕하세요.</li>
<li>투손플레이스 티스토리입니다.</li>
<li>Two Hands Place</li>
<li>Welcome to the my tistory!!</li>
<li>Nice to meet you</li>
</ol>
5. img src 태그 : 웹에 이미지 포함
-. 사용법 : img src = "파일명"
-. .html 파일과 같은 폴더에 있는 'tulip.jpg' 파일을 불러옴.
<코드>
<img src="tulip.jpg">
-. image의 크기를 지정하려면 아래와 같이 width, height 사용
<코드>
<img src="tulip.jpg", width=1000, height=1000>
-. image에 마우스를 갔다댔을 때 나오는 설명은 title 사용(예시는 생략>
-. image를 못불러오는 경우(못찾는 경우) alt를 통해 대체 텍스트 출력 가능
<코드>
<img src="1.jpg", alt="이미지를 찾을 수 없어요">
※ 참고링크
1. 생활코딩 HTML 수업편
www.opentutorials.org/course/2039
HTML 수업 - 생활코딩
수업의 목적 본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다. 선행학습 본 수업을 효과적으로 수행하기 위해서는 웹애플리
www.opentutorials.org
2. developer.mozilla.org/ko/docs/Web/HTML/Element/li
- - HTML: Hypertext Markup Language | MDN developer.mozilla.org
- HTML 요소는 목록의 항목을 나타냅니다. 반드시 정렬 목록( ), 비정렬 목록( , 혹은 메뉴( ) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫
'코딩 > Web' 카테고리의 다른 글
| [웹코딩] HTML(Hyper Text Markup Language) - 4 : form, textarea (0) | 2021.04.25 |
|---|---|
| [웹코딩] VS Code의 HTML 파일 개발 환경 설정 방법 (0) | 2021.04.22 |
| [웹코딩] HTML(Hyper Text Markup Language) - 3 : Table (1) | 2021.04.20 |
| [웹코딩] HTML(Hyper Text Markup Language) - 1 : 기초 (1) | 2021.04.12 |
| [웹코딩]Front end 및 Back end 개념, 공부 방향 (0) | 2021.04.11 |
