[TIL] 220502(μ›”)

BeanxxΒ·2022λ…„ 5μ›” 2일
0

TIL

λͺ©λ‘ 보기
6/120
post-thumbnail

β˜‘οΈΒ CSS (Cascading Style Sheets)

: μ›Ή νŽ˜μ΄μ§€ μŠ€νƒ€μΌ 및 λ ˆμ΄μ•„μ›ƒμ„ μ •μ˜ν•˜λŠ” μŠ€νƒ€μΌμ‹œνŠΈ μ–Έμ–΄

  • μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€(UI; user interface)
  • 쒋은 μ‚¬μš©μž κ²½ν—˜(UX; user experience) from 직관적이고 μ‰¬μš΄ UI

<link rel="stylesheet" href="index.css"/>
  • <link> μš”μ†Œ: html 파일과 λ‹€λ₯Έ νŒŒμΌμ„ μ—°κ²°ν•˜λŠ” λͺ©μ μœΌλ‘œ μ‚¬μš©
  • rel 속성: μ—°κ²°ν•˜κ³ μž ν•˜λŠ” 파일의 μ—­ν• μ΄λ‚˜ νŠΉμ§•μ„ λ‚˜νƒ€λƒ„
  • href 속성: 파일의 μœ„μΉ˜ μΆ”κ°€ (파일이 같은 폴더 내에 있으면 파일 μ΄λ¦„λ§Œ μž…λ ₯ / 파일이 λ‹€λ₯Έ 폴더 내에 μ‘΄μž¬ν•˜λŠ” κ²½μš°μ—” μ ˆλŒ€ κ²½λ‘œλ‚˜ μƒλŒ€ 경둜 μž…λ ₯)

<!-- 일반적인 html ꡬ쑰 -->

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>Page title</title>
	<link rel="stylesheet" href="index.css"/> <!-- css 파일 적용 -->
  </head>

  <body>
	<header/>
	<div class="container menu">  <!-- ν•˜λ‚˜μ˜ νƒœκ·Έ μš”μ†Œμ— μ—¬λŸ¬ class 적용 -->
	  <nav/>
	  <main/>
	  <aside/>
	</div>
	<footer/>
  </body>
</html>

πŸ’‘Β CSS 문법

  • Selector: μš”μ†Œ μ΄λ¦„μ΄λ‚˜ id, 클래슀 선택

/* css ꡬ쑰 */

body {
  margin: 0;
  padding: 0;
  background: #fff;  /* 배경의 λ‹€λ₯Έ 속성도 ν•œμ€„μ— ν•œλ²ˆμ— 지정 κ°€λŠ₯ */
}
header, footer {
  font-size: large;
  text-align : left / right / center / justify(μ–‘μͺ½ μ •λ ¬);  /* κ°€λ‘œμ •λ ¬μ˜ 경우 */
  padding: 0.3em 0;
  background-color: #4a4a4a; /* background 속성과 λ‹€λ₯΄κ²Œ λ°°κ²½μƒ‰λ§Œ 지정 κ°€λŠ₯*/
  color: red; /* κΈ€μž 색상 */
  border-color: #c3e6cb;  /* ν…Œλ‘λ¦¬ 색상 */
}
#navigation-title {  /* '#'을 λΆ™μ—¬ id둜 μš”μ†Œλ₯Ό 선택해 μŠ€νƒ€μΌλ§ */
  font-family: "SF Pro KR", "MalgunGothic"; /* κΈ€κΌ΄ */
	/* μ•žμ— μž‘μ„±ν•œ 글꼴이 없을 경우 λ’€μ˜ κΈ€κΌ΄ 적용 */
}

.menu-item {  /* '.'을 λΆ™μ—¬ classλ₯Ό 선택해 μŠ€νƒ€μΌλ§ */
  text-decoration: underline; /* 밑쀄 */
  font-weight: 10 /* κ΅΅κΈ° */
  letter-spacing: 10 /* μžκ°„ */
  line-height: 10 /* ν–‰κ°„ */
}

πŸ’‘Β id & class 차이

