HTML, CSS, JS로 만드는 스타벅스 웹사이트

SongE·2022년 4월 5일
CSShtmljs
2

(KDT FE2) Study Note 🧾

목록 보기
3/10
post-thumbnail

1. 개요

01. 학습 개요

웹 프론트엔드 개발의 핵심 줄기를 학습

1.1 프론트엔드 개발

  • HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것.

02. HTML,CSS 그리고 JS

2.1 HTML (Huper Text Markup Language)

  • 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당

2.2 CSS (Cascading Style Sheets)

  • 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당

2.3 JS (JavaScript)

  • 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.

03. 웹앱의 동작원리

04. 웹 표준과 브라우저

4.1 웹 표준

  • 웹 표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미, W3C의 표준화 제정 단계의 '권고안(REC)'에 해당하는 기술.
  • W3C의 표준화 제정 단계는 크게 다음과 같이 4가지 단계를 가집니다.
  1. 초안 (Working Draft, WD)
  2. 후보권고안 (Candidate Recommendation, CR)
  3. 제안권고안 (Proposed Recommendation, PR)
  4. 권고안 (W3C Recommendation, REC)

4.2 크로스 브라우징

  • 크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법.
  • 예) 크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, IE, 사파리

4.3 뷰포트(viewport)

  • 웹페이지가 출력되는 영역.

05. 웹에서 사용하는 이미지

5.1 웹 이미지

  • 비트맵( Bitmap)
    - 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름.
    - 정교하고 다양한 색상을 자연스럽게 표현
    - 확대/축소 시 계단 현상, 품질 저하.
    - 예) .jpg, .png
  • 벡터(Vector)
    - 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태로(Shape)로 이루어진 이미지.
    - 확대/축소에서 자유로움, 용량 변화가 없음.
    - 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움.
    - 예) .svg

5.1.1 JPG (Joint Photographic coding Experts Group)

  • Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용.
  • 손실 압축 ~> 용량이 적음
  • 표현 색상도(24비트, 약 1600만 색상)가 뛰어남
  • 이미지의 품질과 용량을 쉽게 조절 가능
  • 가장 널리 쓰이는 이미지 포맷

5.1.2 PNG(Portable Network Graphics)

  • Gif의 대체 포맷으로 개발됨
  • 비손실 압축
  • 8비트(256 색상) / 24비트(약 1600만 색상) 컬러 이미지 처리
  • Alpha Channel 지원(투명도)
  • W3C 권장 포맷

5.1.3 GIF(Graphics Interchange Format)

  • 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장.
  • 비손실 압축
  • 여러 장의 이미지를 한 개의 파일에 담을 수 있음 (움짤, 애니메이션)
  • 8비트 색상만 지원(다양한 색상 표현에는 적합하지 않음)

5.1.4 WEBP

  • JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷.
  • 완벽한 손실/비손실 압축 지원
  • GIF 같은 애니메이션 지원
  • Alpha Channel 지원(손실, 비손실 모두)
  • IE 지원 불가

5.1.5 SVG (Scalalble Vector Graphics)

  • 마크업 언어(HTML/XML) 기반의 벡터 그랙픽을 표현하는 포맷
  • 해상도의 영향에서 자유로움
  • CSS와 JS로 제어 가능
  • 파일 및 코드 삽입 가능

06. 특수 기호

