끄적이는 기록일지

9-1. [파이썬] HTML 기본문법 - 태그(tag) 본문

파이썬

9-1. [파이썬] HTML 기본문법 - 태그(tag)

시시나브로 2021. 7. 2. 17:27
728x90
 

9. [파이썬] HTML 기본문법

8. [파이썬] 디렉토리와 파일관리(SyntaxError 오류) 7. [파이썬] 사용자정의 함수와 패키지 모듈 6. [파이썬] 조건문과 반복문 - 반복문(2) 6. [파이썬] 조건문과 반복문 - 조건문(1) 5. [파이썬] 데이터 유

kcy51156.tistory.com

HTML 태그

- html 코드 작성할 땐 Notepad++에디터를 사용하였다.

1. 텍스트 관련된 주요 태그 

1) <hn> : 주로 큰 글씨로 제목 강조할 때 사용된다.(텍스트 크기 지정)

 

- 1~6까지 있으며, 숫자가 커질수록 크기는 작아진다.

 

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>hn 태그 예제</title></head>
	<body>
		<h1>h1크기</h1>
		<h6>h6크기</h6>
	</body>
</html>

 

 

2) <p> : 문단 만들 때 사용

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>p 태그 예제</title></head>
	<body>
		<p>p 태그는 문단을 만들 때 사용한다.
		<xmp></p>(닫는 태그)이전에 새로운 <p>태그를 사용하면</xmp>
		자동으로 닫힌다.
		</p>		
	</body>
</html>

 

- <xmp>태그는 문자를 그대로 출력할뿐만 아니라 태그(<p>)도 그대로 출력한다.

 

 

4) <span> : 요소 자체로는 아무것도 나타내지 않고 inline 요소를 묶을 때 주로 사용한다. 강조할 때 사용

 

- <br> : 줄바꿈 태그

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>span 태그 예제</title></head>
	<body>
		<h1>긴급속보!!</h1>
		<p>오늘만 사과 1박스를
		<strong><span style = "color:red">1만원</span></strong>
		에 팔아요~! <br>얼른 오세요~~</p>		
	</body>
</html>

 

2. 다양한 목록 만드는 태그

1) <ol> : 목록에 순서가 있는 태그

- start : 시작값을 의미. 어디서부터 시작할 것인지 정한다.

 

2. <ul> : 목록에 순서가 없는 태그

- <ol>, <ul>태그 type 속성

 

type 속성 설명
1 숫자 1,2,3,...
A 알파벳 대문자 A,B,C,...
a 알파벳 소문자 a,b,c,...
i 로마숫자 소문자 ⅰ,ⅱ,ⅲ, ...
I 로마숫자 대문자 Ⅰ,Ⅱ,Ⅲ,...

 

 

3) <li> : ul 태그와 ol 태그의 내부에서 사용되는 태그. 줄바꿈과 들여쓰기 기능이 있다. 

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>목록 만드는 태그 예제</title></head>
	<body>
	<ul type = "square">
		<li>대항목1</li>
		<li type = "circle">대항목2</li>
		<li>대항목3</li>
			<ul>
			<li>중항목1</li>
			<li>중항목2</li>
			<li>중항목3</li>
				<ol type = "a" start = "3">
				<li>소항목1</li>
				<li>소항목2</li>
				</ol>
			</ul>
	</ul>
	</body>
</html>

 

3. 표 만들기

1) 테이블 구성 요소

태그 설명
<table> 테이블을 만드는 태그
<th> 테이블의 헤더부분을 만드는 태그
<tr> 테이블의 행을 만드는 태그
<td> 테이블의 열을 만드는 태그

 

2) 예제

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>테이블 만드는 태그 예제</title></head>
	<body>
		<table border = "1"> <!--border은 테두리 굵기-->
			<th>테이블</th>
			<th>만들기</th>
			<tr>             <!--첫 번째 행-->
				<td>첫 번째 칸</td>
				<td>두 번째 칸</td>
			</tr>
			<tr>             <!--두 번째 행-->
				<td>첫 번째 칸</td>
				<td>두 번째 칸</td>
			</tr>
		</table>
	</body>
</html>

4. 본문에 하이퍼링크 넣기 <a href>

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>하이퍼링크 삽입 예제</title></head>
	<body>
		<p>블로그가 유용하셨나요? <br>유용하셨다면 
		<a href = "https://kcy51156.tistory.com/">여기로 이동하기</a>
		</p>
	</body>
</html>

 

5. 본문영역 지정하기 : <div> 태그

- 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용한다.

 

- CSS를 활용하여 스타일을 적용할 수 있다.

 

- soild 는 테두리선 종류 중 하나이다.

(이외에도 solid, dotted, dashed, double, groove, inset, outset, ridge 가 있다.)

<!DOCTYPE html>
<html lang = "ko"> 
	<meta charest = "utf-8">
	<head><title>하이퍼링크 삽입 예제</title></head>
	<body>
		<div style = "border:2px solid #001;width:300px;height:100px">
			첫 번째 영역
			<div style = "border:0.5px solid #006;width:250px;height:50px">
				첫 번째 div안에 있는 또 다른 div영역</div>
		</div><br>
			<div style = "border:2px solid #001;width:300px;height:100px">
				두 번째 영역
			<div style = "border:0.5px solid #006;width:250px;height:50px">
				두 번째 div안에 있는 또 다른 div영역</div>
		</div>
	</body>
</html>

 

 

 

728x90

'파이썬' 카테고리의 다른 글

11. [파이썬] 웹데이터 수집 자동화 - 웹 크롤링(2)  (0) 2021.07.06
11. [파이썬] 웹데이터 수집 자동화 - 웹크롤링(크롬버전 확인, 크롬드라이버 설치)(1)  (0) 2021.07.03
10. [파이썬] 예외처리 사용하기  (0) 2021.07.02
9. [파이썬] HTML 기본문법  (0) 2021.07.02
8. [파이썬] 디렉토리와 파일관리(SyntaxError 오류)  (0) 2021.07.02
'파이썬' Related Articles more
Comments