idclass
#으둜 선택.으둜 선택
ν•œ λ¬Έμ„œμ— 단 ν•˜λ‚˜μ˜ μš”μ†Œμ—λ§Œ μ μš©λ™μΌν•œ 값을 κ°–λŠ” μš”μ†Œ 많음
νŠΉμ • μš”μ†Œμ— 이름을 λΆ™μ΄λŠ”λ° μ‚¬μš©μŠ€νƒ€μΌμ˜ λΆ„λ₯˜μ— μ‚¬μš©

πŸ’‘Β CSS μŠ€νƒ€μΌ 적용 방법

  1. 인라인 μŠ€νƒ€μΌ: νƒœκ·Έ μ•ˆμ—μ„œ μŠ€νƒ€μΌ 적용
  2. λ‚΄λΆ€ μŠ€νƒ€μΌ μ‹œνŠΈ: html 파일의 <style> μš”μ†Œ 내에 μž‘μ„±
  3. μ™ΈλΆ€ μŠ€νƒ€μΌ μ‹œνŠΈ: λ³„λ„μ˜ css 파일둜 적용

πŸ’‘ λ‹¨μœ„

μ ˆλŒ€ λ‹¨μœ„μƒλŒ€ λ‹¨μœ„
px, pt ...%, em, rem, ch, vw, vh ...
  • px(ν”½μ…€): 크기가 κ³ μ •λœ μ ˆλŒ€ λ‹¨μœ„ β†’ μ‚¬μš©μž μ ‘κ·Όμ„± 뢈리. (λͺ¨λ°”일 기기처럼 μž‘μ€ ν™”λ©΄μ΄λ©΄μ„œ λ™μ‹œμ— 고해상도인 κ²½μš°μ—” 적합 X)
  • rem: root의 κΈ€μž 크기, 즉 λΈŒλΌμš°μ €μ˜ κΈ°λ³Έ κΈ€μž 크기가 1rem. (x2 β†’ 2rem, x0.8 β†’ 0.8rem) β‡’ μ ‘κ·Όμ„± 유리
  • vw(viewport width): 1vwλŠ” λ³΄μ΄λŠ” μ˜μ—­ λ„ˆλΉ„μ˜ 1/100
  • vh(viewport height): 1vhλŠ” λ³΄μ΄λŠ” μ˜μ—­ λ†’μ΄μ˜ 1/100
    (화면을 가득 μ±„μš°λŠ” 경우 100vw, 100vh)
  • %: html이 μ°¨μ§€ν•˜λŠ” λͺ¨λ“  μ˜μ—­, 즉 μ§€κΈˆμ€ 보이지 μ•ŠμœΌλ‚˜ 슀크둀 ν–ˆμ„ λ•Œ λ³΄μ΄λŠ” μ˜μ—­κΉŒμ§€ ν¬ν•¨ν–ˆμ„ λ•Œ λΉ„μœ¨


