HTML의 기본 구조
<!DOCTYPE html> : 문서의 html의 버전을 지정
<html></html> : html의 시작과 끝을 브라우저에게 알려주는 역할
<head></head> : 문서의 정보를 나타내는 범위
웹 페이지가 해석해야 할 웹페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS)같은
웹페이지에 보이지 않는 정보를 나타냄
<body></body> : 문서의 구조를 나타내는 범위
사용자의 화면에 보여지는 로고나 버튼 등..웹페이지의 보여주는 구조를 작성
태그란?
HTML의 모양과 행동양식을 정해주는 명령어
태그사용법
태그는 시작태그와 종료태그로 끝나고
중간에 내용이 들어가는 형식으로 되어 있다.
이 형식을 하나의 요소라고 칭한다.
태그안에 태그를 넣을 수 있는다
태그 안에 첫 번째는 자식요소라 부르고
첫 번째를 포함한 모든 내부 태그는 하위 요소라 부른다.
바로 밖 태그는 부모요소라 부르고
모든 밖의 태그는 상위 요소라 부른다.
빈태그
종료태그가 없는 태그로써 추가적인 기능 포함해서 작성해야 한다.
<tag> : html 1~5버전
장점 : 작성하기 편리함
단점 : 빈태그를 명확하게 인지하기 어려움
<tag /> : xhtml /html5 염격한 문법으로 명확하게 문법을 작성해야함.
장점 : 빈태그인지 아닌지를 쉽게 알 수 있음, 안전함,
단점 : / 안 붙이면 문제가 될 수 있음
예시
<tag attribute="value">contents</tag>
<- 기능의 확장 ->
<img src="./cat.jpg" alt="고양이" />
<- 이미지경로-> <-이미지 이름->
HTML의 요소
| 요소 종류 | 설 명 | 특 징 | |
| 인라인요소 | 글자를 만들기 위한 요소 | 콘텐츠 크기만큼 자동으로 줄어듬 | |
| 블록요소 | 상자(레이아웃)를 만들기 위한 요소 | 가로 넓이는 최대한 늘어남 세로 넓이는 최대한 줄어듬 |
|
| 인라인 블록요소 | 인라인요소지만 블록 특성을 가지는 요소 |
||
인라인요소
본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도
span : 줄바꿈을 할 때 쓸때는 스페이스(공백)이 들어감
<span>Hellow</span>
<span>World</span>
a : 다른/같은 페이지로 이동시키는 태크
<a href="www.naver.com" target="_blank">네이버</a>
target : 링크 페이지가 어디에 표시해야 할지
href : 이동할 url지정
br : 줄바꿈
<br/>
width : 가로 너비를 지정하는 css속성
<span style="width: 100px;">Hello</span>
height: 세로 너비를 지정하는 css속성
<span style="height: 100px;">World</span>
margin : 외부여백
<span style="margin : 20px 20px;">Hello</span>
padding : 내부여백
<span style="padding: 20px 20px;">World</span>
주의 할 점
블록요소를 하위요소로 가질 수 없음
<span><div></div></span>
하위요소로 인라인 요소를 가질 수 있음
<span><span></span></span>
블록(block) 요소
본질적으로 아무것도 하지 않고, 콘텐츠의 영역을 설정하는 용도
div : 수직으로 쌓인다.
<div>Hello</div>
<div>World</div>
width : 가로 넓이 지정
<div style="width: 100px">Hello</div>
height : 세로 넓이 지정
<div style="height: 20px">World</div>
외부 여백
<div style="margin: 10px">Hello</div>
내부 여백
<div style="padding: 10px">World</div>
블록요소 안에는 블록요소와 인라인요소 모두 넣을 수 있다.
<div><span></span></div>
Heading :제목을 의미하는 태크, 인라인
<h1> ~ <h6>
<p> : paragraph 문장을 구분하는 용도
<img> : 이미지 태그, 인라인 요소
<img src="경로" alt="삽입할 이미지의 이름">
블록요소
<ul> : unordered list 순서가 필요없는 집합을 의미; li태그가 한개라도 존재해야됨
<ol> : ordered list 순서가 필요
<li> : list item 목록 내 각 항목, ul내부에 있어야됨.
테이블요소 : 행과 열의 집합
<table>
<tr> : 행
<td> : 열
전역속성
바디에서 사용하는 전체 영역에서 사용할 수 있는 속성
- title : 요소의 정보나 설명
- style : 요소에 적용할 css를 지정
- class : 중복이 가능한 이름( css에 . 으로 표시 )
- id : 고유해야 하는 이름( css에 #으로 표시 )\
- data-이름="데이터" : 데이터를 저장하는 기능; 자바스크립트에서 사용가능
<label> : 라벨가능요소
인라인블록요소
인라인요소지만 블록 특성을 가지고 있다.
input : 입력을 받는 요소
<input type="text" />
value : 미리 입력될 값
placeholder : 힌트를 제공해주는 속성
diabled : 비활성화
<input type="checkbox" /> : 중복가능
checked : 미리 체크상태로 만들어 놓음
<input type="radio"/> : 그룹 내 하나만 체크
name : 그룹을 정함
'FrontEnd > HTML' 카테고리의 다른 글
| BEM ( Block Element Modifier ) (0) | 2022.10.11 |
|---|
댓글