[HTML] HTML 기초

Dongmin Lee·2022년 12월 5일

0

HTML&CSS

목록 보기

1/20

💿 HTML이란

"Hyper Text Markup Language"의 약자로, 웹 페이지 표시를 위해 개발된 *마크업 언어!

💬마크업 언어란, 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어를 뜻함.
  따라서, 다른 프로그래밍 언어와 다르게 단순하게 '보여주는 것'에만 특화되어있음.

💿 HTML 구성 요소

요소(Element) : 태그에 감싸져서 화면에 출력되는 데이터.
태그(Tag) : 요소를 정의하는 거, 여는 태그/닫는 태그가 있음. 닫는 태그가 없으면 태그 자체가 요소.
속성(Attribute) : 태그에 속성을 줘서 요소를 더 구체적으로 정의함


<div id = "profile"> 
	프로필을 등록해주세요.
</div> 
<!--
<div> : 태그
프로필을 등록해주세요. : 요소
id = "profile" : 속성
-->

💿 HTML 기본 구조


<html>
	<head>
    </head> 
	<body>
    </body>
</html>

💬기본 구조를 토대로 살을 붙여 HTML이 작성됨.

💿 기본적인 태그의 종류

h1~h6 태그 : 제목을 나타내는 태그.

숫자가 높을수록 요소의 크기가 작아짐.
하지만 일반적인 경우, 크기는 css로 조절하니 주제와 부제 등으로 나누는 시멘틱 요소가 큼.
h1,h2를 사용하지 않고 h3 쓰는 등의 행위는 안돼!

p 태그 : pragraph에서 따온 약자. 즉, 문단을 나누기 위한 태그.
a 태그 : 다른 페이지로 이동하기 위한 태그. 하이퍼링크 속성을 추가할 수 있음.


<a href="www.google.com" target="_blank">구글로 이동</a>

span 태그 : 한줄로 출력되는 태그. span 태그를 사용한 요소를 inline-element라고 함.
div 태그 : 웹 페이지 내에서 섹션을 나누기 위한 태그. p,a,span 다 요소에 변화를 주는 태그지만 div는 그냥 표시 용도뿐.

💿 기본적인 속성의 종류

id 속성 : 태그에 주민등록번호를 부여(=다른 태그랑 아이디가 중복되면 안됨).
class 속성 : 태그에 이름을 부여(=다른 태그랑 클래스가 중복돼도 괜찮음).


<div id = "profile" class = "content-wrap"></div>
<img src = "./hi.png" alt = "내 사진">

어제보다 성장하기

다음 포스트

[CSS] CSS 기초

0개의 댓글

관련 채용 정보