β˜‘οΈΒ λ°•μŠ€λͺ¨λΈ

  • block box: 쀄 λ°”κΏˆμ΄ λ˜λŠ” λ°•μŠ€ (<h1>, <p>, <div>)

  • inline box: 쀄 λ°”κΏˆμ΄ μΌμ–΄λ‚˜μ§€ μ•Šκ³ , 크기 지정을 ν•  수 μ—†λŠ” λ°•μŠ€. width, height 속성 적용x (<span>)

  • inline-block box: 쀄 λ°”κΏˆμ΄ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ” λ™μ‹œμ— block λ°•μŠ€μ˜ νŠΉμ§•μ„ κ°€μ§€λŠ” λ°•μŠ€

    blockinline-blockinline
    μ€„λ°”κΏˆOXX
    기본적으둜 κ°–λŠ” λ„ˆλΉ„(width)100%κΈ€μžκ°€ μ°¨μ§€ν•˜λŠ” λ§ŒνΌκΈ€μžκ°€ μ°¨μ§€ν•˜λŠ” 만큼
    width, height μ‚¬μš© κ°€λŠ₯ μ—¬λΆ€OOX

    πŸ’‘Β λ°•μŠ€ ꡬ성 μš”μ†Œ

  • margin: λ°”κΉ₯ μ—¬λ°±
    - margin: 10px 20px 30px 40px; (top, right, bottom, left)
    - margn: 10px 20px; (10px: top, bottom / 20px: left, right)
    - margin: 10px; (λͺ¨λ“  λ°©ν–₯에 적용)
    - margin-top: 10px; (νŠΉμ • λ°©ν–₯을 μ§€μ •ν•œ 속성도 쑴재)
    βœ‹ 음수 κ°’ 지정 κ°€λŠ₯ (λ‹€λ₯Έ elementμ™€μ˜ 간격이 쀄어듬, 겹치게 ν•˜λŠ” 것도 κ°€λŠ₯)

  • padding: μ•ˆμͺ½ μ—¬λ°±
    - padding: 10px 20px 30px 40px; (top, right, bottom, left)
    βœ‹ λ°°κ²½μƒ‰μ΄λ‚˜ borderλ₯Ό μ μš©ν•˜λ©΄, padding을 더 μ„ λͺ…ν•˜κ²Œ 확인 κ°€λŠ₯

  • overflow 속성: μ½˜ν…μΈ  크기 > λ°•μŠ€ 크기 β†’ μ½˜ν…μΈ κ°€ λ°•μŠ€ λ°”κΉ₯으둜 λΉ μ Έμ˜€μ§€ μ•Šλ„λ‘ μ‚¬μš©ν•˜λŠ” 속성
    - auto κ°’: μ½˜ν…μΈ κ°€ λ„˜μΉ˜λŠ” 경우 슀크둀 생성
    - hidden κ°’: λ„˜μΉ˜λŠ” μ½˜ν…μΈ μ˜ λ‚΄μš©μ„ 보여주고 싢지 μ•Šμ„ 경우
    - overflow-x, overflow-y: xμΆ•, y좕을 지정해 κ°€λ‘œ/μ„Έλ‘œ λ°©ν–₯으둜 슀크둀 ν•  수 μžˆκ²Œλ” 지정

βœ‹Β  box-sizing: border-box : λͺ¨λ“  λ°•μŠ€μ—μ„œ μ—¬λ°±κ³Ό ν…Œλ‘λ¦¬λ₯Ό ν¬ν•¨ν•œ 크기둜 계산



β˜‘οΈΒ CSS Selector

: CSS 속성을 μ μš©ν•  λŒ€μƒμ„ μ„ νƒν•˜λŠ” 방법

πŸ’‘Β κΈ°λ³Έ Selector

  1. 전체 Selector
    : λ¬Έμ„œμ˜ λͺ¨λ“  μš”μ†Œ 선택
    * {}

  2. νƒœκ·Έ Selector
    : 같은 νƒœκ·Έλͺ…을 가진 λͺ¨λ“  μš”μ†Œ 선택 (볡수 선택 κ°€λŠ₯)
    h1 { } div, h1 { }

  3. ID Selector
    : #id둜 μž…λ ₯ν•˜μ—¬ 선택
    #only { }

  4. Class Selector
    : .class둜 μž…λ ₯ν•˜μ—¬ 선택. 같은 classλ₯Ό 가진 λͺ¨λ“  μš”μ†Œ 선택
    .center { }

  5. Attribute Selector
    : 같은 속성을 가진 μš”μ†Œ 선택
    a[href] { } p[id=”only”] { }

πŸ’‘Β μžμ‹ / 후손 / ν˜•μ œ Selector

  1. μžμ‹ Selector
    : 첫 번째둜 μž…λ ₯ν•œ μš”μ†Œμ˜ λ°”λ‘œ μ•„λž˜ μžμ‹μΈ μš”μ†Œ 선택
    header > p { }
     <header>
       <p> βœ”οΈ
     	<span>
     	  <p></p>
     	</span>
       </p>
       <p> βœ”οΈ
     	<span>
     	  <p></p>
     	</span>
       </p>
     </header>

  1. 후손 Selector
    : 첫 번째둜 μž…λ ₯ν•œ μš”μ†Œμ˜ 후손 선택
    header p { }

    <header>
      <p> βœ”οΈ
    	<span>
    	  <p></p> βœ”οΈ
    	</span>
      </p>
      <p> βœ”οΈ
    	<span>
    	  <p></p> βœ”οΈ
    	</span>
      </p>
    </header>

  1. ν˜•μ œ Selector
    : 같은 λΆ€λͺ¨ μš”μ†Œλ₯Ό κ³΅μœ ν•˜λ©΄μ„œ, 첫 번째 μž…λ ₯ν•œ μš”μ†Œ 뒀에 μ˜€λŠ” 두 번째 μš”μ†Œ λͺ¨λ‘ 선택
    section ~ p { }

    ```html
    <header>
      <section></section>
      <p></p> βœ”οΈ
      <p></p> βœ”οΈ
      <p></p> βœ”οΈ
    </header>
    ```

  2. 인접 ν˜•μ œ Selector
    : 같은 λΆ€λͺ¨ μš”μ†Œλ₯Ό κ³΅μœ ν•˜λ©΄μ„œ, 첫 번째 μž…λ ₯ν•œ μš”μ†Œ λ°”λ‘œ 뒀에 μ˜€λŠ” 두 번째 μž…λ ₯ν•œ μš”μ†Œ 선택
    section + p { }

    ```html
    <header>
      <section></section>
      <p></p> βœ”οΈ
      <p></p>
      <p></p>
    </header>
    ```

