728x90
Ctrl+f를 통해 관련 내용으로 이동할 수 있습니다
더보기
body
br
p
b
i
h#
a
img
table
span
li
form
+들어가기 전에
기본적으로 css 태그는 다음과 같이 정의 내려진다
태그이름 { 속성1: 속성값1; 속성2: 속성값2; } 또한 해당되는 태그 전체에 적용된다
직접 적용해보기(h# tag)
<html>
<head>
<style>
h1 {
color: #F00;
}
h4 {
color: #0F0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>h1태그</h1>
<h4>h4태그</h4>
</body>
</html>
h 태그를 사용해서 style tag에 직접 적용해보았다
h# tag??
- html <body> tag
- 주로 글자의 크기를 결정하는 태그
- h1부터 h6까지 있다
h# tag 전체 적용해보기
혹시 몰라서 h7, h8까지 넣어 보았다
<html>
<head>
<style>
h1 {
color: #F00;
}
h4 {
color: #0F0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>h1태그</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4태그</h4>
<h5>h5</h5>
<h6>h6</h6>
<h7>h7</h7>
<h8>h8</h8>
</body>
</html>
style 안에 h1과 h4에 대한 css를 넣어두었기에 두 부분에 대한 결과만 css가 따로 적용된 모습이고,
그 외의 h# 태그들은 기존 규칙대로 서서히 작아지는 모습을 보이고 있다
+h7과 h8은 따로 존재하지 않기에 본문 내용으로 들어가는 모습이다
하지만 css로 적용 시 특정 글자에 대한 태그로 인식되는 듯하다
이모티콘 부분의 h7 태그를 지정하고 css를 입혀보았다
+ tags in <body> tag
<br> tag
- 줄 바꿈 tag
- 이 태그를 통해서만 줄 바꿈이 가능하다
- 코드 안에서 인위적으로 줄 바꿈 해둔 것은 적용되지 않는다
<html>
<body>
1st line<br>2nd line
<br>
the
first
line<br>
the second line
</body>
</html>
<p> tag
- 문단 제작 tag
- 하나의 문단을 만들 때 쓰이며 다음 p 태그에서는 자동으로 한 줄 공백을 만든다
<html>
<body>
<p>first paragraph</p>
<p>second paragraph</p>
<p>
new line<br>
third paragraph
</p>
not paragraph
</body>
</html>
<b> tag
- bold tag
- 글자를 굵게 만들어준다
<html>
<body>
<b>bold content</b>
normal content
<br>
<b>굵은 글씨 단축키는 Ctrl+b</b>
그냥 글씨
</body>
</html>
<i> tag
- italic tag
- 글자를 기울임 꼴로 만들어준다
<html>
<body>
<i>italic content</i>
normal content
<br>
<i>기울임꼴 단축키는 Ctrl+i</i>
똑바로 서있는 글자
</body>
</html>
<a> tag
- 하이퍼링크를 걸어주는 태그
- href == 클릭 시 다음 링크로 이동(단독 사용 시 targer=" _self"효과)
- target == 링크를 여는 방법, href와 함께 쓰인다
- _self == 현재 페이지 (기본값)
- _blank == 새 탭 열기
- _parent == 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다
- _top == 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다
- 프레임이름 == 직접 프레임이름을 명시해서 사용할 수도 있다
<html>
<body>
<a href="http://www.naver.com">Go Naver</a><br>
<a href="http://google.co.kr" target="_blank">Go Google (새 탭)</a>
</body>
</html>
<img> tag
- 이미지 삽입 tag
- src에서 지정한 경로에 없을 경우?
- 출력되지 않는다
- x박스로 출력된다
- 속성
- src == 이미지의 경로
- width == 가로 길이
- height == 세로 길이
<html>
<body>
<p>
이미지가 정상적으로 삽입 된 경우<br>
<img src="images/logo.png" width="245">
</p>
<p>
없는 이미지가 삽입 된 경우<br>
<img src="no_img.png" width="100" height="50">
</p>
</body>
</html>
<table> tag
- table tag
- 표를 만들어주는 태그이다
- 적당한 사용방법으로 보기는 어려운 태그이기에
- <table> 태그보다는 <div> 태그 + CSS를 권장한다
- 속성
- <tr> == 표의 행을 나타내는 태그
- <td> == 표의 열을 나타내는 태그, <tr> 하위 태그이다
<table>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
</tr>
</table>
- <thead>, <tbody>,<th>
- table 하위 tag
- 제목과 본문을 나누려고 한다면 이 태그를 쓰면 된다
- <thead>
- 표의 제목 영역
- <table> 하위, <tr> 상위 태그이다
- <tbody>
- 표의 본문 영역
- <thead>와 동등한 태그이다
- <th>
- 제목 셀 영역
- 제목 부분에 <td> 대신 사용
- bold 적용, 가운데정렬 되어있는 글씨 양식을 가진다
<table>
<thead>
<tr>
<th>학교</th>
<th>창립순서</th>
</tr>
</thead>
<tbody>
<tr>
<td>서울대학교</td>
<td>3</td>
</tr>
<tr>
<td>고려대학교</td>
<td>2</td>
</tr>
<tr>
<td>연세대학교</td>
<td>1</td>
</tr>
</tbody>
</table>
<div> tag
- 레이아웃을 나누는 데에 주로 쓰이는 tag
- 특별한 기능은 없다
- 가상의 구역(레이아웃)을 설계하는 데에 쓰이는 태그
- 보통은 CSS와 연동해서 사용한다
<html>
<body>
<div style="background-color:cyan">1번 구역</div>
<div style="width:150px; height:100px; background-color:#CF0">2번 구역</div>
</body>
</html>
<span> tag
- inline 속성의 tag
- 특별한 기능은 없다
- block속성인 <div> 태그와는 다르게 넓이, 줄 바꿈이 자동 적용되지 않는다
- 보통은 CSS와 연동해서 사용한다
<html>
<body>
<span style="background-color:red">1번 span</span>
<span style="background-color:blue">2번 span</span>
<br>
<span style="background-color:green">3번 span</span>
</body>
</html>
<li> tag
- list tag
- 단독으로 쓰이지 않는다
- <ul>, <ol> 태그 안에 들어가며 쓰인다
- 이중 리스트를 만들으려면 <ul>,<ol>태그 하위에 다시 태그를 쓰면 된다
- <ul>
- 순서없이 나열되는 (unordered list) 목록
- <ol>
- 번호순으로 나열되는 (ordered list) 목록
<html>
<body>
<ol>
<li>번호목록 1번</li>
<li>번호목록 2번</li>
</ol>
<ul>
<li>비순서형 목록 1번</li>
<li>비순서형 목록 2번</li>
<li>비순서형 목록 3번</li>
<ol>
<li>비순서형 목록 하위 번호목록 1번</li>
<li>비순서형 목록 하위 번호목록 2번</li>
</ol>
</ul>
</body>
</html>
<form> tag
- 입력 양식 tag
- 백엔드에서 주로 많이 다루어지는 태그
- 다양한 방법으로 입력된 정보가 백엔드 서버에 양식이 전달되고 처리된다
- 속성
- name == 폼 이름
- action == 데이터가 전송되는 백엔드 url
- method == 전송 방식(GET/POST)
- ...
- 활용되는 태그(type=" ")
- text == 일반 문자
- password == 비밀번호
- button == 버튼
- submit == 양식 제출용 버튼
- reset == 양식 초기화용 버튼
- radio == 한개만 선택할 수 있는 컴포넌트
- checkbox == 다수를 선택할 수 있는 컴포넌트
- file == 파일 업로드
- hidden == 사용자에게 보이지 않는 숨은 요소
<form>
<p>
<strong>아이디</strong>
<input type="text" name="name" value="아이디 입력">
</p>
<p>
<strong>비밀번호</strong>
<input type="password" name="password" value="비밀번호 입력">
</p>
<p>
<strong>성별</strong>
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</p>
<p>
<strong>응시분야</strong>
<input type="checkbox" name="part" value="eng">영어
<input type="checkbox" name="part" value="math">수학
</p>
<p>
<input type="submit" value="제출">
</p>
</form>
728x90
'Development Study > Frontend' 카테고리의 다른 글
| [TypeScript] TypeScript Grammar - 01 (0) | 2023.01.07 |
|---|---|
| [TypeScript] Differences between .ts & .tsx (0) | 2023.01.07 |
| [배경지식] CSS 프레임워크를 알아보자 (1) | 2022.12.31 |
| [배경지식] JavaScript? TypeScript? 이 둘의 차이는 무엇일까? (0) | 2022.12.31 |
| HTML + CSS 파일 연동하는 방법 (0) | 2022.11.21 |