1. κ°œμš”

1) html, css, js

html : νŽ˜μ΄μ§€μ˜ 제λͺ©, 문단, ν‘œ, 이미지, λ™μ˜μƒ λ“± μ›Ήμ˜ ꡬ쑰λ₯Ό λ‹΄λ‹Ή.

css : μ‹€μ œ 화면에 ν‘œμ‹œλ˜λŠ” 방법(색상, 크기, 폰트, λ ˆμ΄μ•„μ›ƒ λ“±)을 지정해 μ½˜ν…μΈ λ₯Ό κΎΈλ©°μ£ΌλŠ” μ‹œκ°μ μΈ ν‘œν˜„(정적)을 λ‹΄λ‹Ή. μŠ€νƒ€μΌ

js : μ½˜ν…μΈ λ₯Ό λ°”κΎΈκ³  μ›€μ§μ΄λŠ” λ“± νŽ˜μ΄μ§€λ₯Ό λ™μž‘μ‹œν‚€λŠ” 동적 처리λ₯Ό λ‹΄λ‹Ή.

 

2) μ›Ήμ•±μ˜ λ™μž‘μ›λ¦¬

μ£Όμ†Œμ°½μ— νŽ˜μ΄μ§€ μ£Όμ†Œ μž…λ ₯ → 졜초 μš”μ²­(request) → μ„œλ²„ → html 졜초 응닡(response) → μ‚¬μš©μž 컴퓨터(λΈŒλΌμš°μ €)에 ꡬ쑰 확인 → css, js, jpg λ“± μΆ”κ°€ 파일 μš”μ²­ → μ„œλ²„ → μΆ”κ°€ 응닡 → μ‚¬μš©μž 컴퓨터(λΈŒλΌμš°μ €) μ—μ„œ 확인

λ”°λΌμ„œ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“  것을 μ„œλ²„μ— μ—…λ‘œλ“œ, μ„œλ²„μ˜ μ£Όμ†Œ μ„€μ •ν•΄μ„œ μ£Όμ†Œλ‘œ μ ‘κ·Όν•˜λŠ” λͺ¨λ“  μ‚¬λžŒμ—κ²Œ μœ„μ˜ 과정에 따라 λ§Œλ“  νŽ˜μ΄μ§€λ₯Ό 보여쀄 수 있음.

 

3) μ›Ή ν‘œμ€€κ³Ό λΈŒλΌμš°μ €

μ›Ή ν‘œμ€€ : μ›Ήμ—μ„œ μ‚¬μš©λ˜λŠ” ν‘œμ€€ κΈ°μˆ μ΄λ‚˜ κ·œμΉ™, w3c의 ν‘œμ€€ν™” μ œμ • λ‹¨κ³„μ˜ κΆŒκ³ μ•ˆ(rec)에 ν•΄λ‹Ήν•˜λŠ” 기술.

λΈŒλΌμš°μ € 곡급업체(browser vendors) : μ›Ή ν‘œμ€€μ„ ν•΄μ„ν•˜κ³  ν•΄μ„λœ 결과둜 λΈŒλΌμš°μ €λ₯Ό λ§Œλ“¦.

크둜슀 λΈŒλΌμš°μ§• : 쑰금 λ‹€λ₯΄κ²Œ κ΅¬λ™λ˜λŠ” μ—¬λŸ¬ λΈŒλΌμš°μ €μ—μ„œ λ™μΌν•œ μ‚¬μš©μž κ²½ν—˜(같은 ν™”λ©΄, 같은 λ™μž‘ λ“±)을 쀄 수 μžˆλ„λ‘ μ œμž‘ν•˜λŠ” 기술, 방법. (크둜슀 λΈŒλΌμš°μ§• 이슈)