πŸ’‘Β κΈ°νƒ€ Selector

  1. 가상 클래슀 Selector
    : μš”μ†Œμ˜ μƒνƒœ 정보에 κΈ°λ°˜ν•΄ μš”μ†Œ 선택

    a:link { } /*μ‚¬μš©μžκ°€ λ°©λ¬Έν•˜μ§€ μ•Šμ€ <a>μš”μ†Œλ₯Ό 선택 */
    a:visited { } /*μ‚¬μš©μžκ°€ λ°©λ¬Έν•œ <a>μš”μ†Œλ₯Ό 선택 */
    a:hover { } /* 마우슀λ₯Ό μš”μ†Œ μœ„μ— μ˜¬λ Έμ„ λ•Œ 선택 */
    a:active { } /* ν™œμ„±ν™” 된(클릭된) μƒνƒœμΌ λ•Œ 선택 */
    a:focus { } /* ν¬μ»€μŠ€κ°€ 듀어와 μžˆμ„ λ•Œ 선택 */
  2. UI μš”μ†Œ μƒνƒœ Selector

    input:checked + span { } /*체크 μƒνƒœμΌ λ•Œ 선택 */
    input:enabled + span { } /*μ‚¬μš© κ°€λŠ₯ν•œ μƒνƒœμΌ λ•Œ 선택 */
    input:disabled + span { } /*μ‚¬μš© λΆˆκ°€λŠ₯ν•œ μƒνƒœμΌ λ•Œ 선택 */
  3. ꡬ쑰 가상 클래슀 Selector

    p:first-child { }
    ul > li:last-child { }
    ul > li:nth-child(2n) { }
    section > p:nth-child(2n+1) { }
    ul > li:first-child { }
    li:last-child { }
    div > div:nth-child(4) { }
    div:nth-last-child(2) { }
    section > p:nth-last-child(2n + 1) { }
    p:first-of-type { }
    div:last-of-type { }
    ul:nth-of-type(2) { }
    p:nth-last-of-type(1) { }
  4. λΆ€μ • Selector

    input:not([type="password"]) { }
    div:not(:nth-of-type(2)) { }
  5. μ •ν•©μ„± 확인 Selector

    input[type="text"]:valid { }
    input[type="text"]:invalid { }

πŸ’‘Β ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ 되기 μœ„ν•΄μ„ 

  1. μ»΄ν¬λ„ŒνŠΈ κΈ°λŠ₯λ³„λ‘œ λ¬Άμ–΄μ„œ μ œμž‘
  2. ν™”λ©΄μ˜ κ΅¬μ„±μ΄λ‚˜ 배치 (λ ˆμ΄μ•„μ›ƒ λ””μžμΈ)
  3. ꡡ은 글씨와 같은 νƒ€μ΄ν¬κ·Έλž˜ν”Όμ™€ 색상을 μ μš©ν•˜λŠ” 일
  4. (μ •λ ¬μ΄λ‚˜ 배색에 λŒ€ν•œ 감각)
  5. (UX에 λŒ€ν•΄ κ³ λ―Όν•΄ 보고, UXκ°€ 잘 적용된 μ›Ήμ΄λ‚˜ 앱을 뢄석해 λ³Έ κ²½ν—˜)
profile
FE developer

0개의 λŒ“κΈ€