[HTML/CSS] HTML5/CSS 기본 태그와 CSS 정리

IT/HTML\CSS / / 2021. 3. 3.
반응형

@notepad_jj2

츄르사려고 코딩하는 코집사입니다.

1. 태그

- HTML 페이지에서 객체를 만들 때 사용하는 것

- 아래의 코드에서 <html>, <head>, <title>, <body> 들이 다 태그가 된다.

- body태그에서 <h1> 태그 안에 title = "a"에서 a는 속성값, title은 속성 이름이 된다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CodingCat</title>
	</head>
	<body>
    <h1 title="a">Hello</h1>
	</body>
</html>

 

2. head 태그 내부에 넣을 수 있는 태그

태그 이름 설명
meta 웹 페이지에 추가 정보를 전달
title 웹 페이지의 제목
script 웹 페이지에 스크립트 추가
link 웹 페이지에 다른 파일을 추가
style 웹 페이지에 스타일시트 추가
base 웹 페이지의 기본 경로 지정

 

1) meta, title 태그

<head>
	<meta charset="UTF-8">
	<title>CodingCat</title>
</head>

 

2) link 태그

<head>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>

 

3) style 태그

<head>
	<style tpye="text/css">
</head>

 

3. 글자 태그

- h1 > h2 > h3 > h4 > h5 > h6

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coding Cat</title>
	</head>
	
	<body>
		<h1>코딩하는 집사</h1>
		<h2>코딩하는 집사</h2>
		<h3>코딩하는 집사</h3>
		<h4>코딩하는 집사</h4>
		<h5>코딩하는 집사</h5>
		<h6>코딩하는 집사</h6>
	</body>
	
</html>

결과

 

1) 수평 줄 태그

- 수평 줄 태그는 <hr>을 사용하면 된다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coding Cat</title>
	</head>
	
	<body>
		<h1>코딩하는 집사</h1>
		<hr>
		<h2>코딩하는 집사</h2>
		<hr>
		<h3>코딩하는 집사</h3>
		<hr>
		<h4>코딩하는 집사</h4>
		<hr>
		<h5>코딩하는 집사</h5>
		<hr>
		<h6>코딩하는 집사</h6>
	</body>
	
</html>

 

- <hr> 태그의 색변경은 CSS 선택자에서 background-color 나 background를 사용한다.

hr {background:orange;border:0px;height:5px;}

 

2) 앵커 태그

- 앵커 태그는 a로 사용이 된다.

- 앵커 태그의 href 속성을 사용하여 이동하고자 하는 웹 페이지 지정

- 빈 앵커 태그를 사용하려면 href에 #을 넣어주면 된다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coding Cat</title>
	</head>
	
	<body>
		<a id="yong" href="#"></a><h1>코딩하는 집사</h1></a>
	</body>
	
</html>

 

4. 목록 태그

1) ul

- 순서가 없는 목록 태그

 

2) ol

- 순서가 있는 목록 태그

 

3) li

- 목록 요소

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coding Cat</title>
	</head>
	
	<body>
		<h3>순서가 없는 목록 태그</h3>
		<ul>
		<li>코딩</li>
		<li>코딩</li>
		<li>코딩</li>
		</ul>
		
		<h3>순서가 있는 목록 태그</h3>
		<ol>
		<li>코딩</li>
		<li>코딩</li>
		<li>코딩</li>
		</ol>
	</body>
	
</html>

 

5. 테이블 태그

- 표를 만들 때 table 태그를 사용한다.

- 요즘은 div로 테이블을 만든다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Coding Cat</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<th>이름</th>
				<th>나이</th>
			</tr>
			<tr>
				<td>A</td>
				<td>28</td>
			</tr>
			<tr>
				<td>B</td>
				<td>27</td>
			</tr>
		</table>
	</body>
	
</html>

 

6. 이미지 태그

속성 이름 설명
src 이미지 경로 지정
alt 이미지가 보이지 않을 떄 나오는 글자
width 이미지 너비
height 이미지 높이 
<!DOCTYPE html>
<html lang="kr">
	<head>
		<title>Coding Cat</title>
	</head>
	
	<body>
		<img src="css3.png" alt="나와" width="300"/>
	</body>
	
</html>

 

7. input 태그

- 사용자에게 정보를 입력받는 기능을 수행하는 태그

- text는 물론, 패스워드, 파일 등을 입력받을 수 있음

<form>
E-Mail : <input type="text"/>
<br>
Password : <input type="password"/>
<br>
Verify Password : <input type="password"/>
</form>

속성값 설명
button 버튼 생성
checkbox 체크박스 생성
file 파일 입력 양식 생성
hidden 보이지 않음
image 이미지 형태 생성
password 비밀번호 입력 양식 생성
radio 라디오 버튼 생성
reset 초기화 버튼 생성
submit 제출 버튼 생성
text 글자 입력 양식 생성

 

8. HTML5 입력 양식 태그

