웹 퍼블리셔 직무로 약 2년 정도의 직장생활을 마치고 프론트엔드 개발자로서의 이직을 준비하기 위해 패스트캠퍼스 강의를 수강하게 되었다.
1주차의 내용은 퍼블리셔 직무를 준비하며 배웠던 내용이어서 강의를 이해하는데 어려움은 없었다.
패스트 캠프의 프론트엔드 강의는 총 8주차로 구성되어 있으며,
html, css, js 개념부터 React 까지의 강의로 구성되어 있다.
8주차까지의 학습노트는 개념정리 방식으로 기재할 예정이며,
1주차는 HTML 그리고 CSS 의 간단한 개념 정보를 담고있었다.HTML, CSS, JS 개요
HTML, CSS, JS 간단 개념
- HTML : 웹의 구조를 담당
- CSS : 실제 화면에 표시되는, 시각적인 표현(정적 처리)을 담당
- JS : 콘텐츠를 바꾸고 움직이는 등 페이지를 동작 시키는 동적 처리 담당
웹 표준
- Web Standard : 웹에서 사용되는 표준 기술(html, css)이나 규칙
- W3C의 표준개정단계
1) 초안
2) 후보권고안
3) 제안권고안
4) 권고안 - W3C의 표준 개정 단계의 '권고안'에 해당하는 기술
크로스 브라우징
다른 여러 브라우저에서 사용자에게 동일한 화면이나 동작을 줄 수 있도록 제작하는 기술, 방법
웹 접근성
고령자, 장애인 같은 제한이 있는 사용자를 포함하여, 모든 사용자들이 동등하게 접근할 수 있는 웹 콘텐츠를 제작하는 방법
VS CODE
전 직장에서도 코드 프로그램(?)으로 VS CODE 를 사용하였어서
기본적인 명령어나 사용법들은 조금 익혀져 있는 상태였음
수업을 통해 새롭게 알게 된 정보들만 정리할 예정이다.- vs code 초기 설정
- ! + enter 또는 tab 시 html 기본 구조 자동완성
- 좌측 사이드바 하단 응용 프로그램 설치
- Beautify : 단축키 설정 가능
- Korea : 한국어 설정 가능
- autoRenameTag : 태그 이름 한번에 변경 가능
- live server : 브라우저 출력 기능 (html 파일에서만 출력 가능, 개발을 위해 임시로 로컬 서버를 오픈 하는 것, 제품은 실제 호스팅 서버에 업로드해야 함)
- vs code 자주 사용되는 단축어
- cmd + B : 사이드바 열림/닫힘
- cmd + P : 파일 빠른 열기
- cmd + shift + P : 모든 명령 표시
- cmd + W : 현재 탭 닫기
- cmd + F : 페이지 내 찾기
- cmd + alt + F : 찾은 것 바꾸기
- alt + up/down : 줄 위/아래 로 이동
- alt + shift + up/down : 위/아래 로 복사 붙여넣기
- tab : 들여쓰기
- cmd + \ : 탭 분할
HTML
- html의 기본구조
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
</head>
<body>
</body>
</html>-
!DOCTYPE html
문서(페이지)의 html 버전을 지정
문서는 크게 6버전을 갖고 있는데 html5(최신)이 웹 표준에 해당한다.
웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도로 사용된다.public이 붙어있으면 html5가 아니라 xhtml 버전으로 만들어진 페이지라고 이해하면 되고, 예전 버전의 운영체제를 최신 컴퓨터에서 안쓰는것과 비슷한 개념이라고 생각하면 됨.
-
html lang
시작태그(문서의 전체 범위) 정해진 규칙에 따라 코드를 만들고 브라우저에게 제공해주어야 한다. 브라우저가 이해할 수 있는 명령들을 기재해야 한다.ex. lang : ko 라고 기재할 경우 크롬 사이트에서 구글 번역기 동작하지 않음
(페이지의 속성을 한국어로 바꿨기 때문)
-
head, body
문서의 정보를 나타내는 범위 (정보: 눈에 보이지 않음)
슬래쉬(/)가 있는 태그는 종료태그 -
link rel="" href=""
css페이지 연결하는 코드
현재 페이지가 어떠한 파일을 가지고 와서 연결할 것인지 정보 표시 -
script src=""
자바스크립트 페이지 연결하는 코드
소스가 어느 경로에 있는지를 src에 기재해주면 됨 -
meta
style,script 빼고 나머지 정보 표시1) charset : 캐릭터 세트의 약어로 화면에 표시되는것을 화면에서 어떻게 인코딩할것인지,각각 문자를 어떻게 처리할 것인지 기재
2) name : 정보가 무엇인지 name에 표시
3) content : 그 정보의 실제값을 표시
상대경로 vs 절대경로
-
상대경로
1) ./ : 주변에서 찾는 개념 (누구를 기준으로 하는지)
/ 생략 가능, 자동으로 ./가 있는 것처럼 동작하게 됨2) ../ : 주변에서 찾지 않고 상위폴더로 올라가 찾게 됨
-
절대경로
1) http/https : 원격의 다른 사이트2) / : 루트 경로 (최상위 경로 의미)
컴퓨터 내부에서 접근할 수 있는 사이트 경로
글자요소와 상자요소
-
인라인요소(글자요소) : 글자를 만들기 위한 요소들
ex. span 태그
본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도
요소가 수평으로 쌓이게 된다. -
블럭요소(상자요소) : 상자(레이아웃)를 만들기 위한 요소들
ex. div 태그
콘텐츠 영역을 설정하는 용도
요소가 수직으로 쌓이게 된다. -
인라인블럭요소 : 글자요소인데 상자요소가 가질 수 있는 특징을 갖고있는 태그
ex. input 태그
수평으로 쌓이지만 너비를 설정할 수 있음 -
블럭요소는 인라인요소를 자식으로 담을 수 있지만,
인라인요소는 블럭요소를 자식으로 담을 수 없음.
CSS 개요
css 선택자
-
별 표시 : 전체 선택자, 모든 요소를 선택
-
태그 이름으로 선택
-
.ABC : class 속성 값이 ABC인 요소 선택
-
#ABC : id 속성 값이 ABC인 요소 선택
-
ABC.XYZ : 복합 선택자, 선택자 ABC와 XYZ를 동시 만족하는 요소 선택
-
ABC > XYZ : 선택자 ABC 의 자식요소 XYZ 선택
-
ABC XYZ : 선택자 ABC 의 하위요소 XYZ 선택
-
ABC + XYZ : 선택자 ABC의 다음 형제 요소 XYZ 선택
-
ABC ~ XYZ : 선택자 ABC의 다음 형제 요소 XYZ 모두 선택
-
ABC:hover : 마우스 커서가 올라가 있는 동안의 선택자
-
ABC:active : 마우스를 클릭하고 있는 동안의 선택자
-
ABC:focus : 선택자 요소가 포커스되면 선택
-
ABC:first-child : 형제 요소 첫째 선택
-
ABC:last-child : 형제 요소 막내 선택
-
ABC:nth-child(n) : 형제 요소 중 n째 선택
-
ABC:not(xyz) : xyz가 아닌 ABC요소 선택
-
ABC::before/after : 선택자 요소 내부 앞/뒤에 내용 삽입
이렇게 1주차 내용 정리는 마무리! 초반에 말한대로 이미 숙지가 된 내용을 담은 주차과정이라 복습개념으로 정리하며 들었기 때문에 수월했던 수업이었다. 마지막으로 1주차 완강 인증사진을 남기며 마치려고 한다.
