Unit3. HTML 기초

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Jieunny의 블로그

Unit3. HTML 기초 본문

CodeStates/learning contents

Unit3. HTML 기초

Jieunny 2022. 12. 16. 14:42

📣 웹 개발 구성 요소

HTML : 구조
CSS : 스타일
JS : 상호작용

📣 HTML 기본 구성

✔️ 웹페이지의 틀을 만드는 마크업 언어
✔️ HTML은 태그들의 집합
✔️ <!DOCTYPE html> : 이 문서가 html 임을 명시
✔️ <html> : html 시작태그
✔️ <head>
문서의 메타데이터 선언
브라우저 탭에 나타나는 제목 설정 <title>
✔️ <body> : 문서의 내용을 담는 곳

<!DOCTYPE html>
<html>
  <head>
	<title> Page </title>
  </head>
  <body>
	<div>
		<h1> Hello </h1>
	</div>
  </body>
</html>

📣 HTML 태그 : opening태그와 closing태그로 구성

✔️ <div> </div> 태그

한 줄을 차지

✔️ <span> </span> 태그

컨텐츠 크기만큼 공간을 차지

✔️ <img> 태그

이미지 삽입 태그

<img src="이미지 있는 경로">

✔️ <a> </a> 태그

링크 삽입
target 지정해주면 새 탭에서 링크가 열린다.

<a href="https://www.naver.com" target="_blank">링크</a>

✔️ <ul> <li> </li> </ul> 태그

리스트 태그
순서가 있는 리스트는 <ol> </ol> 사용

<ul>
	<li>first</li>
	<li>second</li>
	<li>third</li>
</ul>

✔️ <input> 태그

<input type="text" placeholder="ID">
<input type="password" placeholder="password">
<input type="checkbox" checked>checked
<input type="checkbox">unchecked
<input type="radio" name="option1" value="a">a
<input type="radio" name="option1" value="b">b

✔️ <textarea> </textarea> 태그

줄바꿈 가능

<textarea></textarea>

📣 HTML 속성(attribute)

attribute name 과 attribute value로 구성

📣 시맨틱 요소

의미를 가진 요소
검색 엔진이 시맨틱 요소를 더 좋아한다.
여러 개발자가 작업 시 <div> 보다 의미 있는 블록을 찾는 것이 더 수월하다.

✔️ <article> : 독립적이고 자체적인 콘텐츠를 포함
✔️ <aside> : 사이드 바나 광고창 등 중요하지 않은 부분
✔️ <header> : 해당 섹션의 가장 윗부분, 사이트 제목 or 상단바 or 검색창
✔️ <footer> : 해당 섹션의 가장 아랫부분, 라이센스 or 주소 or 연락처
✔️ <nav> : 상단바 등 사이트를 안내하는 요소, 목록 형태로 <ul> 태그를 사용
✔️ <main> : 문서의 주된 콘텐츠를 표시

📣 웹 앱의 구조잡기

1. 큰 틀에서 영역 나누기
2. 각 영역을 태그로 표현하기 (🚨여러 태그를 하나의 div로 감싸줘야 한다.)

📣 id 및 class 목적에 맞게 사용하기

✔️ id

고유한 이름을 붙일 때 사용 (전체 문서에서 하나만 있는 unique한 값)
select 할 때는 이름 앞에 #

✔️ class

반복되는 영역을 유형별로 분류할 때 사용 -> 똑같은 값을 준다.
select 할 때는 이름 앞에 .
다중 클래스 선언할 때 class="name1 name2" // 띄어쓰기로 구분

저작자표시

'CodeStates > learning contents' 카테고리의 다른 글

Unit7. [Linux&Git 기초] CLI, 권한, 경로 (0)	2022.12.21
Unit5. HTML/CSS 활용 (0)	2022.12.19
Unit4. CSS 기초 (0)	2022.12.16
Unit2. [JS]조건문 & 반복문 & 함수 (0)	2022.12.16
Unit2. [JS]변수와 타입 (0)	2022.12.16

'CodeStates/learning contents' Related Articles

Jieunny의 블로그

Unit3. HTML 기초 본문

Unit3. HTML 기초

📣 웹 개발 구성 요소

📣 HTML 기본 구성

📣 HTML 태그 : opening태그와 closing태그로 구성

📣 HTML 속성(attribute)

📣 시맨틱 요소

📣 웹 앱의 구조잡기

📣 id 및 class 목적에 맞게 사용하기

'CodeStates > learning contents' 카테고리의 다른 글

티스토리툴바