2일차 - HTML 복습 및 자기소개 페이지 만들기
코드스테이츠 FE 45기 1일차 블로깅은 개인적인 이유로 하지 못하고 2일차부터 작성한다.
1일차
1일차에서 학습한 내용을 간단하게 요약해보자면, 페어 프로그래밍과 의사코드, 그리고 각종 학습을 위한 도구들에 대해 학습했다. zep은 처음 써 보는 사이트인데 게더타운과 비슷한 메타버스 플랫폼이라서 금방 익숙해졌다.
프론트엔드 개발에 있어서는 우분투 혹은 맥os를 권장한다고 하시는데 여유가 없어서 WSL2로 개발을 계속 진행하려고 한다. (여태 큰 문제없이 개발했었다.)
실시간 세션으로 진행하는 zoom을 제외하면 자유시간이 넉넉했다.
0. VS코드 설치
이전에 개발했던 경험이 있기에 이미 설치되어 있다. Live Server를 포함한 여러가지 extension도 이미 유튜브를 통해 설치했던 경험이 있기 때문에 쉽게 넘어갈 수 있었다.
유용한 extension들은 드림코딩의 유튜브를 참고했었다! 거의 필수로 사용한다고 보면 된다.
html 파일에 ! 를 입력하면 자동으로 html 코드가 작성되는 것도 정말 편리하다.
https://www.youtube.com/watch?v=XMfyfNZooi4&t=2s
1. HTML 복습
html은 문서의 구조나 내용을 다루는 언어이다. HyperText Markup Language의 약자이다.
- Tag : 부등호로 묶인 HTML의 기본 구성 요소
Tag를 열면 어딘가에서 Tag를 닫아줘야한다.
- 트리 구조
-html
-head
-title
-body
-h1
-div
-span
- a태그 예시
<a href="http://naver.com" target="_blank">네이버</a>- ul, li: 리스트
ul 요소는 순서가 없는 리스트를 작성할때 사용한다. 각각의 리스트 앞에 숫자 대신 bullet mark가 붙는다.
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
<ul>
<li>item 3-1</li>
</ul>
</ul>
- input, textarea: 입력폼
<input type="text" placeholder="type here">
<div>
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
-시맨틱 요소
시맨틱: 의미가 있는, 의미론적인 이라고 해석할 수 있다.
의미를 가진 요소를 사용하는 방식을 추구하기 시작했다.
검색 엔진이 시맨틱 요소를 더 좋아한다.
여러 개발자가 함께 작업할 시 의미있는 코드 블록을 찾는 것이 훨씬 더 편리하다.
요소 안에 채워질 데이터 유형도 예측하기 쉽다.
종류
1) <article> :독립적이고 자체 포함된 콘텐츠 지정
2) <aside> : 본문의 주요 부분 표시하고 남은 부분 설명, 사이드바 혹은 광고창
3) <footer> : 가장 아랫부분. 라이선스, 주소, 연락처
4) <header> : 제목. 상단바나 검색창
5) <nav> : 상단바 등 사이트를 안내하는 요소
6) <main> : 주된 콘텐츠
2. 자기소개 페이지 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개 페이지</title>
</head>
<body>
<h2>Hello, I'm Lee Min ju</h2>
<img src="image3.png" width="200" height="200">
<h3>💫나의 목표💫</h3>
<ol>
<li>알고리즘 실력 향상</li>
<li>포트폴리오 완성</li>
<li>자신감 및 집중력 향상</li>
</ol>
<h3>🛠️목표를 이루기 위한 다짐🛠️</h3>
<ol>
<li>매일 블로깅 하기</li>
<li>페어 프로그래밍 및 프로젝트 적극 참여</;>
<li>주 4회 운동하기</li>
</ul>
</body>
</html>