λΈŒλΌμš°μ € μš©μ–΄ : μ°½(window), νƒ­(tab), μ£Όμ†Œμ°½(abbress bar), 뷰포트(viewport, λ Œλ”λ§ λ˜λŠ” μ˜μ—­, λ Œλ”λ§μ΄λž€ λΈŒλΌμš°μ €μ˜ λ·°ν¬νŠΈμ— μ›Ή μ‚¬μ΄νŠΈλ₯Ό 좜λ ₯ν•˜λŠ” ν–‰μœ„)

 

4) μ›Ήμ—μ„œ μ‚¬μš©ν•˜λŠ” 이미지

μ›Ή 이미지 : λΉ„νŠΈλ§΅κ³Ό 벑터가 있음. λΉ„νŠΈλ§΅μ΄λž€ 픽셀이 λͺ¨μ—¬ λ§Œλ“€μ–΄μ§„ μ •λ³΄μ˜ μ§‘ν•©μœΌλ‘œ λ ˆμŠ€ν„° 이미지라고도 뢀름. λ²‘ν„°λž€ 점, μ„ , 면의 μœ„μΉ˜(μ’Œν‘œ), 색상 λ“± μˆ˜ν•™μ  μ •λ³΄μ˜ ν˜•νƒœλ‘œ 이루어진 이미지.

λΉ„νŠΈλ§΅ : .jpeg .gif .png / μ •κ΅ν•˜κ³  λ‹€μ–‘ν•œ 색상을 μžμ—°μŠ€λŸ½κ²Œ ν‘œν˜„. 단 ν™•λŒ€•μΆ•μ†Œ μ‹œ 계단 ν˜„μƒ, ν’ˆμ§ˆ μ €ν•˜μ˜ 단점 있음.

벑터 : .svg / ν™•λŒ€•μΆ•μ†Œ μ‹œ μžμœ λ‘œμ›€, μš©λŸ‰ λ³€ν™”κ°€ μ—†μŒ. 단, μ •κ΅ν•œ 이미지λ₯Ό ν‘œν˜„ν•˜κΈ° μ–΄λ ΅λ‹€λŠ” 단점이 있음.

jpg(jpeg) : 손싀 μ••μΆ•μ΄λΌλŠ” 방식을 μ‚¬μš©ν•˜λŠ”λ° 이미지가 μ†μ‹€λ˜λ©΄μ„œ μ••μΆ•λ˜κΈ° λ•Œλ¬Έμ— μš©λŸ‰μ΄ 획기적으둜 μ€„μ–΄λ“œλ‚˜ μ €μž₯을 많이 ν• μˆ˜λ‘ 색상이 λ°”λΌλŠ” 단점이 있음.

png : 비손싀 μ••μΆ•μ΄λΌλŠ” 방식을 μ‚¬μš©ν•˜λŠ”λ° 손싀이 λ˜μ§€ μ•ŠμœΌλ©΄μ„œ μ••μΆ•λ˜κΈ° λ•Œλ¬Έμ— 이미지 ν’ˆμ§ˆμ€ μœ μ§€λ˜μ§€λ§Œ μš©λŸ‰μ€ 클 수 있음. 투λͺ…도 지원.

gif : ν•˜λ‚˜μ˜ 이미지 파일 μ•ˆμ—λ‹€κ°€ μ—¬λŸ¬ μž₯의 이미지λ₯Ό 담을 수 μžˆλŠ” ꡬ쑰λ₯Ό 가지고 있음. 비손싀 μ••μΆ• 방식을 μ‚¬μš©. 움지, μ• λ‹ˆλ©”μ΄μ…˜ 효과 κ΅¬ν˜„ κ°€λŠ₯. λ‹€μ–‘ν•œ 색상 ν‘œν˜„μ— μ ν•©ν•˜μ§€ μ•ŠμŒ.

webp : jpg, png, gif λͺ¨λ‘ λŒ€μ²΄ν•  수 μžˆλŠ” ꡬ글이 κ°œλ°œν•œ 이미지 포맷. 손싀, 비손싀 μ••μΆ• 방식 λ™μ‹œ 지원. μ• λ‹ˆλ©”μ΄μ…˜ 지원. 투λͺ…도 지원. 단 μ΅œκ·Όμ— λ‚˜μ™”κΈ° λ•Œλ¬Έμ— ν•˜μœ„ν˜Έμ™„μ„± 확인 ν•„μš”.

