내가 보려고 정리하는 html 기본 문법.. 간단하게 정리해본다.
HTML(Hyper Text Markup Language)은 웹페이지를 만들기 위한 언어로 웹에서 "뼈대"의 역할을 담당한다.
Hyper Text - 문서와 문서가 링크로 연결되어 있음
Markup - tag로 이루어져 있음
Language - 언어
HTML의 구성 요소
Ex) <p class = "test">This is test</p>
- 태그(tag)
- 정보를 정의하는 형식
- 여는 태그(opening tag), 위 예시에서 <p class = "test">에 해당
- 닫는 태그(closing tag), 위 예시에서 </p>에 해당 - 속성(attribute)
- 요소의 여는 태그에서 사용되는 구체화된 명령어 체계를 의미
- 위 예시에서 class가 이에 해당한다.
- 태그에 속성을 부여하면 태그의 성격을 좀 더 구체화 시킬 수 있다. - 내용(content)
- Text에 해당
- 위 예시에서 This is test와 같은 텍스트가 이에 해당한다. - 요소(element)
- 여는 태그와 닫는 태그로 나타내어지는 모든 명령어들
- 즉 위 예시 전체가 한 요소이다. - 변수(Arguments)
- 속성과 관련된 값
- 위 예시에서 test에 해당하는 부분이 변수라 할 수 있다.
HTML 문서 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>- <!DOCTYPE html>
- DTD(Document Type Definition) 선언
- 문서의 유형 지정, 웹 브라우저가 이 문서를 어떻게 해석해야 하는지 알려준다. - <html></html>
- 전체 페이지의 모든 내용을 감싸는 요소이다. - <head></head> 태그
- HTML문서에 대한 메타 데이터가 위치(문서를 정의하는 데이터)
- 메타 데이터: <title>, <style>, <meta>, <link>,<script>,<base>
- 위에서 <meta charset="UTF-8">은 문자셋으로 저장되어 있음을 나타내는 용도이다.
- <title>은 제목, 브라우저 탭에 보여지는 제목에 해당한다. - <body></body> 태그
- 문서의 몸체, 문서에서 보여지는 모든 것을 관장한다.
- 몸체 부분에서 사용되는 태그들은 아래에 따로 정리했다.
HTML에서의 주석
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--이렇게 주석을 달 수 있다-->
</body>
</html>- <!-- 쓰고 싶은 설명.. -->
- 이러한 형식으로 주석을 달 수 있다.
HTML 주요 태그들
1. <div>
- 구역을 나누는 태그, 콘텐츠들을 묶을 때 사용한다.
2. <p>
- 문단을 나누는 태그, 내용을 한 문단으로 나눠 내용의 위 아래 단락이 생김.
3. <ul>
- unordered list, 순서가 없는 list
- 쉽게 말해 글자 앞에 • <- 요론게 붙는 것이다.
- 요로케..
- 불릿이 붙는다
4. <ol>
- ordered list, 순서가 있는 list
- 순서가 있기 때문에 <ul>과 달리 숫자나 영문이 들어간다.
- 이러케
- 숫자가 붙는다.
5. <li>
- <ul>이나 <ol>안에서 각 항목 작성 시 사용.
| <ul> | <ol> |
| <ul> <li> bullet point 1 </li> <li> bullet point 2 </li> </ul> |
<ol> <li> number point 1 </li> <li> number point 2 </li> </ol> |
6. <h1> ~ <h6>
- 제목을 나타내는 태그.
- <h1>은 대제목 --> 페이지마다 하나씩은 꼭 쓰는, <h2>는 소제목
- 숫자가 커질수록 그냥 크기가 작아진다..
7. <hr>
- 구분선을 나타낸다.
8. <span>
- 특정 글자를 꾸밀 때 사용한다, 아래 예시 참고..
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
결과는 위와 같이 <span> 태그에 감싸져 있는 부분만 꾸며져서 나온다.
9. <a>
- 하이퍼링크, 특정 사이트 연결할 때 사용
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
이런 식으로 사용 가능하다. 만약 null링크로 사용하고 싶다면 따옴표 자리에 #을 넣어주면 된다.
a 태그입니다: <a href="#"> null링크 </a>
10. <img>
- 이미지 태그, 이미지를 삽입하고 싶을 때 사용한다.
img 태그입니다: <img src="이미지 주소" />
11. <input>
- 사용자가 정보를 입력하는 부분을 만들 때 사용
- 지정하는 type에 따라 어떤 형식으로 받을지 정보를 결정할 수 있다.
input 태그입니다: <input type="text" />
12. <button>
- 버튼을 생성하는 태그
button 태그입니다: <button> 버튼입니다</button>
13. <textarea>
- 글 작성 박스? 구역을 나타내는 태그
textarea 태그입니다: <textarea>글을 작성하세요</textarea>
'기타 공부들' 카테고리의 다른 글
| [Javascript] JQuery 사용법 (0) | 2021.10.07 |
|---|---|
| [CSS] 부트스트랩 (Bootstrap 예쁜 CSS 가져오기) (0) | 2021.10.03 |
| [CSS] 구글 웹 폰트 적용하기 (0) | 2021.10.01 |
| [IntelliJ] unmappable character for encoding MS949 에러 해결방법 (한글깨짐 현상 해결방법) (0) | 2021.10.01 |
| [IntelliJ] 언어 팩 영어로 적용하기 (0) | 2021.10.01 |