속성값 설명
color 색상 선택 양식 생성
date 일 선택 양식 생성
datetime 날짜 선택 양식 생성
datetime-local 지역 날짜 선택 양식 생성
email 이메일 입력 양식 생성
month 월 선택 양식 생성
number 숫자 생성 양식 생성
range 범위 선택 양식 생성
search 검색어 입력 양식 생성
tel 전화번호 입력 양식 생성
time 시간 선택 양식 생성
url URL 주소 입력 양식 생성
week 주 선택 양식 생성

 

9. SELECT 태그

- 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소

<label>Membership Type : </label>
<select>
	<option>Junior</option>
	<option>Senior</option>
	<option>freshman</option>
	<option>sophomore</option>
</select>

 

10. fieldset 태그와 legend 태그

- legend 태그는 fieldset 태그 내부에서만 사용할 수 있다.

 

<div>
	<form>
		<fieldset>
			<legend>이것이 fieldset과 legend</legend>
			<label>E-Mail : </label>
			<input type="text"/>
			<br>
			<label>Password : </label>
			<input type="password"/>
			<br>
			<label>Verify Password : </label>
			<input type="password"/>
		</fieldset>
	</form>
</div>

 

- legend의 스타일 글자 굵기는 아래의 코드를 사용하면 된다.

legend {color:green; font-weight:bold;}

11. block 형식 태그와 inline 형식 태그

block 형식 태그 inline 형식 태그
div 태그 span 태그
h1 ~ h6 태그 a 태그
p 태그 input 태그
목록 태그 글자 형식 태그
테이블 태그  
form 태그  

 

12. 포지셔닝 - overflow

- overflow 속성은 내부의 요소가 범위를 벗어날 때 처리하는 속성

- overflow 속성에 사용할 수 있는 키워드는 hidden, scroll, auto, visible 등이 있다.

키워드 설명
hidden 영역을 벗어나는 부분을 보이지 않게 설정
scroll 영역을 벗어나는 부분을 스크롤로 설정
auto 영역을 벗어나면 스크롤로 설정하고, 벗어나지 않으면 스크롤이 보이지 않음
visible 영역을 벗어나는 부분을 보여줌

 

1) width와 height가 둘 다 auto일 경우

- width와 height가 둘 다 auto일 경우에는 width에서 auto이기 때문에 너비 먼저 넓어진다.

.auto1 { width: auto; height: auto; border: 3px solid skyblue; }

 

2) overflow-x, overflow-y

- overflow 속성에서 scroll을 사용하면 모든 축에 스크롤이 생성되는데, 특정한 축에 scroll을 사용하려면 overflow-x:scroll;나 overflow-y: scroll;를 사용하면 된다.

.scroll { 
	border: 3px solid darkgray; 
    overflow-x: scroll; }

 

13. HTML style 전체 선택자

- HTML 문서 안에서 모든 태그에 style을 적용하는 방법은 전체 선택자 사용

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			* {color : blue;}
		</style>
	</head>
	<body>
		<h1>Coding Cat</h1>
		<p>Coding Cat is Coding Cat</p>
	</body>
</html>

 

14. HTML style ID 선택자

- #ID를 사용하여 style에서 ID 선택자를 사용한다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	<style>
		#body {color : blue;}
	</style>
	</head>
	<body>
		<h1 id="body">Coding Cat</h1>
		<p>Coding Cat is Coding Cat</p>
	</body>
</html>

 

15. HTML style 클래스 선택자

- .클래스를 사용하여 HTML style 클래스 선택자를 사용한다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.body {color : blue;}
		</style>
	</head>
	<body>
		<h1 class="body">Coding Cat</h1>
		<p>Coding Cat is Coding Cat</p>
	</body>
</html>

 

- 여러 개의 클래스 선택자를 사용하는 방법은 class = "body header"로 사용하면 된다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.body {color : white;}
			.header {background : black;}
		</style>
	</head>
	<body>
		<h1 class="body header">Coding Cat</h1>
		<p>Coding Cat is Coding Cat</p>
	</body>
</html>

 

반응형
저작자표시

'IT > HTML\CSS' 카테고리의 다른 글

[HTML] HTML 라벨(label) 위에 마우스 올리면 손가락 보여주기  (0) 2023.07.21
[HTML] HTML 크롬(Chrome) input type='file' 커스터마이징 하는 방법  (0) 2023.07.05
[HTML] input 태그 숫자만 입력할 수 있게 하는 방법(정규식)  (0) 2022.06.03
HTML5 인라인 요소(Inline Element)와 블록 요소(Block Element)  (0) 2021.09.29
HTML 테이블에 데이터를 넣는데 띄어쓰기로 문제 발생 해결 방법  (0) 2021.09.07
[HTML/CSS] CSS cursor 속성  (0) 2021.03.03
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기
IT/HTML\CSS 관련 글
글 더보기

티스토리툴바