svg : λ§ˆν¬μ—… μ–Έμ–΄ 기반 벑터 κ·Έλž˜ν”½ ν‘œν˜„. 해상도 영ν–₯μ—μ„œ μžμœ λ‘œμ›€. css 와 js 둜 μ œμ–΄ κ°€λŠ₯. 파일 및 μ½”λ“œ μ‚½μž… κ°€λŠ₯.

 

5) 특수 기호

` : 벑틱, 그레이브

~ : ν‹Έλ“œ, λ¬Όκ²°

! : μ—‘μŠ€ν΄λŸ¬λ©”μ΄μ…˜, λŠλ‚Œν‘œ

@ : μ•³ 사인, 골뱅이

# : 샡, λ„˜λ²„ 사인, 우물 μ •

$ : λ‹¬λŸ¬

% : νΌμ„Όλ“œ

^ : 캐럿, 이상(↑) ν‘œν˜„

& : μ— νΌμ„Όλ“œ

* : μ—μŠ€ν„°λ¦¬μŠ€ν¬, 별

- : ν•˜μ΄ν”ˆ, λŒ€μ‹œ, λ§ˆμ΄λ„ˆμŠ€

_ : μ–Έλ”μŠ€μ½”μ–΄, λ‘œλŒ€μ‹œ, 밑쀄

= : 이퀄, 동등

" : μΏΌν…Œμ΄μ…˜, 큰 λ”°μ˜΄ν‘œ

' : μ•„ν¬μŠ€νŠΈλ‘œν”Ό, μž‘μ€ λ”°μ˜΄ν‘œ

: : 콜둠

; : μ„Έλ―Έμ½œλ‘ 

, : 콀마

. : ν”Όλ¦¬μ–΄λ“œ, λ‹·, 점, λ§ˆμΉ¨ν‘œ

? : ν€˜μŠ€μ³”, λ¬ΌμŒν‘œ

/ : μŠ¬λž˜μ‹œ

| : 버티컬 λ°”

οΌΌ: λ°±μŠ¬λž˜μ‹œ μ—­ μŠ¬λž˜μ‰¬

( ) : νΌλ Œμ„œμ‹œμŠ€, μ†Œκ΄„ν˜Έ, κ΄„ν˜Έ

{ } : 브레이슀, μ€‘κ΄„ν˜Έ

[ ] : λΈŒλž˜ν‚·, λŒ€κ΄„ν˜Έ

< > : μ•΅κΈ€ λΈŒλž˜ν‚·, κΊ½μ‡ κ΄„ν˜Έ

 

6) μ˜€ν”ˆ μ†ŒμŠ€ λΌμ΄μ„ μŠ€

μ˜€ν”ˆμ†ŒμŠ€ : μ–΄λ–€ μ œν’ˆμ„ κ°œλ°œν•˜λŠ” 과정에 ν•„μš”ν•œ μ†ŒμŠ€ μ½”λ“œλ‚˜ 섀계도λ₯Ό λˆ„κ΅¬λ‚˜ μ ‘κ·Όν•΄μ„œ μ—΄λžŒν•  수 μžˆλ„λ‘ κ³΅κ°œν•˜λŠ” 것. 단 μ €μž‘κΆŒ 확인 ν•„μˆ˜.

apache license : μ•„νŒŒμΉ˜ μ†Œν”„νŠΈμ›¨μ–΄ μž¬λ‹¨μ—μ„œ 자체 μ†Œν”„νŠΈμ›¨μ–΄μ— μ μš©ν•˜κΈ° μœ„ν•΄ λ§Œλ“  λΌμ΄μ„ μŠ€λ‘œ 개인적/상업적 이용, 배포, μˆ˜μ •, νŠΉν—ˆ μ‹ μ²­ κ°€λŠ₯.

mit license : mit μ—μ„œ μ†Œν”„νŠΈμ›¨μ–΄ 학생듀을 μœ„ν•΄ κ°œλ°œν•œ λΌμ΄μ„ μŠ€, 개인 μ†ŒμŠ€μ— 이 λΌμ΄μ„ μŠ€λ₯Ό μ‚¬μš©ν•˜κ³  μžˆλ‹€λŠ” ν‘œμ‹œλ§Œ μ§€μΌœμ£Όλ©΄ 됨.

bsd license : 버클리 μΊ˜λ¦¬ν¬λ‹ˆμ•„ λŒ€ν•™μ—μ„œ κ°œλ°œν•œ λΌμ΄μ„ μŠ€, mit 와 동일 쑰건.

beerware : μ˜€ν”ˆμ†ŒμŠ€ κ°œλ°œμžμ—κ²Œ λ§₯μ£Όλ₯Ό μ‚¬μ€˜μ•Ό ν•˜λŠ” λΌμ΄μ„ μŠ€..?

 

 

 

 

2. VS code

1) μœ μš©ν•œ 단좕킀

μ•ŒνŠΈ μ—… = 쀄 μœ„λ‘œ 이동

μ•ŒνŠΈ μ‰¬ν”„νŠΈ λ‹€μš΄ = μ•„λž˜μ— 쀄 볡사

컨트둀 μ‰¬ν”„νŠΈ 라이트 = μ½”λ“œ 선택

μ‰¬ν”„νŠΈ νƒ­ = λ‚΄μ–΄μ“°κΈ°

 

 

 

 

3. λ¬΄μž‘μ • μ‹œμž‘ν•˜κΈ°

1) Doctype(DTD)

html1~4 λŠ” λͺ…μ‹œν•  ν•„μš”κ°€ μ „ν˜€ 없어지고 μ˜ˆμ „ μ‚¬μ΄νŠΈλ₯Ό μœ μ§€λ³΄μˆ˜ν•œλ‹€λ©΄ xhtml 은 μ‹€μ œλ‘œ λ³Ό 수 있음

κ·Έλž˜μ„œ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans … 라고 써있으면 xhtml λ²„μ „μœΌλ‘œ λ§Œλ“€μ–΄μ§„ νŽ˜μ΄μ§€λΌκ³  μƒκ°ν•˜λ©΄ 됨

 

 

 

 

4. μ„ νƒμž

1) κΈ°λ³Έ

전체 μ„ νƒμž : λͺ¨λ“  μš”μ†Œλ₯Ό 선택. ex) *

νƒœκ·Έ μ„ νƒμž : νƒœκ·Έ μ΄λ¦„μœΌλ‘œ μš”μ†Œ 선택.  ex) div, li, ul

클래슀 μ„ νƒμž : 클래슀 속성 값이 abc 인 μš”μ†Œ 선택.  ex) .abc

아이디 μ„ νƒμž : 아이디 속성 값이 abc 인 μš”μ†Œ 선택.  ex) #abc

 

2) 볡합 : κΈ°λ³Έ μ„ νƒμžλ“€μ„ μ‘°ν•©ν•΄μ„œ μ‚¬μš©

일치 μ„ νƒμž : μ„ νƒμž λ‘κ°œλ₯Ό λ™μ‹œμ— λ§Œμ‘±ν•˜λŠ” μš”μ†Œ 선택.  ex) span.orange → span νƒœκ·Έμ˜ orange 클래슀

μžμ‹ μ„ νƒμž : μ„ νƒμžμ˜ μžμ‹ μš”μ†Œ 선택.  ex) ul > .orange → ul νƒœκ·Έ λ°”λ‘œ μ•„λž˜ orange 클래슀

ν•˜μœ„(후손) μ„ νƒμž : μ„ νƒμžμ˜ ν•˜μœ„(μ†μž) μš”μ†Œ 선택.  ex) div .orange → div νƒœκ·Έ μ•„λž˜(λͺ¨λ‘) orange 클래슀

인접 ν˜•μ œ μ„ νƒμž : μ„ νƒμžμ˜ λ‹€μŒ ν˜•μ œ(같은 λΆ€λͺ¨) μš”μ†Œ ν•˜λ‚˜λ₯Ό 선택.  ex) .orange + li → orange 클래슀 λ°”λ‘œ λ‹€μŒμ— μžˆλŠ” li νƒœκ·Έ ν•˜λ‚˜λ§Œ

일반 ν˜•μ œ μ„ νƒμž : μ„ νƒμžμ˜ λ‹€μŒ ν˜•μ œ μš”μ†Œ λͺ¨λ‘λ₯Ό 선택.  ex) .orange ~ li → orange 클래슀 λ°”λ‘œ λ‹€μŒμ— μžˆλŠ” li νƒœκ·Έ λͺ¨λ‘

 

3) 가상 클래슀

:hover : μ„ νƒμž μš”μ†Œμ— 마우슀 μ»€μ„œκ°€ μ˜¬λΌκ°€ μžˆλŠ” λ™μ•ˆ 선택.

:active : μ„ νƒμž μš”μ†Œμ— 마우슀λ₯Ό ν΄λ¦­ν•˜κ³  μžˆλŠ” λ™μ•ˆ 선택.

:focus : μ„ νƒμž μš”μ†Œκ°€ 포컀슀(ν™œμ„±ν™”)되면 선택. λŒ€ν™”ν˜• μ½˜ν…μΈ λ§Œ κ°€λŠ₯. λ‹€λ₯Έ μš”μ†Œλ„ tabindex 속성을 톡해 κ°€λŠ₯ν•˜κ²Œ λ§Œλ“€ 수 μžˆμ§€λ§Œ ꢌμž₯ν•˜μ§€ μ•ŠμŒ.

 

4) 가상 클래슀 μ„ νƒμž

:first-child : ν˜•μ œ μš”μ†Œ 쀑 첫째라면 선택.

:last-child : ν˜•μ œ μš”μ†Œ 쀑 막내라면 선택. 

:nth-child(n) : ν˜•μ œ μš”μ†Œ 쀑 (n)번째라면 선택.  ex) 2n 은 짝수번째 λͺ¨λ‘, 2n+1 은 ν™€μˆ˜λ²ˆμ§Έ λͺ¨λ‘

:not(abc) : μ„ νƒμž abc κ°€ μ•„λ‹Œ μš”μ†Œ 선택.  ex) :not(span) → span 이 μ•„λ‹Œ 것 λͺ¨λ‘

 

5) 속성

[abc] : abc 속성을 ν¬ν•¨ν•œ μš”μ†Œ 선택.

[abc = "xyz"] : 속성 abc λ₯Ό ν¬ν•¨ν•˜κ³  값이 xyz 인 μš”μ†Œ 선택.

 

6) μŠ€νƒ€μΌ 상속 : λΆ€λͺ¨ μš”μ†Œμ— μ§€μ •λœ 속성을 λ™μΌν•˜κ²Œ μžμ‹ μš”μ†Œμ—μ„œ 속성값에 inherit 으둜 μ§€μ •ν•˜λ©΄ 상속됨.

 

 

 

 

5. css 속성

1) box-sizing : μš”μ†Œμ˜ 크기 계산 기쀀을 지정

속성값 : content-box, border-box

content-box : μš”μ†Œμ˜ λ‚΄μš©μœΌλ‘œ 크기 계산, κΈ°λ³Έκ°’

border-box : μš”μ†Œμ˜ λ‚΄μš© + padding + border 둜 크기 계산  ex) width 100px, padding 20px, border 4px 일 λ•Œ width λŠ” μ‹€μ œλ‘œ 총 148px 둜 λŠ˜μ–΄λ‚˜λŠ”λ° 그것을 100px 둜 λ§žμΆ°μ„œ μ„€μ •ν•΄μ€Œ

 

2) μ „ν™˜

transition : μš”μ†Œμ˜ μ „ν™˜ 효과λ₯Ό μ§€μ •ν•˜λŠ” 단좕 속성

transition-property : 속성 이름 지정, all 은 λͺ¨λ‘

transition-duration : μ§€μ†μ‹œκ°„μ„ 지정, ~s

transition-timing-function : 타이밍 ν•¨μˆ˜λ₯Ό 지정, ease 느리게 linear μΌμ •ν•˜κ²Œ ease-in 느리게-λΉ λ₯΄κ²Œ ease-out λΉ λ₯΄κ²Œ-느리게 ease-in-out 느리게-λΉ λ₯΄κ²Œ-느리게 / easing functions μ‚¬μ΄νŠΈ μ°Έκ³ 

transition-delay : λͺ‡ 초 뒀에 μ‹œμž‘ν• μ§€ λŒ€κΈ°μ‹œκ°„μ„ 지정, ~s

 

3) λ³€ν™˜

(1) 2D λ³€ν™˜ ν•¨μˆ˜

- transform : μš”μ†Œμ˜ λ³€ν™˜ 효과

- translate(x,y) / translateX(x) / translateY(y) : 이동

- scale(x,y) : 크기

- rotate(degree) : νšŒμ „(각도)

- skewX(x) / skewY(y) : κΈ°μšΈμž„(xμΆ• λ˜λŠ” yμΆ•)

 

(2) 3D λ³€ν™˜ ν•¨μˆ˜

- rotateX(x) : νšŒμ „(xμΆ•)

- rotateY(y) : νšŒμ „(yμΆ•)

- perspective(n) : 원근법(거리px) / 원근법 ν•¨μˆ˜λŠ” 제일 μ•žμ— μž‘μ„±ν•  것!

 

(3) perspective 속성과 ν•¨μˆ˜ 차이점

- 속성 : perspective: 600px; → κ΄€μ°° λŒ€μƒμ˜ λΆ€λͺ¨μ—κ²Œ 적용, 기쀀점은 perspective-origin 으둜 μ„€μ •

- ν•¨μˆ˜ : transform: perspective(600px) → κ΄€μ°° λŒ€μƒμ—κ²Œ 직접 적용, 기쀀점은 transform-origin 으둜 μ„€μ •

- λ˜‘κ°™μ΄ μ μš©ν•΄λ„ 관점이 λ‹€λ₯΄κΈ° λ•Œλ¬Έμ— 결과물은 살짝 닀름. λ‘˜ λ‹€ 써도 μƒκ΄€μ—†μ§€λ§Œ 속성을 더 μ„ ν˜Έ.

 

(4) backface-visibility

- 3D λ³€ν™˜μœΌλ‘œ νšŒμ „λœ μš”μ†Œμ˜ λ’·λ©΄ μˆ¨κΉ€ μ—¬λΆ€. rotate 둜 μ™„μ „νžˆ νšŒμ „ν•˜μ—¬ 뒷면이 λ³΄μ—¬μ§ˆ λ•Œ 뒷면이 λ³΄μ΄λŠ”μ§€ μ•ˆ λ³΄μ΄λŠ”μ§€ μ„€μ •ν•˜λŠ” 속성. μ†μ„±κ°’μœΌλ‘œ hidden κ³Ό invisible 이 있음.

'πŸ’¨ 패슀트캠퍼슀 > 곡뢀 기둝' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[221021] μ»΄ν“¨ν„°μ˜ 이해, μ†Œν”„νŠΈμ›¨μ–΄ 곡학  (0) 2022.11.17
[221012] JS : μ—°μ‚°μž, ν•¨μˆ˜  (0) 2022.11.17
[220930] μ»΄ν“¨ν„°μ˜ 이해, μ†Œν”„νŠΈμ›¨μ–΄ 곡학  (0) 2022.11.17
[221003-221007] μŠ€νƒ€λ²…μŠ€ 예제  (0) 2022.10.14
[220926-220930] Git / Github  (1) 2022.10.05

+ Recent posts

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”