[1주차] 💻🏃‍♂️ - 제대로 배우는 첫 강의 시작

💻               🏃‍♂️

오늘은 코스테이츠 시작 2일째다. 아직까지는 아침에 바로 일어나기는 힘들지만 이것도 적응이 되면 괜찮아질 것 같다.

어제는 간단하게 OT를 했다면 오늘부터 본격적으로 강의가 시작이 되었다. 

오늘은 HTML의 정의를 배웠고 로그인 페이지, 자기소개서 페이지를 직접 만들며 실습에 들어갔다.

중간중간에 내용정리와 수업을 들으면서 내가 헷갈리고 잘 모르겠는 부분들은 따로 정리를 해보았다.

---

웹개발에 있어서 JavaScipt와 짝을 이루는 두 언어가 있다. 바로 HTML과 CSS 이다. 

HTML은 구조를 만드는 마크업 언어

CSS는 스타일을 담당하는 디자인 언어

JavaScipt는 구조와 스타일이 완성된 각각의 요소에 생명을 부여하는 역할을 하고 있다. 

 

본격적으로 수업에 들어가기에 앞서 앞으로 사용할 프로그램을 설치를 먼저 하였다. 

프로그램명은 Visual Studio Code로 VSCode로 불린다. 

🧐 Visual Studio Code란?

마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터로, 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 있습니다.

 

장점

• macOS, Linux, Windows 등 OS와 상관없이 사용이 가능합니다.
• JavaScript, HTML, CSS를 모두 편집할 수 있습니다.
• 다양한 extension을 제공하여 개발자의 취향에 맞게 커스터마이징이 가능합니다.
• 디버깅(debugging)이 편리합니다.
• 무료로 사용할 수 있습니다.

✍️  HTML

웹 페이지의 틀을 만드는 마크업 언어이다. 

트리구조로 이루어져 있고, tag들의 집합이다. 

 

✍️  HTML 태그의 종류

- <div> : 한줄을 차지한다. 

- <span> : 컨텐츠 크기만큼 공간을 차지한다.

- <img> : img태그는 닫는 태그가 없다.

- <a> : 링크 삽입 

- input, textarea: 다양한 입력 폼 

radio 박스와 check박스의 차이점

radio는 둘 중에 하나만 체크 가능

check는 둘 다 체크 가능

radio박스는 name으로 그룹을 만들어줘야 둘 중에 하나만 체크가 된다.

textarea는 줄바뀜이 되는 입력 폼

 

🧐 시맨틱 요소란?

시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 다시 말해, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했습니다.

시맨틱 요소를 사용해야하는 이유

첫째, 검색 엔진이 시맨틱 요소를 더 좋아하기 때문입니다. 네이버, 구글 등은 모두 고유한 검색엔진을 보유하고 있습니다.

 

둘째, 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다. 뿐만 아니라, 요소 안에 채워질 데이터 유형도 예측하기 쉽습니다.

✍️  시맨틱 요소의 종류

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

✍️  ID와 Class의 차이점

ID: 고유한 이름을 붙일때 (id는 중복을 허용하지 않는다.)

Class: 반복되는 영역을 유형별로 분류할때

반복되는 항목은 class 로 지정한다.

같은 class 값을 지정해줌으로서, 동일한 유형임을 알 수 있다.

 

실습결과물

💻  로그인 페이지

💻  자기소개서 페이지

 

🔑  오늘 배우면서 헷갈리고 이해가 잘안된 부분들 복습!

 

HTML List중 UL과 OL의 차이

 

1.순서가 없는 목록(UL)

보통 리스트를 만들 때 사용하게 되는 tag는 <ul> tag이다.

순서가 없는 목록이고, 기본적으로 점 모양이 찍혀 나오게 된다.

2.순서가 있는 목록(OL)

자동으로 순서가 붙기 때문에, 경우에 따라서 훨씬 편하게 작업할 수 있고 리스트의 숫자를 체크하는 것에도 용이하다.

 

Focus 클래스를 입력하면  양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다.

보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동한다.