HTML -> tag 공부
HTML:tag를 기반으로 웹페이지를 구성하는 웹 언어
태그란?
특정 기능을 구현하기 위해 표현하는 문법
시작태그<> 끝태그 </> 이 사이에 데이터를 넣으면 태그 기능이 적용된다.
어떤 태그를 사용하고 어떤 태그를 어느 위치에 작성하고 어떤 태그에 글자나 문자를 입력하는 가에 따라 웹페이지가 작성된다.
1. <!doctype html>
문서의 형식과 버전을 선언하는 태그
컴퓨터는 해당 문서 제일 앞에 선언 태그를 보고 해당 문서가 html 버전 몇으로 입력되었는지 파악하여 해석을 진행
<!doctype html> -> html5
2. <html>
html문서의 시작과 끝을 알려주는 태그
html 문법에 따라 코드를 작성하는 경우 반드시 html 태그 사이에 입력을 해줘야 한다.
컴퓨터는 html 태그 사이에 데이터를 html 형식으로 해석하게 된다
<html> ~~~~~ </html>
3. <head>
html 태그 다음에 나오는 태그로 해당 html 문서의 설정이나 정보를 입력하는 태그
<head> 설정, 정보 </head>
4. <body>
html문서가 웹서버를 통해 웹서비스를 제공되는 경우 사용자 브라우저 화면에 출력할 내용을 body태그에 작성한다.
html의 내용 데이터가 body 태그 안에 입력 및 저장
5. <title>
html 문서의 제목을 정의하는 태그
웹 브라우저 탭이나 툴바에 출력되는 글자를 입력하고 싶은 경우 사용
아니면 해당 title 태그로 설정된 제목이 보통 북마크의 글자로 저장
문서 내용은 아니기 때문에 title태그는 head태그 안에 작성을 한다.
<title>제목</titile>
6. <meta>
html 문서의 메타 데이터를 정의하는 태그
페이지의 설정, 키워드, 페이지의 작성자 등등 html 문서의 설정을 지정하는 태그
문서의 설정을 하는 태그이기 때문에 head 태그 안에 작성
대표적으로 해당 문서의 인코딩 방식을 지정할 때 많이 사용
끝 태그 없이 meta 태그 안에 속성값으로 설정하는 태그
<meta charset="UTF-8" content="text/html">
근데 이 charset은 기본적으로 웹서버의 인코딩 방식을 따라가기 때문에 ASCII로 설정해도 한글이 잘 보인다.
/etc/httpd/conf/httpd.conf에 들어가서 #UTF-8을 비활성화해주면 적용이 된다
-> 속성값이란?
같은 태그라 하더라도 다른 기능이나 설정으로 구현하고 싶으면 태그에 설정을 추가하는 값
7. <br>
한 줄 바꿈 태그
문서의 내용을 작성하다 보면 원하는 위치에 줄바꿈을 해야 하는데 그때 사용하는 태그
8. <p>
문서의 내용을 작성 중 단락을 나누고 싶은 경우 사용하는 태그
p태그로 내용을 작성하면 자동으로 줄바꿈 앞뒤에 여백을 자동 추가
<p> 문서내용 </p>
9. <h1> - <h6>
문서의 내용 안에 제목이나 머리글을 정의하고 싶은 경우 사용하는 태그
줄바꿈과 동시에 앞뒤에 여백을 추가하고 h태그 붙은 숫자에 따라 글자의 크기와 굵기가 자동 변경
<h1>제목</h1>
<h2>제목</h2>
10. <strong>
문서의 내용 중에서 특정 글자나 단어 줄을 강조하고 싶은 경우 사용하는 태그
글자가 굵게 변함
<strong> 중요한 텍스트 </strong>
11. <ul> <ol> <li>
목록 태그
문서의 내용을 입력 중 목록을 정의하고 싶은 경우 사용하는 태그
ul태그는 정렬되지 않은 목록을 정의하는 태그 (동그라미로 표현)
ol은 정렬된 목록을 정의하는 태그 (목록이 숫자로 바뀌는 것)
li 목록 안의 세부항목을 정의하는 태그
보통 ul안에 li태그를 작성하거나 ol안에 li태그를 작성
<ul>
<li>네트워크</li>
<li>서버</li>
</ul>
<ol>
<li>네트워크</li>
<li>서버</li>
</ol>
12. <img>
html 문서 내용에 이미지를 출력하고 싶은 경우 사용하는 태그
이미지는 html 문서에 저장되는 것이 아니라 외부에서 이미지 파이릉ㄹ 불러와 출력하는 형태
외부에서 이미지 파일을 불러오기 위해 해당 파일의 주소를 작성해야 한다.
또한 불러오는 과정이 실패하는 경우 출력할 텍스트를 설정 가능
<img src="주소" height'="높이" width="너비" alt="대체 텍스트">
13. <a>
링크를 만들어 주는 태그
한 웹페이지에서 다른 웹페이지로 연결하는 데 사용되는 하이퍼링크를 정의하는 태그
<a href="주소"> 링크 글자</a>
주소를 작성하는 경우에는 URL이나 파일의 경로 ip주소 등등 입력 가능
href 속성은 연결할 페이지의 주소나 경로
target 속성은 연결할 페이지가 출력되는 위치를 지정
download 속성은 연결할 페이지를 다운로드하도록 지정
14. <form>
사용자의 입력을 받아 사용하는 양식을 정의하는 태그
form 태그 안에 사용자에게 입력받는 방식을 지정하는 태그를 추가적으로 작성
입력받은 입력값을 어떤 주소나 방식으로 처리할지 결정하는 태그
<form action="주소" target="결과위치 설정" method="POST" enctype="데이터 인코딩 방식">
<form>
<입력태그>
<INPUT type="text"
<입력태그>
</form>
15. <input>
사용자에게 값을 입력받을 수 있도록 정의해주는 태그
입력받는 값의 구성이나 종류를 type 속성으로 지정하여 개발자가 원하는 데이터를 입력받을 수 있도록 설정이 가능
<input type="입력종류" name="입력데이터이름">
name -> 이름을 지정해두는데 화면에 출력되는 것은 아님
value -> 화면에 출력된다. 하지만 text면 다시 지워줘야 함
type 속성은 입력값의 종류를 개발자가 미리 지정하는 속성
- text 문자를 입력받는 타입 autpfocus는 홈페이지 딱 처음 들어가면 커서가 text에 가 있음
- <input type="text" name="id" value="아이디" autofocus><br>
- password 비밀번호를 입력받는 타입 (비밀번호 최대 길이 조절가능, placeholder를 쓰면 회색 빛으로 보임)
<input type="password" maxlength="10" placeholder="최대 10글자"><br>
- checkbox 체크 여부를 입력받는 타입
- number 숫자를 입력받는 타입
<input type="number" min="0" max="99"><br>
- date 날짜를 입력받는 타입
- color 색상을 입력받는 타입
- file 파일을 입력받는 타입
- reset 같은 form 태그에 속한 모든 입력값을 초기화하는 타입
- hidden 입력받는 것은 아니고 화면에 출력하지 않는 타입
- submit 같은 form태그에 속한 모든 입력값을 처리 시작하는 타입
- button 버튼을 만들어 클릭할 수 있게 하는 타입
<input type="button" value="버튼"><br>
16. <textarea>
여러 줄의 텍스트를 입력받아 처리하고 싶은 경우 사용하는 태그
보통 게시판 같은 여러 줄의 입력값을 받아야 하는 경우 사용
행 열
17.<select>
드롭 다운 형식의 목록을 정의하는 태그
select 태그로 이름을 지정하고 select 태그 사이에 option 태그를 사용하여 목록을 지정
option 태그는 드롭 다운 형식의 세부항목을 지정
원하는 보기를 선택해 값을 입력
18. <datalist>
input 태그와 연동하여 여러 정의된 옵션을 제공하는 태그
input 태그를 이용하여 드롭 다운 형식의 보기를 제공하는 입력형태를 정의할 수 있는 태그
<input list= "hello">
<datalist id= "hello">
<option value= "강남구">
<option value= "강서구">
</datalist>
19. <div>
div 태그는 실제로는 아무 기능이 없지만 실제 사용하는 태그 중 가장 많이 사용을 한다.
웹 개발자가 웹페이지를 작성 시 웹 페이지의 전체적인 구조에서 원하는 파트나 단락, 섹션을 지정하기 위해 구분하는 용도로 사용하는 태그.
<div>
내용
내용
</div>
기존의 웹페이지 내용을 div 태그로 분할하여 원하는 섹션에만 원하는 설정을 적용할 수 있도록 하나의 파트로 구성된 내용을 여러 파트로 나누는 태그
20. <span>
div 태그와 비슷하지만 전체 웹 문서 내용을 분할하는 것이 아닌 문자열 안에서 특정 파트를 분할 혹은 지정하기 위한 태그
span 태그도 아무런 기능이 존재하지 않는 태그
분할을 통해 특정 문자나 특정 문자열에만 원하는 설정을 적용하도록 분할해주는 태그
21. <table>
웹 문서 안에 table 형태로 데이터를 표현하기 위해 사용하는 태그
표 ,스프레드 시트라고 생각하면 된다. 일정한 크기의 공간으로 분할해서 원하는 데이터를 나열하는 방식
table 태그는 말 그대로 table을 생성하는 태그일 뿐, 행과 열을 구성하는 태그는 따로 있다.
<tr> table or 표의 행을 정의하는 태그. 테이블 안에 tr이 2개면 행이 2개 -> 가로 줄이 2줄
<th> 테이블의 머리글이나 제목을 정의하는 태그, 열을 구성하는 태그 -> table 태그 안에 th태그가 3개면 세로줄이 3개
<td> 테이블의 제목 이후에 내용이나 데이터를 입력하는 태그, 열을 정의하는 태그 -> table 안에 td태그가 3개면 세로 3개
가로 줄을 합치고 싶을 때
세로로 2줄을 합치고 싶을 때
22. <iframe>
인라인 프레임을 지정하는 테그
html 문서 안에 html 문서를 출력하는 태그
홈페이지 출력도 되고 다른 html을 불러올 수 있다
23. id, class 속성
태그마다 사용가능한 속성이 존재한다.
# -> id
. -> class
ID
id는 해당 문서 안에서 해당 태그를 식별하기 위한 이름을 지정하는 태그
해당 문서 안에 h1태그가 여러개 존재하는데 그 중 하나의 h1태그만 추가 설정하고 싶은 경우 해당 h1태그만 식별해야 하는데 그때 사용가능한 속성
class
해당 문서 안에서 특정 여러개의 태그를 그룹화하여 식별하기 위한 이름을 지정하는 태그
해당 문서 안에 여러 종류의 태그가 존재하는데 그 중 3개의 태그를 한 번에 추가 설정하고 싶은 경우
해당 3개의 태그만 class태그로 이름을 지정
24. <style>
웹서버 프로그램이 사용자에게 페이지 요청을 받으면 해당 페이지에 접근하여 데이터를 읽어 사용자에게 응답
해당 페이지가 html 파일이면 html 형식으로 해석한다
html php css 등등
web was web
즉, 확장자가 중요하다. (리눅스에서의 확장자는 의미가 없지만 웹서버 혹은 WAS는 의미가 있기 때문에 확장자 표시를 잘 해줘야 한다)
'WEB' 카테고리의 다른 글
| 회원가입 php , javascript (0) | 2025.06.23 |
|---|---|
| 로그인 php & 로그아웃 php (3) | 2025.06.19 |
| 웹 페이지 만들기 (6) 아파치 보안 설정 (0) | 2025.05.22 |
| 웹페이지 만들기 (5) 각 페이지 별로 만들기, 상대경로 설정, css연결 (0) | 2025.05.22 |
| 웹페이지 만들기 (4) 회원가입 php, welcome php (mariadb연결) (0) | 2025.05.21 |