티스토리 뷰
[ 오늘 배운 것 ]
HTML 기초
1. 웹 개발 이해하기
2. HTML 기초
3. HTML 심화
1. 웹 개발 이해하기
[학습 목표]
- 웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.
- VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.
- VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.
html : 웹 페이지의 구조를 담당하는 마크업 언어 (structure 구조)
css : 디자인 요소를 시각화하는 stylesheet 언어 (presentation 스타일)
javascript : 단순한 웹페이지를 프로그램 언어로 만들어 유저와 상호작용할 수 있게 하는 프로그래밍 언어 (interaction 상호작용)
웹 개발과정은 하나의 건물을 세우는 것에 비유할 수 있다.
집의 도면을 그리는 것 : HTML
벽면의 색과 재질 등에 대한 정보를 그 옆에 간단히 적기 : CSS
조금 더 예쁘게 꾸미고 싶어서 밤이 되면 자동으로 켜지는 알전구를 설치했습니다 : JS
2. HTML 기초
[학습 목표]
- HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 구조와 문법에 대해 이해하고 적용할 수 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
- <div>, <span> 요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
- <ul>, <ol>, <li> 요소가 무엇이고, 언제 사용해야 하는지 알고 있다.
- <input>요소를 type을 설정하여 <input> 요소를 활용할 수 있다.
- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(sementic) HTML문서를 작성할 수 있다.
- HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
- 시맨틱 요소가 무엇인지 설명할 수 있다.
- 시맨틱 요소를 사용하는 이유에 대하여 이해한다.
- 검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.
HTML은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업 언어.
페이지에 포함되는 텍스트나 그림 등의 '콘텐츠'에 태그를 붙여서 그 '의미'를 정의내려 주는 것.
마크업 언어 - 위키백과, 우리 모두의 백과사전
마크업 언어 위키백과, 우리 모두의 백과사전.
ko.wikipedia.org
HTML 기본 구조와 문법
1) html이란?
- hypertext markup language의 약자
- 웹 페이지의 틀을 만드는 마크업 언어
2) html 사용법
- html은 tag의 집합
- tag : 부등호(<>)로 묶인 html의 기본 구성 요소
- html 확장자 사용
3) html의 구조 : tree structure
- 부모-자식 노드로 구성이 되어 있으며 그 안에 content가 담기는 구성
<!DOCTYPE html> <!-- 이 문서가 HTML 문서임을 명시 -->
<html> <!-- html 시작 태그로, 문서 전체의 틀을 구성 -->
<head> <!-- head 태그는 문서의 메타데이터를 선언 -->
<title>Page title</title> <!-- 문서의 제목, 브라우저의 탭에 보여짐 -->
<head> <!-- </태그이름>은 태그가 끝났음을 의미-->
<body> <!-- body 태그는 문서의 내용을 담는 곳 -->
<h1>Hello World</h1> <!-- heading을 의미하며, 크기에 따라 h1 ~ h6까지 있음 -->
<div>Contents here <!-- content division을 의미하며 줄바꿈됨 -->
<span>Here too!</span> <!-- 줄바꿈이 없는 content 컨테이너 -->
</div> <!-- div 태그가 끝났음을 의미 -->
</body> <!-- body 태그가 끝났음을 의미 -->
</html> <!-- html태그가 끝났음을 의미 -->
self-closing tag
태그 내부에 내용이 없다면 (<tag></tag>와 같이 표현되는 경우)<tag/>와 같이 표현 가능
<img src="codestates-logo.png"></img>
<img src="codestates-logo.png" />
2) 자주 사용하는 HTML 요소
(1)<div>, <span>
div 태그는 한 줄을 차지합니다.
span 태그는 컨텐츠 크기만큼 공간을 차지합니다.
코드 사용 예시) <div>와 <span>
<div>div 태그는 한 줄을 차지합니다</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다.</span>
<span>span2</span>
<span>span3</span>
<div>division3</div>
코드 실행 결과 예시) <div>와 <span>
(2) <img>
- 이미지를 삽입할 수 있는 태그
- 닫는 태그가 없다
- 속성 src에 이미지 경로를 삽입한다.
코드 사용 예시) <img>
<img src="./nature.jpeg">
코드 실행 결과 예시) <img>
(3) <a>
- 링크 삽입
- 속성 href에 연결할 페이지의 링크를 삽입한다.
코드 사용 예시) <a>
<a href="https://naver.com">네이버로 이동</a>
코드 사용 결과) 화면에 표시된 네이버로 이동을 클릭하면 네이버 웹사이트로 이동할 수 있다.
(4) <ul> , <li>
코드 작성 예시)
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3 has neted list
<ul>
<li>Item3-1</li>
</ul>
</li>
</ul>
코드 실행 결과)
(5) <input>, <textarea>
다양한 입력폼
코드 사용 예시)
<div>
<input type="radio" name="chioce" value="a"> a
<input type="radio" name="chioce" value="b"> b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>
3. HTML 심화
코드스테이츠글 (start)
시멘틱 요소란?
그 자체에 의미를 가지고 있는 요소.
요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소.
ex) 시멘틱 요소가 아닌 div, span은 해당 요소가 어떤 컨텐츠를 포함하는지 코드를 봐야 알 수 있지만,
header, footer는 코드를 보지 않아도 해당 요소가 어떤 컨텐츠를 포함하는지 알 수 있다.
시멘틱 요소가 등장하기 전 개발자들은 div, span으로 영역을 나눠 작업을 했지만
일관성이 떨어지고 개발자들 간의 혼동으로 <section>, <nav>와 같은 시멘틱한 엘리먼트들로 설계하도록 약속되었다.
시멘틱 요소를 사용해야 하는 이유
1) SEO(Search Engine Optimiztion) 최적화에 유리하다
2) 웹 접근성에 효율적이다.
3) 유지보수의 용이성
시멘틱 요소의 종류
- <article> : 독립적이고 자체 포함된 콘텐츠를 지정
- <aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소, 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용
- <footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이선스, 주소, 연락처
- <header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치, 사이트의 제목, 선택적으로 상단바나 검색창 등이 안에 들어가게 할 수 있다.
- <nav> : 네비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록형태로 사용합니다.
- <main> : 문서의 주된 콘텐츠를 표시
출처
https://pstudio411.tistory.com/entry/HTML-5%EC%9D%98-%EC%8B%9C%EB%A9%98%ED%8B%B1-%EC%9A%94%EC%86%8C
HTML 5의 시멘틱 요소
Sementic Tag 시맨틱(Semantic)은 "의미의, 의미론적인" 을 의미하는데 시맨틱 태그는 의믜를 가진 HTML의 태그를 뜻한다. 시맨틱한 태그를 사용하여 자신의 컨텐츠를 명확하게 정의한다. HTML5의 시맨틱
pstudio411.tistory.com
'부트캠프' 카테고리의 다른 글
| 관리자 권한과 경로 (0) | 2022.05.09 |
|---|---|
| CLI (Command-Line Interface) (0) | 2022.05.09 |
| Section1 반복문 (0) | 2022.04.28 |
| Section1 조건문 , 문자열 (0) | 2022.04.27 |
| Section1_Unit2 - [JavaScript] 기초 (0) | 2022.04.26 |