[TIL] 210829

Lee SyongΒ·2021λ…„ 8μ›” 29일
0

TIL

λͺ©λ‘ 보기
11/204
post-thumbnail

πŸ“ 였늘 ν•œ 것

  1. CSS ν•„μˆ˜ κ°œλ… 볡슡

  2. CSS 직접 μž‘μ„±ν•΄λ³΄κΈ°

  3. λ‚΄κ°€ μ§  μ½”λ“œμ™€ κ°•μ˜ λ‚΄μš© 비ꡐ·뢄석


πŸ“š 배운 것

πŸ”Ž CSS ν•„μˆ˜ κ°œλ… + λ³΄λ„ˆμŠ€ κ°œλ…


1. transform

1) 이동 transition(거리)

  • transform: transitionX(100px)

  • transform: transitionY(100px)

  • transform: transition(-50px, -20px) Β Β β€» μˆœμ„œ: (쒌우, μƒν•˜)

2) 크기 scale(배수)

  • transform: scale(1.2)

3) νšŒμ „ rotate(각도)

  • transform: rotate(45deg)

2. transition

  • transition: λŒ€μƒ μ†μ„±ο½œμ§€μ† μ‹œκ°„ο½œλ³€ν™” λ¦¬λ“¬ο½œμ§€μ—° μ‹œκ°„

  • 가상 클래슀 μ„ νƒμž λ˜λŠ” javascript의 λΆ€μˆ˜μ μΈ μ•‘μ…˜μ΄ μžˆμ–΄μ•Όλ§Œ λ°œλ™ κ°€λŠ₯

  • λ³€ν™” 리듬

    • ease : κΈ°λ³Έκ°’
    • linear : μΌμ •ν•œ 속도
    • ease-in-out : 처음 느리고 λ§ˆμ§€λ§‰ 빨라짐
    • steps(n, start/end) : nλ‹¨κ³„λ‘œ λ‚˜λˆ μ„œ λ³€ν™”
    • cubic-bezier(0, 0, 0, 0) : xμΆ• μ‹œκ°„, yμΆ• 진행속도 Β Β β€» 3μ°¨ 베지어 곑선 μ°Έκ³ 
div:hover {
  border-radius: 50%;
  transform: translateX(500px);
  background-color: blue;
  transition: all 3s steps(5, start) 1s;
}

3. μ»€μŠ€ν…€ 속성 μ •μ˜, CSS λ³€μˆ˜ ν™œμš©

  • μ •μ˜ 방법 β†’ --μ»€μŠ€ν…€ 속성: 속성값;

  • 적용 방법 β†’ 속성: var(--μ»€μŠ€ν…€ 속성);

  • λ³€μˆ˜κ°’μ€ ν•˜μœ„ μš”μ†Œμ— μƒμ†λœλ‹€. 즉, μ»€μŠ€ν…€ 속성이 μ§€μ •λœ μš”μ†Œμ˜ λͺ¨λ“  μžμ‹μš”μ†Œλ“€μ— 적용 κ°€λŠ₯ν•˜λ‹€.

  • calc() ν•¨μˆ˜λ₯Ό ν•¨κ»˜ μ΄μš©ν•  수 μžˆλ‹€.
    ex. margin-left: calc(var(--base-space) * 2);

  • 자주 λ°˜λ³΅λ˜λŠ” 속성을 λ³€μˆ˜λ‘œ μ •μ˜ν•΄μ„œ μ‚¬μš©ν•˜λ©΄, κ·Έ 값을 μˆ˜μ •ν•˜κ³  싢을 λ•Œ ν•œ ꡰ데만 μ°Ύμ•„μ„œ 고치면 λœλ‹€. 이λ₯Ό μœ„ν•΄ λ¬Έμ„œ 트리의 루트 μš”μ†ŒμΈ :root에 μ»€μŠ€ν…€ 속성을 μ •μ˜ν•˜λ©΄ νŽΈλ¦¬ν•˜λ‹€.

  • 특히 미디어쿼리λ₯Ό μ΄μš©ν•  λ•Œ 맀우 μœ μš©ν•˜λ‹€. μ•žμ„œ :root에 μ •μ˜ν•΄λ†“μ€ μ»€μŠ€ν…€ 속성듀을 κ·ΈλŒ€λ‘œ 볡사 λΆ™μ—¬λ„£κΈ° ν•œ ν›„ κ·Έ κ°’λ§Œ λ°”κΏ”μ£Όλ©΄ λœλ‹€.

