HTML은 다 훑기보단 간략하게 알아보고 필요한 게 있으면 그 때 마다 찾기
HTML?
Hyper Text Markup Language은 약자로 HTML은 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다.
HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
그안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다.
(출처- https://ko.wikipedia.org/wiki/HTML)
하이퍼 텍스트는 링크에 따라 다른 페이지나 동일 페이지 내 다른 위치로 이동하는 방식을 뜻하며
마크업 언어는 태그 등을 사용하여 문서, 데이터의 구조를 명시하는 언어이다.
모든 HTML 문서는 유형 선언(<!DOCTYPE html>)으로 시작해야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html><!DOCTYPE html> - 문서 유형을 나타내고 브라우저가 웹 페이지를 올바르게 표시하도록 해줌
<html></html>로 둘러쌓이고 그 안에 head와 body로 구성되어 있다.
HTML 헤딩
<h1> ~ <h6> 태그로 정의
<h1> 제목1 </h1>
...
<h6> 제목6 </h6>HTML 문단
<p> 태그로 정의
<p> 첫 문단 </p>
HTML 링크
<a> 태그 선언 후 href 속성에 주소 삽입
<a href = "https://wwww.tistory.com"> 티스토리 </a>
HTML 이미지
<img> 태그로 정의
<img src="sun.jpg" alt="이건 태양" width="10" height="10">src에는 웹 이미지의 주소를 넣거나 따로 내 컴퓨터에 저장한 이미지의 파일 위치를 적는다.
alt는 이미지가 나오지 않았을 때 나오는 대체 텍스트
width 너비, height는 길이
HTML 요소
요소는 시작 태그에서 종료 태그를 의미
<h1> 제목1 </h1><h1>는 시작 태그, </h1> 슬래시가 붙은 건 종료 태그
* <br> 같은 몇 요소는 시작 태그, 종료 태그가 짝이 아닌 경우가 있다. <br>만 적어주기 (</br>만 적어도 실행은 되더라)
HTML 속성
ㅡ 모든 HTML 요소는 속성을 가질 수 있다.
ㅡ 속성은 요소에 대한 추가 정보 제공
ㅡ 시작 태그에 기재
ㅡ 일반적으로 name = "value" 형태처럼 이름 / 값이 쌍으로 제공되야 한다.
href 속성
클릭 시 지정한 주소로 페이지가 넘어가는 링크 생성
<a href = "주소"> 링크 </a>
src 속성
<img src="이미지 위치">ㅡ 절대 경로 : 다른 웹 사이트에 올라와 있는 외부 이미지의 URL
ㅡ 상대 경로 : 내 웹 사이트 내에 호스트되는 이미지에 대한 링크 / 내 컴퓨터에 저장된 이미지 파일
상대 경로를 사용하면 도메인을 변경해도 이미지 연결이 끊어지지 않는다.
style 속성
색상, 글꼴, 크기 등에 변화를 주는 속성
<p style="color:black;"> 검은색 </p>
줄 바꿈
<br> 사용
'HTML' 카테고리의 다른 글
| HTML 간단한 회원가입 화면 만들기 (0) | 2023.02.01 |
|---|---|
| class / id (0) | 2023.02.01 |
| HTML input type (1) | 2023.01.31 |
| HTML 블록(Block) / 인라인(Inlin) / div, span 요소 (1) | 2023.01.31 |
댓글