💻Unit4

---

1. 웹개발 이해하기

웹 개발에는 세가지의 개발 언어가 필요하다. HTML과 CSS 그리고 Javascript가 있다.

HTML은 웹의 내용과 구조를 담당하고, CSS는 콘텐츠를 꾸며주는 시각적인 표현 즉 , 스타일을 담당하는 디자인 언어이다. Javascript는 구조와 스타일이 완성된 각각의 요소에 동작을 부여하고 상호작용을 할 수있게 만드는 동적처리 언어이다.

2. HTML

HTML

HTML(HyperText Markup Language)는 자바스크립트와 같은 프로그래밍 언어가 아닌 웹페이지의 내용과 구조를 담당하는 마크업 언어이다.

1. 기본구조와 문법

• HTML은 요소tag<> 들의 집합
• Tag : 부등호 <>로 묶인 HTML의 기본 구성 요소
• TREE STRUCTURE

2. HTML 요소

⚪ 요소 (Element)

<태그> 내용 </태그>

HTML 요소는 시작태그(start tag), 종료 태그(end tag) , 태그 사이에 위치한 내용(content)로 구성

⚪ 요소의 중첩 (Nested Element)

<태그><태그>내용</태그></태그>

<태그>
    <태그>내용</태그>
</태그>

요소는 중첩 , 요소는 다른요소를 포함할 수 있어서 부모와 자식 관계가 이루어 진다.
들여쓰기(Indent)를 이용해서 자식요소를 구분한다.

⚪ 빈 요소 (Empty Element)

<meta charset="utf-8">

빈요소 or 빈태그라고 한다. 내용(content)이 없는 요소이고 속성(Attribute)만 가질 수 있다.

빈 요소 중 대표적인 요소 : br hr img input link meta

⚪ 인라인과 블록

인라인(Inline)요소

<span> 내용 </span>

인라인 요소는 글자를 만들기 위한 요소이고, 콘텐츠 영역을 설정하는 용도로 사용된다.
인라인 요소는 수평으로 쌓이고 인라인요소 안에는 인라인요소만 포함시킬 수 있다.
대표적인 인라인 요소 <span> <a>

블록(Block)요소

<div> 내용 </div>

블록 요소는 콘텐츠 영역을 설정하는 용도로 사용된다. 인라인 요소와 다른 점은 콘텐츠가 수직으로 쌓이고 블록요소 안에는 인라인요소 뿐만아니라 블록요소도 포함,중첩 시킬 수 있다.
대표적인 블록 요소 <div> <h1> <p>

📌 핵심요소

<div>
  <h1> 제목 </h1>
  <p> 문장 <p>
</div>

<div></div>

• 블록(상자)요소
• 특별한 의미가 없는 구분을 위한 요소. (Division)
• 무언가를 잡아두는 또는 요소를 그룹화,영역을 잡을때 묶을때 사용

<h1></h1>

• 블록(상자)요소
• 제목을 의미하는 요소. (Heading)
• H1 ~ H6 작을수록 더 중요한 제목을 정의

<p></p>

• 블록(상자)요소
• 문장을 의미하는 요소. (Paragraph)

<img src="./dog.jpg" alt="개"/>

<img/>

• 인라인(글자)요소
• 이미지를 삽입하는 요소. (Image)
• src 경로 alt 이름 필수 속성

<ul>
	<li>사과</li>
    <li>딸기</li>
	<li>수박</li>
	<li>망고</li>
</ul>

<ul>

• 블록(상자)요소
• 순서가 필요없는 목록의 집합을 의미. (Unordered List)

<li>

• 블록(상자)요소
• 목록 내 각 항목 (List Item)

<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">Google</a>

<a></a>

• 인라인(글자)요소
• 다른/같은 페이지로 이동하는 하이퍼 링크를 지정하는 요소. (Anchor)
• 속성 target ="_blank" 새탭

<span></span>

• 인라인(글자)요소
• 특별한 의미가 없는 구분을 위한 요소.

<br/>

• 인라인(글자)요소
• 줄바꿈 요소. (Break)

<input type="text"/>
<input type="text" placeholder="ID">
<input type="password" placeholder="password">

<input/>

• 인라인(글자)요소 블록(상자)요소 = Inline-block
• 베이스는 인라인요소이지만 블록요소 특징도 갖고있다
• 사용자가 데이터를 입력하는 요소.

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

<label></label>

• 인라인(글자)요소
• 라벨 가능 요소(input)의 제목.
• input type = radio 경우 그룹에서 1개만 입력받을 수 있다

<button type="button">Regular button </button>
<button>Submit!!</button>
<input type="submit" value="Click Me!">

<button>

• 폼 안에 버튼이 있으면 기본값으로 해당 폼을 제출(submit)하게 된다
• type ="button" 속성을 추가하면 아무것도 하지않는 평범한 버튼

<!--주석-->

• 수정사항이나 설명 등을 작성(주석)
• 브라우저는 이 태그를 해석하지 않기 떄문에 화면에 내용이 표시되지 않음.
• Ctrl + / or Cmd + /

3. 시맨틱 요소

시맨틱 요소(semantic element)
Semantic : '의미가 있는, 의미론적인'
의미를 가진 요소를 사용하는 방식을 추구한다. 종류에는 form, table, img, footer 등이 있으며 content의 의미를 명확히 설명한다.
검색엔진이 시맨틱 요소를 해석해서 검색하고 , 개발자들이 서로 협업할때 코드를 해석하기가 편리하다. content를 읽을때 표지판 같은 역할이라 생각하자!

시멘틱 요소의 종류

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

3. HTML 심화

id 와 class 목적에 맞게 사용

<input id = "id-input" class = "input focus" type="text" placeholder="ID"></input>
<input id = "password-input" class = "input focus" type="password" placeholder="password"></input>
<button id = "login-button">Login</button>
<input id = "keep-checkbox" type="checkbox">Keep Login</input>

<link rel="stylesheet" href="style.css">

• id 고유(unique)한 이름을 붙일때 사용 , 단 한 번만 사용되어야 하는 이름이 필요한 경우에 사용한다. 중복 지정이 불가!

• class 반복되는 영역을 유형별로 분류할 때 사용 , 같은 class를 가지고 있는 요소는 같은 유형으로 분류된 요소로 알 수 있다. 중복 지정이 가능!

---

---

웹의 내용과 구조를 담당하는 마크업언어인 HTML을 배웠다.
시맨틱요소가 검색엔진이 선호한다는 점에서 SEO를 알게 되었다. SEO 검색엔진 최적화 , 한번 구글 검색을 통해 알아봐야겠다. 부족한 태그 지식도 복습하자!