오늘은 코드스테이츠 첫 강의를 시작하는 날이다. 아직 많이 익숙하지 않아도 강의를 들으면서 생각보다 재미있고 할만하다고 생각했다. 오늘은 HTML과 HTML 문서를 작성하기 위해서 VSCode 를 설치했고, 로그인 페이지와 자기소개서 페이지를 만드는 실습을 진행하였다.
Visual Studio Code란?
Visual Studio Code(이하 VScode)는 마이크로소프트에서 개발한 전 세계에서 가장 대중적인 코드 에디터입니다. 프로그램, 웹 사이트, 웹 애플리케이션 등을 만들 수 있습니다.
Visual Studio Code의 장점
VScode는 전 세계의 개발자들에게 사랑받는 코드 에디터인 만큼 굉장히 많은 장점이 존재하는데, 그중에서 저희 코스와 관련된 장점을 나열하면 아래와 같습니다.
macOS, Linux, Windows 등 OS와 상관없이 사용이 가능합니다.
JavaScript, HTML, CSS를 모두 편집할 수 있습니다.
다양한 extension을 제공하여 개발자의 취향에 맞게 커스터마이징이 가능합니다.
디버깅(debugging)이 편리합니다.
무료로 사용할 수 있습니다.
HTML 이란?
HyperText Markup Language의 약자이며, 웹 페이지의 틀을 만드는 마크업 언어이다.
HTML은 tag들의 집합이다.
HTML의 태그
<div> : 컨텐츠들을 묶어서 사용할 때 (한줄을 전부 차지한다.)
<span> : 컨텐츠들을 묶어서 사용할 때 (컨텐츠의 크기 만큼만 공간을 차지한다.)
<a> : 다른 문서나 사이트로 연결해준다.
<img> : 이미지를 넣을때 사용하는 태그
<ul,li> : 리스트를 만들어준다.
<input> : 다양한 입력 폼
<textarea> : 줄바꿈이 되는 폼이다시맨틱 요소란?
HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다.
시맨틱 요소의 종류
<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
<main> : 문서의 주된 콘텐츠를 표시합니다.HTML의 속성
ID: 고유한 이름을 붙일때 사용하는 속성이름
Class: 반복되는 이름을 붙일때 사용함
