반응형
HTML이란?
- HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어
- 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성
태그란?
- HTML를 구성하기 위한 요소
- 꺽쇠 괄호에 둘러 쌓여 있음 : <태그명>
태그의 분류
- Block 태그
- Block 태그는 새로운 라인에서 시작 되며, Block 태그 다음에 오는 모든 태그들은 새 라인에서 시작 >> 행렬로 비교하면 행에 해당
- Block 태그들은 css의 속성 중 height, width, margin, padding을 적용할 수 있다.
- 예 : <p> ,<div>
- Inline 태그
- Inline 태그들은 새라인에서 시작하지 않고 현재 라인에서 시작 >> 행렬로 비교하면 열에 해당
- Inline 태그들은 css의 속성 중 height, width, margin, padding등의 속성을 적용할 수 없다.
- 예 : <span>
- 쌍으로 된 태그
- 태그의 시작과 끝이 따로 있어 시작과 끝 사이에 안에 코드를 넣는 태그 : <태그> 코드 </태그>
- 예 : <p> ,<div> 등..
- 쌍이 아닌 태그
- 태그의 시작과 끝이 따로 없는 태그 : <태그/> 또는 <태그>
- 예 : <br>, <input> 등..
태그 종류
- HTML태그 : <html>
- HTML로 작성되어 있다는 것을 알려줌.
- html 파일 전체를 감싸는 태그
- <html> <head> <meta> <link> <script></script> </head> <body> </body> </html>
- HEAD 태그 : <head>
- 머리말에 해당함.
- css나 javascript를 연결해줌.
- 파비콘이나 문자열 인코딩과 같은 문서의 다양한 정보를 제공.
- META 태그 : <meta>
- 문서의 문자열 인코딩 등과 같은 문서의 다양한 정보를 제공.
- TITLE 태그 : <title>
- 타이틀바에 입력될 텍스트
- LINK 태그 : <link>
- 주로 외부 css 파일을 연결할 때 사용
- SCRIPT 태그 : <script>
- 외부 js 파일을 연결하거나 javascript 코드를 입력할 때 사용
- BODY 태그 : <body>
- 본문에 해당하는 부분
- 실제 보여지는 화면에 해당
- P 태그 : <p>
- 단락을 나눌 때 사용
- HTML에서는 엔터를 쳐서 여러 문장을 입력하더라도 줄바꿈이 적용되지 않음
- P태그 안에서는 하나의 문장이 되고 P태그가 종료되면 단락이 된다.
- BR 태그 : <br>
- 줄바꿈
- B 태그 : <b>
- Bold = 굵은 글씨
- I 태그 : <i>
- 이탤릭체 글씨 = 기울어진 글씨
- 아이콘 : fontawesome을 이용하여 아이콘을 표시할 때 사용
- H 태그 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- 제목에 해당
- 숫자가 낮을수록 글씨가 큼
- HR 태그 : <hr>
- 직선을 그림
- DIV 태그 : <div>
- 상자를 만듬
- <div>div : 블락 태그 </div>
- SPAN 태그 : <sapn>
- 요소 일부만 디자인이나 기능을 변경할 때 사용
- IMG 태그 : <img>
- 이미지를 가져옴
- src 속성 : 가져올 이미지의 주소
- alt 속성 : 이미지 불러오기 실패시 보여줄 문자열
- width 속성 : 이미지의 가로의 길이
- height 속성 : 이미지의 세로의 길이
- INPUT 태그 : <input>
- 입력창을 만드는 태그
- 속성 type에 따라 다양한 속성을 가진 입력창을 생성
- text : 텍스트를 입력할 수 있는 입력창
- password : 비밀번호를 입력할 수 있는 입력창
- checkbox : 체크 박스를 만듦
- radio : 라디오 박스를 만듬
- button : 버튼을 만듬
- submit : 데이터 전송 버튼을 만듬
- reset : 초기화 하는 버튼을 만듬
- file : 파일을 선택하는 창을 만듬
- hidden : 사용자에게 보이지 않는 창을 만듬
- email : email 형식의 주소를 입력하는 창을 만듬
- url : url 형식의 주소를 입력하는 창을 만듬
- 등이 있음
- BUTTON 태그 : <button>
- 버튼을 생성하는 태그
- 속성 type에 따라 다양한 속성을 가진 버튼을 생성
- button : 버튼을 생성
- reset : 초기화
- submit : 데이터를 전송하는 버튼으로 form태그와 같이 사용
- FORM 태그 : <form>
- 데이터를 전송하기 위한 태그
- action 속성 : 데이터를 전송할 url
- method 속성 : 데이터 전달 방식이 get인지 post인지 결정
- A 태그 : <a>
- 클릭시 다른 주소로 이동하는 태그
- href : 넘어갈 주소
- UL 태그 : <ul>
- 번호가 없는 리스트
- LIST 태그를 이용
- OL 태그 : <ol>
- 번호가 있는 리스트
- LIST 태그를 이용
- LI 태그 : <li>
- UL태그나 OL 태그안에서 사용되는 태그
- SELECT 태그 : <select>
- 셀렉트 박스 창을 만드는 태그
- OPTION태그를 이용하여 여러 내용을 입력
<select>
<option value="전체">전체</option>
<option value="제목">제목</option>
<option value="내용">내용</option>
</select>
반응형
'Other > CSS' 카테고리의 다른 글
| 레이아웃- HTML 좌우배치: float 과 inline-block (1) | 2023.01.28 |
|---|---|
| div 태그를 이용한 화면 분할 (0) | 2023.01.28 |
| CSS 글자 스타일 (0) | 2023.01.28 |
| CSS 기본 사용법 과 셀렉터 우선순위 (0) | 2023.01.28 |
| CSS 이미지 가운데 정렬하는 법 (0) | 2023.01.28 |
