프론트 입문을 위하여...
백엔드를 공부했었고, 팀 프로젝트에 참여해 백엔드 개발을 했던 경험이 있다. 팀 프로젝트를 마친 후 개인 프로젝트를 진행하고 싶었다. 혼자서 프론트와 백엔드를 전부 개발해야 하는 상황이다보니 프론트 공부의 필요성을 느꼈다. 그리하여 프론트 입문을 위한 교육을 찾아 헤매다 패스트캠퍼스의 프론트엔드 국비지원교육 강의가 있어서 신청하게 됐다.
위 과정의 커리큘럼은 아래와 같다.
- 1주차 : HTML로 시작하기
- 2주차 : CSS 학습하기
- 3주차 : CSS 심화 학습하기
- 3주차 추가강의 : 스타벅스 홈페이지 클론 코딩
- 4주차 : JavaScript 선행 학습
- 5주차 : JavaScript 심화 학습하기
- 6주차 : JavaScript 데이터 및 실습
- 7주차 : React 공식문서로 디테일 잡기
- 8주차 : Redux 기초 학습하기
해당 과정을 신청하게된 이유는 현대 웹 프론트 개발을 위한 기본기가 모두 포함되어 있다는 점이 만족스러웠다.
어렴풋이 기억나는 HTML, CSS, JS 의 개념을 확고히 하는데 도움이 될 것 같았고, 현대 SPA 개발을 위한 React&Redux에 입문하고 싶어서 망설임 없이 커리큘럼을 보고 신청하게 됐다.
아래는 1주차 동안 배웠던 HTML에 대해 정리한 내용이다.
index.html
브라우저는 어떤 경로를 탐색하든 우선적으로 index.html을 찾는다. 따라서 랜딩페이지에 해당하는 index.html 파일은 최상위 경로(root)에 존재해야 한다.
DOCTYPE(Document Type Definition, DTD)
DOCTYPE은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 해석하면 되는지를 알려주는 정의이다.
Version 순서
- HTML1
- HTML2
- HTML3
- HTML4
- XHTML
- HTML5(현재 웹 표준)
<html></html>
html 문서의 전체 범위를 나타낸다. 어디서 시작하고 어디서 끝나는지 명시.
<head></head>
문서의 정보를 나타내는 범위이다.
- 웹 페이지의 제목, 설명
- 사용할 파일 위치
- 스타일(CSS)
- 웹 페이지의 보이지 않는 정보를 작성하는 범위
<body></body>
문서의 구조를 나타내는 범위이다.
- 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등
- 웹 페이지의 보여지는 구조를 작성하는 범위
<html lang="en">
html 태그의 lang 속성은 문서의 언어를 지정하는 속성이다. 기본적으로 en으로 되어 있다.
- "en"로 설정 시 구글 번역기가 자동 실행 된다.
- "ko"로 설정 시 구글 번역기가 자동 실행 안된다.
상대 경로 vs 절대 경로
상대 경로
-
./➡️ 현재 경로를 의미하며 생략 가능하다. -
../➡️ 상위 폴더
절대 경로
/➡️ 루트 경로를 의미한다. (도메인 생략되어 있음)http(https)➡️ 웹 url로 절대 경로에 해당한다.
HTML 명칭
- 시작(열린) 태그 : <태그>
- 종료(닫힌) 태그 : </태그>
- 내용(contents) : 태그가 감싼 데이터
- 요소(element) : <태그>내용</태그>
요소는 태그와 내용까지 포함한 것을 가리킨다. 그치만 태그와 유사한 의미로 불리기도 한다.
부모와 자식 관계
<태그>
<태그>내용</태그>
</태그>바깥 태그는 부모요소, 안쪽 태그는 자식요소이다. 들여쓰기(indent)로 부모요소와 자식요소를 시각적으로 분리한다.
상위(조상)요소는 부모 요소를 포함하여 해당 부모를 또 감싸는 부모의 부모 요소를 칭할 때 사용한다. 즉, 본인을 감싸고 있는 윗 단계의 요소들을 통틀어 상위(조상)요소라 부를 수 있다.
반대로 본인이 감싸고 있는 요소들 통틀어 하위(후손)요소라 할 수 있다. 즉, 본인보다 아랫 단계의 요소들을 하위(후손) 요소라 할 수 있다.
빈(empty) 태그
닫히는 태그와 내용이 없는 태그를 칭한다. 빈 태그도 하나의 요소로 볼 수 있다.
- <태그> : 편리함, HTML 1/2/3/4/5
- <태그/> : 안전함, XHTML, HTML5 -> 사용권장
태그의 속성과 값
<태그 속성=“값”>내용</태그>속성과 값은 열리는 태그 안에 포함시킬 수 있다. 속성과 값의 역할은 ‘태그의 기능 확장’ 이라 볼 수 있다. 보통 빈 태그들은 내용을 채울 수 없기 때문에 거의 속성과 값이 필연적으로 사용하게 되어 있다. 따라서 필수 속성이란 것들이 존재한다.
HTML 주석
html 주석 처리: <!—코멘트—>
웹페이지에서 주석 처리된 내용은 보이지 않는다.