` : 백틱, 그레이브
~ : 틸드, 물결 표시
! : 엑스클러메이션, 느낌표
@ : 앳, 골뱅이
# : 샵, 넘버, 우물 정
$ :  달러
% : 퍼센트
^ : 캐럿
& : 엠퍼센드
* : 에스터리스크, 별표
- : 하이픈, 대시, 마이너스
_ : 언더스코어, 로대시, 밑줄
= : 이퀄, 동등
" : 쿼데이션, 큰 따옴표
' : 아포스트로피, 작은 따옴표
: : 콜론
; : 세미콜론
, : 콤마, 쉼표
. : 피리어드, 닷, 점, 마침표
? : 퀘스천, 물음표
/ : 슬래시
| : 버티컬 바
\ : 백슬래쉬, 역슬래쉬
( ) : 퍼렌서시스, 소괄호, 괄호
{ } : 브레이스, 중괄호
[ ] : 브래킷, 대괄호
< >: 앵글 브래킷, 꺽쇠괄호

07. 오픈소스 라이선스

7.1 오픈 소스

  • 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람 할 수 있도록 공개하는 것.

7.1.1 Apache License

  • 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스, 개인적/상업적 이용, 배포, 수정, 특허 신청이 가능.

7.1.2 MIT License

  • 매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스, 개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없음.

7.1.3 BSD License

  • BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스, MIT와 동일 조건

7.1.4 Beerware

  • 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스. 물론 만날 수 있는 경우..

2. VS Code

01. 설치 및 실행

  1. 구글 검색창에 vscode 입력 > Visual Studio Code Editing. Redefined 클릭
  2. 자신에 맞는 운영체제를 선택하고 다운로드
  3. 바탕화면에 폴더 하나 생성
  4. Ctrl +, - 로 화면 확대, 축소 가능
  5. 단축키 (맥 커맨드 키 = 윈도우 컨트롤 키)
- Shift + Ctrl + P  : 메뉴 검색 
- Ctrl + O : 파일 혹은 폴더 열기
  1. 맨 아래 상태바
- 보라색 : 프로젝트(폴더/ 디렉토리)가 열려있지 않다.
- 파란색 : 프로젝트(폴더/ 디렉토리)가 열렸다.

02. 파일 생성과 삭제

  1. 파일 아이콘 클릭
  2. 파일 이름 입력 ( !!소문자 : index.html)
  3. ! 엔터 or 탭 > html 구조가 완성 됨
  4. 파일 아이콘 클릭
  5. 파일 이름 입력 ( main.css)
  6. main.css 우클릭 > delete > Move to Trash : 파일 삭제 됨

03. 한글화

  1. 사이드바 옆 엑티비티 바에서 확장 프로그램 아이콘 클릭
  2. 검색창에 korean 검색 > Korean Language ~~ 클릭 > Install 클릭 > 재부팅 Yes 클릭

04. 정리된 코드 만들기

  1. 확장 프로그램 > beautify 검색 > 첫번째 설치
  2. 기능기여도 탭 선택 > HookyQR.beautify 드래그
  3. Shift + Ctrl + P > 바로 가기 키 열기 > HookyQR.beautify 더블 클릭 > Alt + Ctrl + L 엔터
  4. 지저분한 코드 드래그 > Alt + Ctrl + L > 코드 정리 됨

05. 태그 이름을 한 번에 변경

  1. 확장 프로그램 > auto 검색 > 첫번째 설치
  2. 앞 태그를 바꾸면 뒷 태그도 바뀜

06. 브라우저에 출력

  1. Ctrl + Alt + S : 모든 변경사항 저장
  2. 확장 프로그램 > liver server > 첫번째 설치
  3. 오른쪽 하단 파란색 상태바에 Go Live가 생김
  4. 저장한 파일에 우클릭 > Open with Live Server 클릭

07. 단축키 & 공백2로 만들기

7.1 단축키

- Ctrl + B : 사이드 바 열기/닫기  
- Ctrl + P : 빠른 열기(파일이나 기호 탐색)
- Ctrl + Shift + P : 모든 명령 표시(에디터의 모든 명령에 접근)
- Ctrl + W : 편집기 닫기
- Ctrl + F : 찾기(검색)
- Ctrl + H : 찾기(검색)/바꾸기(대체)
- Alt + Up : 줄 위로 이동
- Alt + Down : 줄 아래로 이동
- Alt + Shift + Down : 아래에 줄 복사
- Ctrl + Z : 되돌리기
- Alt + Shift + Up : 위에 줄 복사
- Tab : 들여쓰기(Indent)
- Ctrl + Page Up : 이전 편집기 열기(좌측 창으로 전환)
- Ctrl + Page Down : 다음 편집기 열기(우측 창으로 전환)
- Ctrl + \ : 편집기 분할

7.2 공백2로 만들기

  1. 아래 파란색 상태바에 공백 클릭 > 공백 숫자 2 클릭
  2. Ctrl + A > Ctrl + Alt + L > 모든 공백이 2로 바뀜

3. 무작정 시작하기

01. Doctype(DTD)

1.1 DOCTYPE html

  • 문서의 HTMl 버전을 지정
  • DTD(Document Type Definition)마크업 언어에서 문서 형식을 정의하며,
    웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도.
  • HTML5 (표준)

1.2 DOCTYPE html PuBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  • XHTML

02. HTML, HEAD, BODY

2.1 html

  • 문서의 전체 범위
  • HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할.

2.2 head

  • 문서의 정보를 나타내는 범위
  • 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은,
    웹페이지의 보이지 않는 정보를 작성하는 범위.

2.3 body

  • 문서의 구조를 나타내는 범위
  • 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은,
    웹페이지의 보여지는 구조를 작성하는 범위.

03. CSS, JS 연결하기

[index.html]

<html lang="ko">
	<head>
    	<link rel="stylesheet" href="./main.css">
    	<script src="./main.js"></script>
	</head>
	<body> 
         <div>Hello world!</div>
	</body>
</html>

[main.css]

div {
         color: red;
         font-size: 100px;
}

[main.js]

console.log('HEROPY!');

04. 정보를 의미하는 태그 살펴보기

<title> </title>
- HTML 문서의 제목(title)을 정의.
- 웹 브라우저 탭에 표시됨. 

<link rel="stylesheet" href="./main.css" />
- 외부문서를 가져와 연결할 때 사용.(대부분 CSS 파일)
         - rel : 가져올 문저와 관계.
         - href : 가져올 문서의 경로.


<link rel="icon" href="./favicon.png">
- 페이지의 대표로 사용하는 아이콘 설정. 

<style> </style>
- 스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 

<script src="./main.js"></script>
- 자바스크립트(JS) 파일 가져오는 경우 

<script>
         console.log('Hello world!')
</script>
- 자바스크립트(JS)를 HTML 문서 안에서 작성하는 경우. 

<meta />
- HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔진이나 브라우저에게 제공.
         - charset : 문자인코딩 방식
         - name : 정보의 종류
         - content : 정보의 값

05. 화면에 이미지 출력하기

1. 이미지 저장 > 프로젝트 파일에 넣기
2. images 폴더 생성 > 저장한 이미지 넣기
3. index.html
<body>
         <img src="./images/logo.png" alt="대체 텍스트">
</body>
4. 이미지 주소 복사
5. index.html
<body>
         <img src="이미지 주소 붙여넣기" alt="대체 텍스트">
</body>

06. 상대 경로와 절대 경로

6.1 상대 경로

  • ./(생략가능) : 현재 위치
  • ../ : 상위 폴더

6.2 절대 경로

  • http(https) : 원격
  • / (//) : 루트, 최상위 경로

07. 페이지를 나누고 연결(링크)하기

1)
1. index.html
<body>
         <a href="https://naver.com">NAVER</a>
</body>
2. NAVER 홈페이지로 이동

2)
1. about 폴더 생성 > about 파일 생성
2. about.html
<body>
         About!!
</body>
3. index.html
<body>
         <a href="/about/about.html">About</a>
</body>
4. about.html으로 이동

3)
1. about.html > about.index 이름바꾸기
2. index.html
<body>
         <a href="/about">About</a>
</body>
3. about.html으로 이동

4)
1. about.html
<body>
         <a href="/">Home</a>
</body>
2. index.html으로 이동

08. 모든 파일 공백 크기 설정

  • Ctrl + Shift + P > 설정 > tab size > 2 입력

09. 개발자 도구 사용하기

  • F12 > Elements 탭 선택

4. 웹에서 시작하기

01. Codepen.io 소개

Codepen.io > start coding 클릭

  • 저장을 원하면 가입 후 이용

02. 브라우저 스타일 초기화

1. 검색창에 reset.css cdn > www.jsdeliver.com 제공 reset.css cdn 클릭
2. /reset.min.css > Copy to Clipboard > copy html 
3. index.html
<head>
         <link rel="stylesheet" href="cp html 붙여넣기">
</head>

(+) Codepen.io에서 초기화

  • CSS 톱니바퀴 > CSS Base > Reset 체크

03. Emmet

- div.heropy + 탭 => <div class="heropy"></div>
- w:100 + 탭 => width: 100px;
- h:200 + 탭 => height: 200px;
- bc:orange => background-color: orange;  
- div>ul>li*2{$} + 탭 
=> <div> 
         <ul> 
                 <li>1</li> 
                 <li>2</li> 
         </ul> 
   </div>

5. HTML 개요

01. 기본 문법

- <태그>내용</태그>: 요소(Element)
- <태그>: 시작(열린) 태그(Tag)
- </태그>: 종료(닫힌) 태그
- 내용: 요소의 내용(Contents)

02. 부모와 자식 관계의 이해

1)
<태그>: 부모 요소
         <태그>내용</태그>: 자식 요소
</태그>
- 들여쓰기: Tab 키
- 내어쓰기: Shift + Tab 키

2)
<태그>: 상위(조상) 요소
         <태그>: 부모 요소, 상위(조상) 요소
                <태그>내용</태그> 
         </태그> 
</태그>

3)
<태그>
         <태그>: 자식 요소, 하위(후손) 요소 
                 <태그>내용</태그>: 하위(후손) 요소
         </태그> 
</태그>

03. 빈 태그

- <태그>: 편리함, HTML 1/2/3/4/5
- <태그/>: 안전함, XHTML/ HTML5
- <img src=" " alt=" " />
- <input type=" " />

04. 글자와 상자

  • 요소가 화면에 출력되는 특성, 크게 2가지로 구분.
1) 인라인(Inline) 요소: 
         - <span></span>: 대표적인 인라인 요소! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.
         - 글자를 만들기 위한 요소들. 
         - 요소가 수평으로 쌓임.
         - 포함한 콘텐츠 크기만큼 자동으로 줄어듬.
         - 가로(width), 세로(height) 사이즈를 지정할 수 없다.
         - 내부 여백(padding), 외부 여백(margin)은 좌, 우 사이즈만 지정할 수 있다.
		 - <span><div></div></span>: 불가!
         - <span><span></span></sapn>: 가능! 
2) 블록(Block) 요소: 상자(레이아웃)를 만들기 위한 요소들.
         - <div></div>: 대표적인 블록 요소! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도.
         - 요소가 수직으로 쌓임.
         - 가로 너비는 부모 요소의 크기만큼 자동으로 늘어남!
         - 세로 너비는 포함한 콘텐츠 크기만큼 자동으로 줄어듬!
         - 가로(width), 세로(height) 사이즈를 지정할 수 있다.
         - 내부 여백(padding), 외부 여백(margin)은 상, 하, 좌, 우 사이즈를 지정할 수 있다.
         - <div><div></div></div>: 가능!
         - <div><span></span></div>: 가능!

6. HTML 핵심 정리

01. 핵심 요소 정리

- <div>: 블록 요소, 특별한 의미가 없는 구분을 위한 요소. (Division)
- <h1>~<h6>: 블록 요소, 제목을 의미하는 요소, 숫자가 작을수록 더 중요한 제목을 정의. (Heading)
- <p>: 블록 요소, 문장을 의미하는 요소. (Paragraph)
- <img>: 인라인 요소, 이미지를 삽입하는 요소. (Image)
- <ul>: 블록 요소, 순서가 필요없는 목록의 집합을 의미. (Unordered List)
- <li>: 블록 요소, 목록 내 각 항목. (List Item)
- <a>: 인라인 요소, 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor)
- <span>: 인라인 요소, 특별한 의미가 없는 구분을 위한 요소.
- <br/>: 인라인 요소, 줄바꿈 요소. (Break)
- <input>: 인라인 요소 + 블록 요소, 사용자가 데이터를 입력하는 요소.
- <table>: 테이블 요소, 표 요소, 행(Row)과 열(Column)의 집합.
- <tr>: 행(Row)을 지정하는 요소. (Table Row)
- <td>: 열(Column)을 지정하는 요소. (Table Data)

02. 주석

  • <!-- 주석 -->
  • Ctrl+ / 키
  • 수정사항이나 설명 등을 작성
  • 브라우저는 이 태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않음.

03. 전역 속성

  • title="설명": 요소의 정보나 설명을 지정
  • style="스타일": 요소에 적용할 스타일(CSS)을 지정
  • class="이름": 요소를 지칭하는 중복 가능한 이름
  • id="이름": 요소를 지칭하는 고유한 이름
  • data-이름="데이터": 요소에 데이터를 지정

7. CSS 개요

01. 기본 문법, 주석

  • 선택자 { 속성: 값; }
    - 선택자 - 스타일을 적용할 대상
    - 속성: 스타일의 종류
    - 값: 스타일의 값
  • /* 주석 */

02. 선언 방식

  • 내장 방식: <style></style>의 내용으로 스타일을 작성하는 방식
  • 링크 방식: <link />로 외부 CSS 문서를 가져와서 연결하는 방식(병렬 연결)
  • 인라인 방식: 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)
  • @import: CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식(직렬 연결 )

03. 선택자_기본

  • *: 전체 선택자, 모든 요소를 선택.
  • ABC: 태그 선택자, 태그 이름이 ABC인 요소 선택.
  • .ABC: 클래스 선택자, HTML class 속성의 값이 ABC인 요소 선택.
  • #ABC: 아이디 선택자, HTML id 속성의 값이 ABC인 요소 선택.

04. 선택자_복합

  • ABCXYZ 일치 선택자: 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택.
  • ABC > XY 자식 선택자: 선택자 ABC의 자식 요소 XYZ 선택.
  • ABC XYZ 하위(후손) 선택자: 선택자 ABC의 하위 요소 XYZ 선택. '띄어쓰기'가 선택자의 기호!
  • ABC + XYZ 인접 형제 선택자: 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택.
  • ABC ~ XYZ 일반 형제 선택자: 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택.

05. 선택자_가상 클래스 (1)

  • ABC:hover 가상 클래스 선택자: 선택자 ABX 요소에 마우스 커서가 올라가 있는 동안 선택.
  • ABC:active 가상 클래스 선택자: 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택.
  • ABC:focus 가상 클래스 선택자: 선택자 ABC 요소가 포커스되면 선택.
    !! 해당 요소가 focus가 가능한 요소가 아닐때는 해당 요소에 tabindex="-1"을 입력해 준다.

06. 선택자_가상 클래스 (2)

  • ABC:first-child 가상 클래스 선택자: 선택자 ABC가 형제 요소 중 첫째라면 선택.
  • ABC:last-child 가상 클래스 선택자: 선택자 ABC가 형제 요소 중 막내라면 선택.
  • ABC:nth-child(n) 가상 클래스 선택자: 선택자 ABC가 형제 요소 중(n)째라면 선택.
    - 2n: 짝수번째 선택.
    - 2n+1: 홀수번째 선택.
    - n+2: 2번째 요소 부터 선택.
    - n+3: 3번째 요소 부터 선택.
  • ABC:not(XYZ) 부정 선택자: 선택자 XYZ가 아닌 ABC 요소 선택.

07. 선택자_가장 요소

  • ABC::before 가상 요소 선택자: 선택자 ABC 요소의 내부 앞에 내용을 삽입.
  • ABC::after 가상 요소 선택자: 선택자 ABC 요소의 내부 뒤에 내용을 삽입.

08. 선택자_속성

  • [ABC] 속성 선택자: 속성 ABC을 포함한 요소 선택.
  • [ABC="XYZ"] 속성 선택자: 속성 ABC을 포함하고 값이 XYZ인 요소 선택.

09. 스타일 상속

  • 상속되는 CSS 속성들.. 모두 글자/문지 관련 속성들!(모든 글자/문자 속성은 아님 주의!)
    - font-style:  글자 기울기
    - font-weight: 글자 두께
    - font-size: 글자 크기
    ...
  • 강제 상속: inherit;

10. 선택자 우선순위

  • 우선순위: 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법.
  • 점수가 높은 선언이 우선함!
  • 점수가 같으면, 가장 마지막에 해석된 선언이 우선함!
  • !important: 9999999999점(무한대)
  • 인라인 선언: 1000점
  • ID 선택자: 100점
  • Class 선택자: 10점
  • 태그 선택자: 1점
  • 전체 선택자: 0점
  • 상속 : x

연습) 정답은 드래그로 확인!!

  • .list li.item { }: 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21점
  • .list li:hover { }: 클래스 +태그 + 클래스 = 10 + 1 + 10 = 21점
  • .box::before { }: 클래스 + 태그(요소) = 10 + 1 = 11점
  • #submit span { }: 아이디 + 태그 = 100 + 1 = 101점
  • header .menu li:nth-child(2) { }: 태그 + 클래스 + 태그 + 클래스 = 1 + 10 + 1 + 10 = 22점
  • h1 { }: 태그 = 1점
  • :not(.box) { }: 클래스 = 10점 (!!부정 클래스는 점수가 없다.)

8. CSS 속성

01. 개요

  • HTML 속성(Attributes), CSS 속성(Properties)
  • CSS 속성의 종류: 박스 모델, 글꼴, 문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터

02. 너비(width, height)

  • width, height: 요소의 가로/세로 너비.
    - auto: 기본값(요소에 이미 들어있는 속성의 값), 브라우저가 너비를 계산.
    - 단위: px, em, vw 등 단위로 지정.
  • 인라인 요소 auto: 가로 너비, 세로 너비가 자동으로 줄어듬, 가로 너비와 세로 너비를 정의 할 수 없음.
  • 블록 요소 auto: 가로 너비는 자동으로 최대로 늘어나고 세로 너비는 자동으로 줄어듬.
  • max-width, max-height: 요소가 커질 수 있는 최대 가로/세로 너비
    - none: 기본값, 최대 너비 제한 없음
  • min-width, min-height: 요소가 작아질 수 있는 최소 가로/세로 너비
    - 0: 기본값, 최소 너비 제한 없음

03. CSS 단위

  • px: 픽셀
  • %: 상대적 백분율
  • em: 요소의 글꼴 크기
  • rem: 루트 요소(html)의 글꼴 크기
  • vw: 뷰포트 가로 너비의 백분율
  • vh: 뷰포트 세로 너비의 백분율

04. 외부 여백(margin)

  • margin: 요소의 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있음
    - 0: 기본값, 외부 여백 없음
    - auto: 브라우저가 여백을 계산, 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용해요!
    - 단위: px, em, vw 등 단위로 지정
- margin: (top, bottom, left, right);
- margin: (top, bottom) (left, right);
- margin: (top) (left, right) (bottom);
- margin: (top) (right) (bottom) (left);
  • margin-방향: 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들

05. 내부 여백(padding)

  • padding: 요소의 내부 여백(공간)을 지정하는 단축 속성, 요소의 크기가 커짐
    - 0: 기본값, 내부 여백 없음
    - 단위: px, em, vw 등 
- padding: (top, bottom, left, right);
- padding: (top, bottom) (left, right);
- padding: (top) (left, right) (bottom);
- padding: (top) (right) (bottom) (left);
  • padding-방향: 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들

06. 테두리 선(border)과 색상 표현

  • border: 요소의 테두리 선을 지정하는 단축 속성, 요소의 크기가 커짐
  • border: 선-두께(border-width) 선-종류(border-style) 선-색상(border-color);

6.1 border-width

  • border-width: 요소 테두리 선의 두께
    - medium: 기본값, 중간 두께
    - 단위: px, em, % 등 단위로 지정
- border-width: (top, bottom, left, right);
- border-width: (top, bottom) (left, right);
- border-width: (top) (left, right) (bottom);
- border-width: (top) (right) (bottom) (left);

6.2 border-style

  • border-style: 요소 테두리 선의 종류
  • none: 기본값, 선 없음
  • solid: 실선 (일반선)
  • dashed: 파선
- border-style: (top, bottom, left, right);
- border-style: (top, bottom) (left, right);
- border-style: (top) (left, right) (bottom);
- border-style: (top) (right) (bottom) (left);

6.3 border-color

  • border-color: 요소 테두리 선의 색상을 지정하는 단축 속성
  • black: 기본값, 검정색
  • 색상: 선의 색상
  • transparent: 투명
- border-color: (top, bottom, left, right);
- border-color: (top, bottom) (left, right);
- border-color: (top) (left, right) (bottom);
- border-color: (top) (right) (bottom) (left);

6.4 색상 표현

  • 색을 사용하는 모든 속성에 적용 가능한 색상 표현
  • 색상 이름: 브라우저에서 제공하는 색상 이름 ex. red, tomato, royalblue
  • Hex 색상코드: 16진수 색상(Hexadecimal Colors) ex. #000, #FFFFFF
  • RGB: 빛의 삼원색 ex. rgb(255, 255, 255)
  • RGBA: 빛의 삼원색 + 투명도 ex. rgba(0, 0, 0, 0.5)

6.5 요소의 테두리 선을 지정하는 기타 속성들

  • border-방향
  • border-방향-속성

07. 모서리 둥글게(border-radius)

  • border-radius: 요소의 모서리를 둥글게 깎음
    - 0: 기본값, 둥글게 없음
    - 단위: px, em, vw 등 단위로 지정

  • border-radius: 0 10px 0 0; (시계 방향)

08. 크기 계산(box-sizing)

  • box-sizing: 요소의 크기 계산 기준을 지정
  • content-box: 기본값, 요소의 내용(content)으로 크기 계산
  • border-box: 요소의 내용 + padding + border로 크기 계산

09. 넘침 제어(overflow)

  • overflow: 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
    - visible: 넘친 내용을 그대로 보여줌
    - hidden: 넘친 내용을 잘라냄
    - scroll: 넘친 내용을 잘라냄, 스크롤바 생성
    - auto: 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성
  • 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성들
    - overflow-x
    - overflow-y

10. 출력 특성(display)

  • display: 요소의 화면 출력(보여짐) 특성

10.1 각 요소에 이미 지정되어 있는 값

  • block: 상자(레이아웃) 요소
  • inline: 글자 요소
  • inline-block: 글자 + 상자 요소

10.2 따로 지정해서 사용하는 값

  • flex: 플렉스 박스 (1차원 레이아웃)
  • grid: 그리드 (2차원 레이아웃)
  • none: 보여짐 특성 없음, 화면에서 사라짐

10.3 기타

  • table, table-row, table-cell 등..

11. 투명도

  • opacity: 요소 투명도
    - 1: 기본값, 불투명
    - 0~1: 0부터 1사이의 소수점 숫자

12. 글꼴

12.1 font-style

  • 글자의 기울기
    - normal: 기울기 없음(기본값)
    - italic: 이텔릭체

12.2 font-weight

  • 글자의 두께(가중치)
    - normal,400: 기본 두께(기본값)
    - bold, 700: 두껍게
    - 100~900: 100단위의 숫자 9개, normal과 bold 이외 두께

12.3 font-size

  • 글자의 크기
    - 16px: 기본 크기(기본값)
    - 단위: px, em, rem 등 단위로 지정

12.4 line-height

  • 한 줄의 높이, 행간과 유사
    - 숫자: 요소의 글꼴 크기의 배수로 지정
    - 단위: px, em, rem 등의 단위로 지정

12.5 font-family

  • 글꼴1, "글꼴2"(띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶기),
    ... 글꼴계열(필수로 작성!);
    - serif: 바탕체 계열
    - sans-serif: 고딕체 계열
    - monospace: 고정너비(가로폭이 동등) 글꼴 계열
    - cursive: 필기체 계열
    - fantasy: 장식 글꼴 계열

13. 문자

13.1 color

  • 글자의 색상
    - rbg(0,0,0): 검정색(기본값)
    - 색상: 기타 지정 가능한 색상

13.2 text-align

  • 문자의 정렬 방식
    - left: 왼쪽 정렬(기본값)
    - right: 오른쪽 정렬
    - center: 가운데 정렬

13.3 text-decoration

  • 문자의 장식(선)
    - none: 장식 없음
    - underline: 밑줄
    - line-through: 중앙 선

13.4 text-indent

  • 문자 첫 줄의 들여쓰기
    - 0: 들여쓰기 없음(기본값)
    - 단위: px, em, rem 등 단위로 지정
    - 양수는 들여쓰기 음수는 내어쓰기

14. 배경

14.1 background-color

  • 요소의 배경 색상
    - transparent: 투명함(기본값)
    - 색상: 지정 가능한 색상

14.2 background-image

  • 요소의 배경 이미지 삽입
    - none: 이미지 없음(기본값)
    - url("경로"): 이미지 경로

14.3 background-repeat

  • 요소의 배경 이미지 반복
    - repeat: 이미지를 수직, 수평 반복(기본값)
    - repeat-x: 이미지를 수평 반복
    - repeat-y: 이미지를 수직 반복
    - no-repeat: 반복 없음

14.4 background-position

  • 요소의 배경 이미지 위치
    - 방향: top, bottom, left, right, center 방향
    - 단위: px, em, rem 등 단위로 지정(x축, y축)

14.5 background-size

  • 요소의 배경 이미지 크기
    - auto: 이미지의 실제 크기
    - 단위: px, em, rem 등 단위로 지정
    - cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
    - contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤

14.6 background-attachment

  • 요소의 배경 이미지 스크롤 특성
    - scroll: 이미지가 요소를 따라서 같이 스크롤(기본값)
    - fixed: 이미지가 뷰포트에 고정, 스크롤 X

15. 배치

15.1 position

: 요소의 위치 지정 기준

  • static: 기준 없음(기본값)
  • relative: 요소 자신을 기준
  • absolute: 위치 상 부모 요소를 기준
  • fixed: 뷰포트(브라우저)를 기준

15.2 position과 같이 사용하는 CSS 속성들

  • 모두 음수 사용 가능
  • top, bottom, left, right, z-index
  • 요소의 각 방향별 거리 지정
  • auto: 브라우저가 계산(기본값)
  • 단위: px, rm, rem 등 단위로 지정

15.3 요소 쌓임 순서(Stack order)

: 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

  1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
  2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임.
  3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임.
  • z-index: 요소의 쌓임 정도를 지정
    - auto: 부모 요소와 동일한 쌓임 정도(기본값)
    - 숫자: 숫자가 높을 수록 위에 쌓임
  • position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨.

16. 플렉스 (정렬) Container

16.1 display

: Flex Container의 화면 출력(보여짐) 특성

  • flex: 블록 요소와 같이 Flex Container 정의
  • inline-flex: 인라인 요소와 같이 Flex Container 정의

16.2 flex-direction

: 주 축을 설정

  • row: 행 축 (좌 => 우)기본값
  • row-reverse: 행 축 (우 => 좌)

16.3 flex-wrap

: Flex Items 묶음(줄 바꿈) 여부

  • nowrap: 묶음(줄 바꿈) 없음(기본값)
  • wrap: 여러 줄로 묶음

16.4 justify-content

: 주 축의 정렬 방법

  • 일반적으로 수평
  • flex-start: Flex Items를 시작점으로 정렬(기본값)
  • flex-end: Flex Items를 끝점으로 정렬
  • center: Flex Items를 가운데 정렬

16.5 align-content

: 교차 축의 여러 줄 정렬 방법

  • 일반적으로 수직
  • stretch: Flex Items를 시작점으로 정렬(기본값)
  • flex-start: Flex Items를 시작점으로 정렬
  • flex-end: Flex Items를 끝점으로 정렬
  • center: Flex Items를 가운데 정렬

16.6 align-items

: 교차 축의 한 줄 정렬 방법

  • stretch: Flex Items를 교차 축으로 늘림
  • flex-start: Flex Items를 각 줄의 시작점으로 정렬
  • flex-end: Flex Items를 각 줄의 끝점으로 정렬
  • center: Flex Items를 각 줄의 가운데 정렬

17. 플렉스 (정렬) Items

17.1 order

: Flex Item의 순서

  • 0: 순서 없음(기본값)
  • 숫자: 숫자가 작을 수록 먼저

17.2 flex-grow

: Flex Item의 증가 너비 비율

  • 0: 증가 비율 없음(기본값)
  • 숫자: 증가 비율

17.3 flex-shrink

: Flex Item의 감소 너비 비율

  • 1: Flex Container 너비에 따라 감소 비율 적용(기본값)
  • 숫자: 감소 비율

17.4 flex-basis

: Flex Item의 공간 배분 전 기본 너비

  • auto: 요소의 Content 너비
  • 단위: px, em, rem 등 단위로 지정

18. 전환

18.1 transition

: 속성명 지속시간(필수 포함 속성!) 타이밍함수 대기시간;

18.2 transition-property

: 전환 효과를 사용할 속성 이름을 지정

  • all: 모든 속성에 적용
  • 속성이름: 전환 효과를 사용할 속성 이름 명시

18.3 transition-duration

: 전환 효과의 지속시간을 지정

  • 0s: 전환 효과 없음
  • 시간: 지속시간(s)을 지정

18.4 transition-timing-function

: 전환 효과의 타이밍(Easing) 함수를 지정

  • ease: 느리게 - 빠르게 - 느리게(기본값)
  • linear: 일정하게
  • ease-in: 느리게 - 빠르게
  • ease-in-out: 느리게 - 빠르게 - 느리게

18.5 transition-delay

: 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

  • 0s: 대기시간 없음(기본값)
  • 시간: 대기시간(s)을 지정

19. 변환

  • transform: 요소의 변환 효과
  • transform: 변환함수1 변환함수2 변환함수3 ... ;
  • transform: 원근법 이동 크기 회전 기울임;

19.1 2D 변환 함수

  • translate(x,y): 이동(x축, y축)
  • translateX(x): 이동(x축)
  • translateY(y): 이동(y축)
  • scale(x,y): 크기(x축, y축)
  • retate(degree): 회전(각도)
  • skewX(x): 기울임(x축)
  • skewY(y): 기울임(y축)

19.2 3D 변환 함수

  • perspective: 원근법(거리) !!원근법 함수는 제일 앞에 작성해야 함
  • rotate(x): 회전(x축)
  • rotate(y): 회전(y축)

19.2.1 perspective

  • 하위 요소를 관찰하는 원근 거리를 지정
  • 단위: px 등 단위로 지정

19.2.2 perspetive 속성과 함수 차이점

  • perspective: 600px;
    - 적용 대상: 관찰 대상의 부모
    - 기준점 설정: perspective-origin
  • transform: perspective(600px)
    - 적용 대상: 관찰 대상
    - 기준점 설정: transform-origin

19.2.3 backface-visibility

  • 3D 변환으로 회전된 요소의 뒷면 숨김 여부
  • visible: 뒷면 보임
  • hidden: 뒷면 숨김

20. Overwatch 캐릭터 선택 예제

Overwatch_GitHub


8. JS 선행

01. 개요

1.1 표기법

  • dash-case(kebab-case)
    - HTML, CSS
    - the-quick-brown
  • snake_case
    - HTML, CSS
    - the_quick_brown
  • camelCase
    - JS
    - theQuickBrown
  • ParcelCase
    - JS
    - TheQuickBrown

1.2 Zero-based Numbering

  • 0 기반 번호 매기기!
  • 특수한 경우를 제외하고 0부터 숫자를 시작합니다.

1.3 주석

// 주석
/* 주석 */
/**
        * 주석
        * 주석
        * 주석
  */

02. 데이터 종류

2.1 String

: 따옴표를 사용합니다.

let myName = "HEROPY"; 

console.log(myName); // HEROPY

2.2 Number

: 정수 및 부동소수점 숫자를 나타냅니다.

let number = 123;

console.log(number); // 123

2.3 Boolean

: true, false 두 가지 값밖에 없는 논리 데이터입니다.

let checked = true;
let isShow = false;  

console.log(checked); // true
console.log(isShow); // false

2.4 Undefined

: 값이 할당되지 않은 상태를 나타냅니다.

let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.xyz); // undefined

2.5 Null

: 어떤 값이 의도적으로 비어있음을 의미합니다.

let empty = null;

console.log(empty); // null

2.6 Object(객체 데이터)

: 여러 데이터를 Key:Value 형태로 저장합니다. { }

let user = {
			// Key: Value,
			name: 'HEROPY',
			age: 85,
			isValid: true
};      
           
			console.log(user.name); // HEROPY
			console.log(user.age); // 85
			console.log(user.isValid); // true

2.7 Array(배열 데이터)

: 여러 데이터를 순차적으로 저장합니다. [ ]

let fruits = ['Apple', 'Banana', 'Cherry']

         console.log(fruits[0]); // 'Apple'
         console.log(fruits[1]); // 'Banana'
         console.log(fruits[2]); // 'Cherry'

03. 변수, 예약어

변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름

  • var, let, const 
// 재사용이 가능!
// 변수 선언!
let a = 2;
let b = 5;
console.log(a + b); // 7
console.log(a - b); // -3 

// 값(데이터)의 재할당 가능!
let a = 12;
console.log(a); // 12
a = 999;
console.log(a); // 999 

// 값(데이터)의 재할당 불가!
const a = 12;
console.log(a); / 12
a = 999;
console.log(a); // TypeError

예약어: 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

  • Reserved Word 
let this = 'Hello'; // SyntaxError
let if = 123; // SyntaxError
let break = 'true'; // SyntaxError

04. 함수

  • 특정 동작(기능)을 수행하는 일부 코드의 집합(구분)
  • function 
// 함수 선언
function helloFunc() {
         // 실행 코드
         console.log(1234);
}

//함수 호출
helloFunc(); // 1234 

function returnFunc() {
         return 123;
}
let a = returnFunc();
console.log(a); // 123 

// 함수 선언!
function sum(a, b) { // a와 b는 매개변수(Parameters)
         return a + b;
}

// 재사용!
let a = sum(1, 2); // 1과 2는 인수(Arguments)
let a = sum(7, 12);
let a = sum(2, 4);
console.log(a, b, c); // 3, 19, 6 

// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
         console.log('Hello~');
}

// 익명(이름이 없는) 함수
// 함수 표현!
let world = function () {
         console.log('World~');
}

// 함수 호출!
hello(); // Hello~
world(); // World~ 

//객체 데이터
const heropy = {
         name: 'HEROPY',
         age: 85,
         // 메소드(Method)
         getName: function () {
                 return this.name;
         }
};
const hisName = heropy.getName();
console.log(hisName); // HEROPY
// 혹은
console.log(heropy.getName()); // HEROPY

05. 조건문

  • 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문
  • if, else 
let isShow = true;
let checked = false;
if (isShow) {
         console.log('Show!'); // Show!
}
if (checked) {
         console.log('Checked!');
} 

let isShow = true;
if (isShow) {
         console.log('Show!');
} else {
         console.log('Hide?');
}

06. DOM API

(Document Object Model, Application Programming Interface)

1)
//HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box'); 

// HTML 요소에 적용할 수 있는 메소드!
boxEl.addEventListener(1, 2); 

// 인수(Arguments)를 추가 가능!
boxEl.addEventListener(1, 2); 

// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2); 

// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
         console.log('Click~!');
}); 
2)
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box'); 

// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true 

boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false 
3)
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls); 

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach(function () {}); 

// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호
boxEls.forEach(function (boxEl, index) {}); 

// 출력!
boxEls.forEach(function (boxEl, index) {
         boxEl.classList.add(`order-${index + 1}`);
         console.log(index, boxEl);
}); 
4)
const boxEl = document.querySelector('.box'); 

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!! 

// Setter, 값을 지정하는 용도
boxEl.textContent = 'HEROPY?!';
console.log(boxEl.textContent); // HEROPY?!

07. 메소드 체이닝

(Method Chaining)

const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환.
// reverse: 배열을 뒤집기.
// join: 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split(' ').reverse().join(' '); // 메소드 체이닝... 

console.log(a); // Hello~
console.log(b); // ~olleH

08. 질의응답

정답은 드래그해서 확인!!

Q1. The quick brown fox
위 문장을 camelCase(낙타 표기법)로 작성하시오!
A. theQuickBrownFox

Q2. let fruits = ['Apple', 'Banana', 'Cherry'];
위 데이터를 활용해 'Banana'를 콘솔 출력하시오!

A. console.log(fruits[1]);

Q3. 불린 데이터(Boolean)에서 거짓을 의미하는 데이터는?
A. false

Q4. '값이 의도적으로 비어있음'을 의미하는 데이터는?
A. null

Q5. { } 위 데이터의 종류는?
A. Object(객체 데이터)

Q6. let obj = {abc: 123}; console.log(obj.xyz);
위 코드를 통해 콘솔 출력될 값(데이터)은ㅁ?
A. undefined

Q7. 값(데이터)을 제할당할 수 없는 변수 선언 키워드는?
A. const

Q8. 함수에서 값(데이터)을 반환하기 위해 사용하는 키워드는?
A. return

Q9. sum(2, 4); 위 함수 호출에서 2, 4를 무엇이라 하는가?
A. 인자/인수(Arguments)

Q10. fuction sum(a, b) { return a + b; }
위 함수 선언의 a, b와 같이 함수 호출에서 전달받은 인수를 함수 내부로 전달하기 위한 변수를 무엇이라 하는가?
A. 매게변수(Parameters)

Q11. 이름이 없는 함수를 무엇이라 하는가?
A. 익명 함수(Anonymous Function)

Q12. hello 이름의 함수 표현을 작성하고 호출하시오!
A. const hello = function () { };
hello();

Q13. const user = { getName: function () { } }
위 코드의 getName과 같이, 함수가 할당된 객체 데이터의 속성(Property)을 무엇이라 하는가?
A. 메소드(Method)

Q14. 조건이 참(true)인 조건문을 작성하시오!
A. if (true) { }

Q15. 가져온 JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성(Attribute)은?
A. defer

Q16. <div class="box">Box!!</div>
위 HTML 요소의 내용(Content)을 콘솔 출력하시오!
A. const boxEl = document.querySelector('.box');
console.log(boxEl.textContent);

Q17. 값(데이터)을 재할당할 목적의 변수 선언 키워드는?
A. let

Q18. const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 클릭(Click) 이벤트를 추가해, 클릭 시 'Hello~'를 콘솔 출력하시오!
A. boxEl.addEventListener('click', function () {
console.log('Hello~');
});

Q19. <div>1</div div>2</div>
위 2개의 DIV 요소에 JS로 class="hello"를 추가하시오!
A. const divEls = document.querySelectorAll('.box');
divEls.forEach(function (divEl) {
divEl.classList.add('hello');
});

Q20. 'HEROPY'.split(' ').reverse( ).join(' ');
위와 같이, 메소드를 이어 작성하는 방법을 무엇이라 하는가?
A. 메소드 체이닝(Method Chaining)

Q21. const boxEl = document.querySelector('.box');
위 코드의 boxEl 요소에 HTML 클래스 속성의 값으로 'active'가 포함되어 있으면, '포함됨!'을 콘솔 출력하시오!
A. if (boxEl.classList.contains('active')) {
console.log('포함됨!');
}


10. 스타벅스 예제

Starbucks_GitHub
내가 만든 스타벅스 홈페이지 바로 보기

profile
SongE
front-end developer dreamer
이전 포스트

Git/Github 기초

다음 포스트

JavaScript

0개의 댓글