[Front] HTML

Study/HTML CSS JS

[Front] HTML

hong- 2022. 4. 26. 19:44

안녕하세요 백엔드 개발자 홍민정입니다 🫧

오늘은 HTML에 대해 간단히 살펴보고자 합니다 !

☝🏻 HTML

📍 HTML (HyperText Markup Language)

- 웹 페이지를 구성하는, 틀을 만드는 마크업 언어

- 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어

- 어떤 웹 페이지가 어떤 내용을 가지며 그 내용을 어떻게 조직할 것인지를 지정하기 위한 언어

- 컴퓨터에게 특정한 데이터 처리 절차를 명령하기 위한 언어가 아니기 때문에 프로그래밍 언어는 x

📍 HTML의 기본 구조와 문법

- HTML은 태그들의 집합

- Tag : 부등호(< >)로 묶인 HTML의 기본 구성 요소

- <p class = "paragraph"> hello </p> 일 때,

- <p class = "paragraph"> 는 시작태그 , </p> 는 종료태그

- class="paragraph" 는 속성 (속성이름 = "속성값")

- hello 는 콘텐츠

📍 HTML의 트리구조

<html>
<head>
   	<title> 제목 </title>
</head>
<body>
   	<h1> 글씨를 크게 </h1>
    <div> 여기에 내용을 입력
 		<span> 여기도 </span>   
    </div>
</body>
</html>

📍 자주 사용하는 HTML 요소

1️⃣ div

- div 태그는 한 줄을 차지함

2️⃣ span

- span 태그는 컨텐츠 크기만큼 공간을 차지함

3️⃣ img

<img src = "https://www.naver.com/cat.jpg">   //이미지 삽입

4️⃣ a

<a href = "http://naver.com"> 네이버 </a>  //링크 삽입

5️⃣ ul, li

- 리스트를 표현할 때 사용되며 대부분 ul 안에 여러 개의 li가 존재

- ul : unordered list ( 순서가 없는 데이터를 표현하는 경우 적절 )

- ol : ordered list - 리스트 생성 시 넘버링으로 됨 (1. 2. 3. 처럼)

- li : list

6️⃣ input, textarea

- 다양한 입력 폼으로 textarea는 줄바꿈이 되는 입력폼

<input type ="radio" name = "radio_button" value = "a"> a     # 하나만 선택 가능
<input type = "radio" name = "radio_button" value = "b"> b
<input type = "text" placeholder = "여기에 입력하세요">
<input type = "checkbox"> 선호도 여부                          # 여러 개 선택 가능

7️⃣ button

<button> 제출 </button>  //전송가능

8️⃣ p

- paragraph(문단)의 약자로 하나의 문단을 표현하기 위하여 사용

9️⃣ section

- 어떤 것이든 묶어서 하나의 구역을 구분

- HTML5 표준의 탄생과 함께 생겨난 시맨틱 요소의 일부

- <div>는 HTML5 이전에 하나의 구역을 나타내기 위해 사용 → but, 지금은 큰 구역 구분하기 위해 사용하기 지양