:root {
  --background-color: yellow;
  --font-size: 12px;
}
@media screen and (max-width: 600px) {
  :root {
    --background-color: red;
    --font-size: 8px;
  }
}
  • μ•žμ—μ„œ λ³€μˆ˜κ°’μ΄ μ§€μ •λ˜μ§€ μ•Šμ•˜μ„ κ²½μš°μ—λŠ” μ μš©ν•˜λ €λŠ” μš”μ†Œμ— 직접 default λ³€μˆ˜κ°’μ„ 지정해쀄 수 μžˆλ‹€.
    ex. background-color: var(--background-color, pink);

πŸ”Ž CSS 사전 μ„€μ •


1. κΈ€λ‘œλ²Œ μ…‹μ—… (global setup)

  • :root β†’ κΈ€λ‘œλ²Œ λ³€μˆ˜ μ •μ˜ (μ»€μŠ€ν…€ 속성 μ •μ˜)

  • * β†’ λͺ¨λ“  μš”μ†Œμ— κ³΅ν†΅μ μœΌλ‘œ 적용될 속성 μ •μ˜

μ˜ˆμ‹œ

/* global */

:root {
/* color */
  --color-white: #ffffff;
  --color-light-white: #eeeeee;
  --color-dark-white: #bdbdbd;

/* font size */
  --font-large: 50px;
  --font-medium: 30px;
  --font-regular: 20px;
  --font-small: 15px;
  --font-micro: 10px;

/* font weight */ /* link둜 μ—°κ²°ν•œ ꡬ글 폰트λ₯Ό μ°Έκ³ ν•΄μ„œ μ„€μ • */
  --weight-bold: 700;
  --weight-semi-bold: 600;
  --weight-regular: 400;
}

/* universal tags */

* {
  box-sizing: border-box;
}

2. νƒ€μ΄ν¬κ·Έλž˜ν”Ό (typography)

  • κΈ€μž(ν…μŠ€νŠΈ) λ””μžμΈμ„ κΎΈλ©°μ£ΌλŠ” 것

  • HTML μž‘μ„± μ‹œ μ‚¬μš©ν–ˆλ˜ <h1>~<h6>, <p> 등에 λŒ€ν•΄ μ„€μ •ν•΄μ€€λ‹€

μ˜ˆμ‹œ

h1 {
  font-size: var(--font-large);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin: 16px 0; /* margin의 경우, 개발자 도ꡬλ₯Ό 톡해 ν™•μΈν•œ ν›„ 적절히 μ„€μ •ν•  것 */
}

/* h2, h3, p도 같은 λ°©λ²•μœΌλ‘œ μ„€μ • */ 

πŸ™‹β€β™€οΈ μ½”λ”©ν•˜λ©΄μ„œ 생긴 μ§ˆλ¬Έλ“€

  • 질문 4개λ₯Ό ν•œλ§ˆλ””λ‘œ ν‘œν˜„ν•˜λ©΄, πŸ’’μˆ˜μ§ 쀑앙 정렬이 죽어도 μ•ˆλ¨πŸ’’μ΄μ—ˆλ‹€

  • λͺ‡ μ‹œκ°„μ˜ 검색과 κ³ λ―Ό 끝에 μ΄λ ‡κ²Œ μ €λ ‡κ²Œ κ»΄λ§žμΆ°μ„œ κ²°κ΅­ 결과물은 λ„μ•ˆκ³Ό λΉ„μŠ·ν•˜κ²Œ λ§Œλ“€ 수 μžˆμ—ˆλ‹€. ν•˜μ§€λ§Œ μ–΄λ–»κ²Œ κ·Έλ ‡κ²Œ λ˜λŠ”μ§€ μ›λ¦¬λŠ” 이해가 μ•ˆ 됐닀.

  • λ§ˆμΉ¨λ‚΄ κ°•μ˜λ₯Ό λ΄€λŠ”λ°......align-items: center; 이걸 μ–΄λ–»κ²Œ 생각을 λͺ»ν–ˆμ„κΉŒ. 이 λͺ¨λ“  μ§ˆλ¬Έλ“€μ— λŒ€ν•œ 닡은 μ € μ§€λ§‰ν•œ ν•œ μ€„μ΄μ—ˆλ‹€. flexbox의 μˆ˜ν‰Β·μˆ˜μ§ μ •λ ¬ μ΄ν•΄ν•˜λ €κ³  거의 ν•˜λ£¨λ₯Ό κΌ¬λ°• μŸμ•˜μ—ˆκ³ , κ²°κ΅­ 이해도 ν–ˆλ‹€κ³  λΏŒλ“―ν•΄ ν–ˆμ—ˆλŠ”λ° μ €κ±Έ 까맣게 잊고 μžˆμ—ˆλ‹€λ‹ˆ.

  • λ³€λͺ…ν•˜μžλ©΄, μ΅œκ·Όμ— vertical-alignκ³Ό line-heightκ°€ 이해가 잘 μ•ˆ λΌμ„œ ν‹ˆν‹ˆμ΄ 찾아보고 μžˆμ—ˆλŠ”λ° κ·Έλž˜μ„œ 더 κ½‚ν˜€ μžˆμ—ˆλ˜ κ±° κ°™λ‹€. κ΅¬μ°¨ν•œ λ³€λͺ…이닀. 근데 더 큰 λ¬Έμ œλŠ” 아직도 이 두 κ°œλ…μ€ 이해가 μ•ˆ λœλ‹€λŠ” κ±°λ‹€. κ·Έλž˜μ„œ λ°‘μ˜ 질문 4κ°œλŠ” μ•„μ£Ό ν—ˆλ§ν•˜λ¦¬λ§ŒμΉ˜ μˆœμ‹κ°„μ— 해결이 λ˜μ—ˆμ§€λ§Œ μ „λΆ€ μ§€μš°μ§€ μ•Šκ³  λ‚¨κ²¨λ‘κΈ°λ‘œ ν•œλ‹€.

  • 직접 μ½”λ”©ν•˜λ©΄μ„œ κ·Έλ•Œκ·Έλ•Œ λ– μ˜¬λžλ˜ μ§ˆλ¬Έλ“€κ³Ό μ–΄μ°Œμ €μ°Œν•΄μ„œ κ²°κ΅­ μ°Ύμ•„λ‚Έ μ°μ°ν•œ λ‹΅μ•ˆλ“€μ΄λ‹€.


