Chapter 1 : 웹 개발 이해하기
HTML , CSS , JavScript 이란?
Visual Studio Code란?
Visual Studio Code(이하 VScode)는 마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터입니다. 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 있습니다. 여러분이 학습한 코드를 실제로 작성할 수 있을 뿐 아니라 개발자에게 필요한 다양한 기능을 제공하는 일종의 메모장이라고 생각하셔도 좋습니다.
Visual Studio Code의 장점
-macOS, Linux, Windows 등 OS와 상관없이 사용이 가능합니다.
-JavaScript, HTML, CSS를 모두 편집할 수 있습니다.
다양한 extension을 제공하여 개발자의 취향에 맞게 커스터마이징이 가능합니다.
-디버깅(debugging)이 편리합니다.
-무료로 사용할 수 있습니다.
Chapter 2 : HTML 기초
HTML 기본 구조와 문법
HTML이란?
- HyperText Markup Language의 약자
- 웹 페이지의 틀을 만드는 마크업 언어
HTML을 사용하는 방법
- HTML은 tag들의 집합
- TAG : 부등호(< >)로 묶인 HTML의 기본 구성 요소
- html 확장자 사용
TREE STRUCTUR : 트리 구조
- HTML 문서 시작
- html
- head
- title: Page title
- body
- h1 : Hello world
- div : Contents here
- span : Here too!
- head
- html
SELF-CLOSING TAG
태그 내부에 내용이 없다면, (< tag >< /tag>와 같이 표현되는 경우)
< tag />와 같이 표현이 가능하다.
자주 사용하는 HTML요소
-
div VS span
-> div 태그는 한 줄을 차지합니다.
division 2
span 태그는 컨텐츠 크기만큼 공간을 차지합니다 span 2 span 3
division 3 -
img : 이미지 삽입
-
a : 링크 삽입
새로운 페이지로 창 열때 : target="_blank" -
ul, li : 리스트
->
-
item 1
-
item 2
-
item 3 has nested list
- item 3-1
ul : 순서가 없는 리스트를 작성할 때, 리스트 앞에 bullet mark 가 붙는다.
ol : ordered list, 리스트 앞에 숫자가 붙는다.
-
input , textarea : 다양한 입력 폼
radio button : 단일 선택, 중복 x
check box : 여러개 선택
textarea : 줄바꿈이 되는 입력폼 -
button : 버튼
시멘틱 요소
시맨틱 요소란?
HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.
시맨틱 요소를 사용해야 하는 이유
- 검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다.
- 여러 개발자가 함께 작업할 때 < div > 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다.
- 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.
시멘틱 요소의 종류
- < article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
- < aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
- < footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
- < header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
- < nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 < ul>을 넣어 목록 형태로 사용합니다.
- < main> : 문서의 주된 콘텐츠를 표시합니다.
Chapter 3 : HTML 심화
HTML로 앱 웹의 구조 잡기
마크업(Markup)언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
- 큰 틀에서 영역 나누기
- 각 영역을 태그로 표현하기
-여러 태그를 하나의 div로 감싸줘야 한다.
id 및 class 목적에 맞게 사용하기
id : 고유(unique)한 이름을 붙일 때
class : 반복되는 영역을 유형별로 분류할 때
📌 수업을 마치며..
HTML의 기본지식들에 알아봄으로써 새로운 지식들을 많이 알게 되었다
뒤쳐지지 않도록 열심히 복습할테야 :D
