[HTML/CSS] HTML 기초

KIM DA MI·2023년 2월 14일

html

HTML/CSS

목록 보기

1/4

오늘은 마크업 언어인 HTML의 기초에 대해 학습하였다.

먼저 전반적인 웹 개발에 필요한 HTML/CSS/Javascript에 대해 이해할 필요가 있다.

HTML/CSS/JavaScript 이란?

HTML : 웹페이지의 구조를 담당하는 마크업 언어

CSS : 디자인요소를 시각화하는 스타일 시트 언어

JavaScript : 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 해주는 프로그래밍 언어

이렇게 세 가지의 언어가 서로의 관심사를 분리하기 위해 구조, 스타일, 상호작용에 대해 각각 나눠서 코드를 작성한다.

이제 본격적으로 HTML에 대해 알아보자!

1. HTML 기본 구조와 문법

Hype Text Markup Language의 약자이다.
웹 페이지의 틀을 만드는 마크업 언어이다.
HTML은 Tag들의 집합이다.
- Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
  (여는 태그, 닫는 태그가 있으며, 같은 태그로 열고 같은 태그로 닫아야 한다.)
트리구조이다.

2. 자주 사용하는 HTML요소

HTML에서 많이 사용하는 태그

태그 설명
<div> Division
<span> Span
<img> Image
<a> Link
<ul> & <li> Unordered List & List Item
<input> Input(Text, Radio, Checkbox
<textarea> Multi-line Text Input
<button> Button

태그	설명
`<div>`	Division
`<span>`	Span
`<img>`	Image
`<a>`	Link
`<ul> & <li>`	Unordered List & List Item
`<input>`	Input(Text, Radio, Checkbox
`<textarea>`	Multi-line Text Input
`<button>`	Button

<div> 요소 : 한 줄을 차지한다.

<span> 요소 : 줄바꿈이 되지 않는다.

<div>div 태그는 한 줄을 차지한다</div>
<div>division 2</div>
<span>span 태그는 줄바꿈이 되지 않는다</span>
<span>span2</span>
<span>span3</span>
<div>division 3</div>

<img> 요소 : 이미지를 삽입할 때 사용한다.
- alt 속성 : 대체 텍스트 (이미지가 깨졌거나 경로를 찾을 수 없을 때 대체 텍스트가 나옴)
```
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png" alt="daum">
```

<a> 요소 : 하이퍼 링크를 넣고 싶을 때 사용한다. 주로 href 속성과 사용된다.
- 타겟 속성 target="_blank"를 사용하여 새 탭으로 열 수 있다.
```
<a href="http://naver.com" target="_blank">네이버</a>
```

<ol> 요소 : 순서가 있는 리스트를 작성할 때 사용한다.

ol과 li는 한 쌍이다.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <ol>
    <li>Item 3-1</li>
    <li>Item 3-2</li>
  </ol>
</ol>

<ul> 요소 : 순서가 없는 리스트를 작성할 때 사용한다.

ul과 li는 한 쌍이다.

<ul>
	<li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <ul>
    <li>Item 3-1</li>
    <li>Item 3-2</li>
  </ul>
</ul>

<input> 요소 : 닫는 태그가 필요 없다.

Input Type : checkbox (중복 선택 가능)

label 요소에 for 속성을 사용해서 연결하고 싶은 input 요소의 id 속성과 label 요소의 for 속성을 똑같이 쓴다.

<input id="todo_workout" type="checkbox">
<label for="todo_workout">운동</label>
<input id="todo_study" type="checkbox">
<label for="todo_study">공부</label>
<input id="todo_drink" type="checkbox">
<label for="todo_drink">물 마시기</label>
<input id="todo_shopping" type="checkbox">
<label for="todo_shopping">장 보기</label>
<input id="todo_play" type="checkbox">
<label for="todo_play">놀기</label>

Input Type : radio (중복 선택 불가능)

중복선택이 되지 않기 위해 같은 name 속성을 사용하여 묶어준다.

<input id="football" type="radio" name="sports">
<label for="football">football</label>
<input id="baseball" type="radio" name="sports">
<label for="baseball">baseball</label>
<input id="basketball" type="radio" name="sports">
<label for="basketball">basketball</label>
<input id="tennis" type="radio" name="sports">
<label for="tennis">tennis</label>

Input Type : text, email, password, date, time, color, file, number

<label for="text">text</label>
<input type="text" id="text" placeholder="이름을 입력하세요"><br>
<label for="text">email</label>
<input type="email" id="email" placeholder="email@example.com"><br>
<label for="password">password</label>
<input type="password" id="password"><br>
<label for="date">date</label>
<input type="date" id="date"><br>
<label for="time">time</label>
<input type="time" id="time"><br>
<label for="color">color</label>
<input type="color" id="color"><br>
<label for="file">file</label>
<input type="file" id="file"><br>
<label for="number">number</label>
<input type="number" id="number" max="100" min="0"><br>

<textarea> 요소 : 줄바꿈이 가능한 입력 폼을 생성할 때 사용한다.
```
<textarea></textarea>
```

<button> 요소 : 클릭할 수 있는 버튼을 만들 때 사용한다.
```
<button>클릭</button>
```

3. 시멘틱 요소

시멘틱 요소 : 의미를 가진 요소를 의미한다.
시멘틱 요소의 종류
- <article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
- <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
- <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
- <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
- <nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
- <main> : 문서의 주된 콘텐츠를 표시합니다.
- 래퍼런스 : 나무위키:HTML/태그 / MDN:Semantics / w3School:HTML Semantic Elements

4. 회고

오늘은 웹페이지의 뼈대를 구성하는 마크업 언어인 HTML의 기본 문법과 시멘틱 요소에 대해 알아보았다.

처음 접하는 부분이기 때문에 쉽지만은 않았지만, 역시 프론트엔드의 가장 큰 매력은 내가 구현하는 부분을 바로바로 눈으로 확인할 수 있는 점인 것 같다. 😁😁

실제로 웹페이지를 개발하기 위해서 사용되는 요소는 훨씬 다양하지만 모두 외울 수는 없기 때문에
상황에 적절한 요소를 찾아서 사용할 수 있도록 꾸준히 연습을 해야겠다.

차근차근 배워나가면 언젠가 멋진 웹페이지를 만들 수 있겠지..!

내일은 CSS의 기초를 다지는 시간이다.
내일 배운 내용으로 열심히 꾸며봐야지. 힘내자 화이팅!! 🧚🏻‍♀️🧚🏻‍♀️

KIM DA MI

다음 포스트