Q1. logo 이미지와 ν…μŠ€νŠΈλ₯Ό μ–΄λ–»κ²Œ nav에 수직 쀑앙 μ •λ ¬μ‹œν‚¬ 수 μžˆμ„κΉŒ?

vertical-align: middle을 톡해 수직 쀑앙 μ •λ ¬μ‹œν‚€κΈ΄ ν–ˆλŠ”λ° μ •ν™•ν•œ 원리λ₯Ό λͺ¨λ₯΄κ² λ‹€.

Q2. ul에 display: flexλ₯Ό μ§€μ •ν–ˆλŠ”λ°λ„ justify-content: space-between이 μ•ˆ λ¨ΉνžŒλ‹€.

ul에 width: 50%λ₯Ό μ§€μ •ν•΄μ£Όλ‹ˆκΉŒ justify-content: space-between도 λ¨Ήνžˆλ©΄μ„œ 수직 쀑앙 정렬이 됐닀. λ‹€λ§Œ μ΄λ ‡κ²Œ ν•˜λ‹ˆκΉŒ λΈŒλΌμš°μ € μ°½ 크기λ₯Ό μ€„μ˜€μ„ λ•Œ 였λ₯Έμͺ½μ— margin도 μ•„λ‹Œ, HTML λ¬Έμ„œ λ°–μ˜ 여백이 생기고 navbarκ°€ 잘렀 λ³΄μ˜€λ‹€.

Q3. liκ°€ navμ—μ„œ 수직 쀑앙 정렬이 λ˜μ§€ μ•Šκ³  λ‹€μ†Œ μœ„μͺ½μ— λΆ™μ–΄μžˆλ‹€. nav의 logo 이미지가 μ»€μ„œ κ·Έ 크기에 λ§žμΆ°μ„œ li의 높이도 높아진 λ“―ν•œλ° 개발자 λ„κ΅¬λ‘œ 확인해 보면 li μ½˜ν…μΈ λ₯Ό λ‘˜λŸ¬μ‹Έκ³  μžˆλŠ” 여백이 λ°‘μͺ½μ— 쏠렀 μžˆλ‹€. li에 marginμ΄λ‚˜ padding도 λΆ€μ—¬λ˜μ–΄ μžˆμ§€ μ•Šμ€λ° κ·Έ 여백을 μ–΄λ–»κ²Œ μ•„λž˜, μœ„ λ˜‘κ°™μ΄ λ§Œλ“€μ–΄μ„œ navμ—μ„œ liλ₯Ό 수직 쀑앙 μ •λ ¬μ‹œν‚¬ 수 μžˆμ„κΉŒ?

<ul> or <li> 에 line-height: 300% ν˜Ήμ€ line-height: 2.5 ν˜Ήμ€ line-height: 45px ν˜Ήμ€ line-height: 2.5em 을 μ μš©ν•˜λ‹ˆκΉŒ λˆˆλŒ€μ€‘μœΌλ‘œλŠ” 수직 쀑앙 정렬이 λ˜λŠ” κ±° κ°™λ‹€. κ·ΈλŸ¬λ‚˜ λˆˆλŒ€μ€‘μΌ 뿐이고 이게 μ–΄λ–»κ²Œ κ°€λŠ₯ν•œ 건지 원리도 λͺ¨λ₯΄κ² λ‹€. 폰트 맀트릭슀, line-height와 vertical-alignλ₯Ό μ°Έκ³ ν–ˆμœΌλ‚˜ 이해가 μ–΄λ €μ› λ‹€.

