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

46290 단어 CSS js html CSS

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가지 단계를 가집니다.

초안 (Working Draft, WD)
후보권고안 (Candidate Recommendation, CR)
제안권고안 (Proposed Recommendation, PR)
권고안 (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. 설치 및 실행

구글 검색창에 vscode 입력 > Visual Studio Code Editing. Redefined 클릭

자신에 맞는 운영체제를 선택하고 다운로드

바탕화면에 폴더 하나 생성

Ctrl +, - 로 화면 확대, 축소 가능

단축키 (맥 커맨드 키 = 윈도우 컨트롤 키)
- Shift + Ctrl + P  : 메뉴 검색 
- Ctrl + O : 파일 혹은 폴더 열기
맨 아래 상태바
- 보라색 : 프로젝트(폴더/ 디렉토리)가 열려있지 않다.
- 파란색 : 프로젝트(폴더/ 디렉토리)가 열렸다. 

02. 파일 생성과 삭제

파일 아이콘 클릭

파일 이름 입력 ( !!소문자 : index.html)

! 엔터 or 탭 > html 구조가 완성 됨

파일 아이콘 클릭

파일 이름 입력 ( main.css)

main.css 우클릭 > delete > Move to Trash : 파일 삭제 됨

03. 한글화

사이드바 옆 엑티비티 바에서 확장 프로그램 아이콘 클릭

검색창에 korean 검색 > Korean Language ~~ 클릭 > Install 클릭 > 재부팅 Yes 클릭

04. 정리된 코드 만들기

확장 프로그램 > beautify 검색 > 첫번째 설치

기능기여도 탭 선택 > HookyQR.beautify 드래그

Shift + Ctrl + P > 바로 가기 키 열기 > HookyQR.beautify 더블 클릭 > Alt + Ctrl + L 엔터

지저분한 코드 드래그 > Alt + Ctrl + L > 코드 정리 됨

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

확장 프로그램 > auto 검색 > 첫번째 설치

앞 태그를 바꾸면 뒷 태그도 바뀜

06. 브라우저에 출력

Ctrl + Alt + S : 모든 변경사항 저장

확장 프로그램 > liver server > 첫번째 설치

오른쪽 하단 파란색 상태바에 Go Live가 생김

저장한 파일에 우클릭 > 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로 만들기

아래 파란색 상태바에 공백 클릭 > 공백 숫자 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

Author And Source

이 문제에 관하여(HTML, CSS, JS로 만드는 스타벅스 웹사이트 (1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@songe/HTML-CSS-JS로-만드는-스타벅스-웹사이트

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[TypeORM] 공식문서 보고 따라하는 TypeORM + MySQL 초기설정

Solidity v0.8.0 기반의 복권 컨트랙트 개발

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다