Q4. <li> 쀑 HOME 메뉴에 border을 μ”Œμš°λ‹ˆκΉŒ λ‹€λ₯Έ <li>λ“€κ³Ό 쀑앙이 λ§žμ§€ μ•ŠλŠ”λ‹€.

HOME λ©”λ‰΄μ—λ§Œ line-height: 2.3을 μ μš©ν•΄μ„œ 쀑앙을 λ§žμΆ”κΈ΄ ν–ˆμœΌλ‚˜ μ—­μ‹œ 원리λ₯Ό λͺ¨λ₯΄κ² λ‹€.


πŸ”Ž κ°•μ˜λ₯Ό 톡해 배운 것


1. navbar

  • color(폰트 색깔) 속성을 #navbar에 μ§€μ •ν•΄μ„œ ν•œ λ²ˆμ— ν•˜μœ„ μš”μ†ŒκΉŒμ§€ μ „λΆ€ 적용될 수 μžˆλ„λ‘ ν–ˆλ‹€.

  • flexbox ꡐ차좕 쀑앙 μ •λ ¬ β†’ align-items: center πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯

  • navbar-menu-item, 즉 <li>λ“€ 사이λ₯Ό λ„μš°λ €λ©΄ justify-content: space-between 말고 κ·Έλƒ₯ marginμ΄λž‘ padding 값을 λ„£μ–΄μ£Όλ©΄ λœλ‹€.

  • text-decoration: noneκ³Ό list-style: none처럼 항상 λ˜‘κ°™μ΄ μ μš©ν•  속성듀은 맀번 classλ§ˆλ‹€ 지정해주지 말고, μ•„μ˜ˆ /* universal tags */에 a와 li νƒœκ·Έλ₯Ό λͺ…μ‹œν•΄μ„œ 지정해둬라.

  • ꡬ글 폰트λ₯Ό body에 지정해쀬닀.

  • 기본적으둜 ν…μŠ€νŠΈ μœ„μ— 마우슀 μ»€μ„œλ₯Ό μ˜¬λ €λ„ κ·Έ λͺ¨μ–‘이 λ³€ν•˜μ§€ μ•Šλ„λ‘ ν•˜κΈ° μœ„ν•΄ body에 cursor: defaultλ₯Ό 지정해쀬닀.

  • 단, li μœ„μ— 마우슀 μ»€μ„œλ₯Ό μ˜¬λ Έμ„ λ•ŒλŠ” 손 λͺ¨μ–‘μœΌλ‘œ λ°”λ€Œλ„λ‘ cursor: pointerλ₯Ό 지정해쀬닀.

  • border-radiusλŠ” 이 λ¬Έμ„œ λ‚΄μ—μ„œλŠ” 항상 λ™μΌν•œ 값을 μ‚¬μš©ν•  것이기 λ•Œλ¬Έμ— :root에 λ³€μˆ˜κ°’μ„ μ§€μ •ν•΄μ£Όμ—ˆλ‹€.

  • class="navbar-menu-item active"λ₯Ό κ°€λ¦¬ν‚€λŠ” CSS μ„ νƒμžλŠ” navbar-menu-item.active이닀. 이 κ²½μš°μ— .active μ•žμ—μ„œ 띄어쓰기 ν•˜λ©΄ μ•ˆ λœλ‹€.

  • border-radius 속성은 .active와 :hoverμ—μ„œ λ°˜λ³΅λ˜λ―€λ‘œ μ•„μ˜ˆ .nav-menu-item에 ν•œ 번만 써주도둝 ν•œλ‹€.


✨ 내일 ν•  것

  1. CSS 직접 μž‘μ„±ν•΄λ³΄κΈ° μ΄μ–΄μ„œ!
    μ΄μ œλŠ” μ§„μ§œ λ„ˆλ¬΄ κ³ λ―Όν•˜μ§€ 말고 빨리빨리 ν•˜μž. ν•˜λ‚˜λ₯Ό λΆ™μž‘κ³  λ„ˆλ¬΄ 였래 κ³ λ―Όν•˜λŠ” κ²½ν–₯이 μžˆλ‹€. 근데 λ°°μš°λŠ” 건 μ •λ§λ‘œ λ§Žμ€ κ±° κ°™λ‹€. μ •λ§λ‘œ.
profile
λŠ₯λ™μ μœΌλ‘œ μ‚΄μž, ν–‰λ³΅ν•˜κ²ŒπŸ˜

0개의 λŒ“κΈ€