🦁_21.11.04 TIL

BoriΒ·2021λ…„ 11μ›” 6일
0

λ©‹μŸμ΄μ‚¬μžμ²˜λŸΌ_ν”„λ‘ νŠΈμ—”λ“œ 슀쿨 1κΈ°

λͺ©λ‘ 보기
5/60
post-thumbnail

21λ…„ 11μ›” 04일

πŸ“ CSS

πŸ“Ž declarantions

width, height

[좜처: νŠœν† λ¦¬μ–Όλ‘œ λ°°μš°λŠ” HTML & CSS]

border, radius

[좜처: νŠœν† λ¦¬μ–Όλ‘œ λ°°μš°λŠ” HTML & CSS]


속성섀λͺ…
border-widthμ„ μ˜ λ‘κ»˜μ™€ κ΄€λ ¨λœ 속성
border-styleμ„ μ˜ λͺ¨μ–‘κ³Ό κ΄€λ ¨λœ 속성
border-colorμ„ μ˜ 색깔과 κ΄€λ ¨λœ 속성
initialκΈ°λ³Έκ°’μœΌλ‘œ μ„€μ •
inheritλΆ€λͺ¨ μš”μ†Œμ˜ 속성값을 상속
/* μž‘μ„± μˆœμ„œ*/
border: border-width border-style border-color | initial | inherit

margin, padding

  • padding : μ½˜ν…μΈ μ™€ border μ‚¬μ΄μ˜ μ—¬λ°± / background-color μ†μ„±μ˜ 영ν–₯을 λ°›λŠ”λ‹€.
  • border : μ„ 
  • margin : border와 λ°”κΉ₯과의 μ—¬λ°± / background-color μ†μ„±μ˜ 영ν–₯을 받지 μ•Šκ³  투λͺ…ν•œ 색을 μœ μ§€ν•œλ‹€.
  • λ§ˆμ§„ κ²ΉμΉ¨ ν˜„μƒ(margin collapsing)
    • μš”μ†Œμ™€ μš”μ†Œ μ‚¬μ΄μ˜ margin-top/margin-bottom의 곡간이 μžˆμ„ 경우 더 높은 κ°’μ˜ λ§ˆμ§„ κ°’λ§Œ μ μš©λ˜λŠ” ν˜„μƒ
    • λΆ€λͺ¨ μš”μ†Œμ™€ μžμ‹ μš”μ†Œκ°€ μ‘΄μž¬ν•  λ•Œ μžμ‹ μš”μ†Œμ˜ margin-top/margin-bottom 값은 λΆ€λͺ¨μ˜ 높이에 영ν–₯을 λ―ΈμΉ˜μ§€ μ•ŠλŠ” ν˜„μƒ
<div class="parent">
  <div class="child"></div>
</div>  
/* λΆ€λͺ¨μ˜ 높이λ₯Ό μ§€μ •ν•˜μ§€ μ•ŠμœΌλ©΄ μžμ‹μ˜ λ†’μ΄λ§ŒνΌ λΆ€λͺ¨μ˜ 높이가 지정됨 */
.parent {
  background-color: yellow;
}
/* 이 경우 μžμ‹μ˜ margin-top 값이 λΆ€λͺ¨μ˜ 높이에 영ν–₯을 λ―ΈμΉ˜μ§€ μ•ŠμŒ */
.child {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  background-color: red;
}

이런 ν˜„μƒμ„ ν•΄κ²°ν•˜μ§€ μ•ŠμœΌλ©΄ λ‚΄κ°€ κ³„νšν•œ UI와 λ‹€λ₯Έ UIκ°€ ꡬ성될 수 μžˆλ‹€.

  • ν•΄κ²° 방법
    • λΆ€λͺ¨ μš”μ†Œμ— overflor 속성 κ°’ 적용
    • λΆ€λͺ¨ μš”μ†Œμ— display:inline-block 적용
    • λΆ€λͺ¨ μš”μ†Œμ— borderκ°’ 적용

overflow

  • μš”μ†Œμ˜ 컨텐츠가 λ„ˆλ¬΄ μ»€λ‹€λž„ 경우 μš”μ†Œλ₯Ό μ–΄λ–»κ²Œ μ²˜λ¦¬ν• μ§€ 지정(overflow-x, overflow-y의 μΆ• λ³„λ‘œ 값을 μ„€μ •ν•  수 μžˆλ‹€.)

    속성섀λͺ…
    visibleκΈ°λ³Έκ°’, μ½˜ν…μΈ λ₯Ό 자λ₯΄μ§€ μ•ŠλŠ”λ‹€.
    hiddenμ½˜ν…μΈ λ₯Ό μš”μ†Œμ˜ 크기만큼 λ§žμΆ”κΈ° μœ„ν•΄ μž˜λΌλ‚Έλ‹€.
    슀크둀 λ°” 제곡X
    scrollμ½˜ν…μΈ λ₯Ό μš”μ†Œμ˜ 크기만큼 λ§žμΆ”κΈ° μœ„ν•΄ μž˜λΌλ‚Έλ‹€.
    μž˜λ €μ§„ λ‚˜λ¨Έμ§€ 뢀뢄을 확인할 수 μžˆλ„λ‘ 슀크둀 λ°” 제곡 O

background

  • μ›ΉνŽ˜μ΄μ§€μ— 이미지λ₯Ό 넣을 λ•Œ, <img> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” 방법, CSS background 속성을 μ‚¬μš©ν•˜λŠ” 방법 두 가지λ₯Ό 주둜 μ‚¬μš©.
  • <img> νƒœκ·Έ μ‚¬μš©
  1. λ””μžμΈ μš”μ†ŒμΈ 뿐만 μ•„λ‹ˆλΌ μ½˜ν…μΈ μ˜ ν•œ 뢀뢄일 경우
  2. νŽ˜μ΄μ§€λ₯Ό 인쇄할 λ•Œ 이미지가 ν¬ν•¨λ˜κΈΈ 원할 경우
  3. 검색 μ—”μ§„μ—μ„œ 색인화λ₯Ό 원할 경우 (ꡬ글은 λ°°κ²½ 이미지λ₯Ό μžλ™μœΌλ‘œ μƒ‰μΈν™”ν•˜μ§€ μ•ŠλŠ”λ‹€.) <img> νƒœκ·ΈλŠ” alt와 title 속성을 μ΄μš©ν•˜λ©΄ μŠ€ν¬λ¦°λ¦¬λ”κ°€ μΈμ‹ν•˜λŠ”λ° 도움이 λœλ‹€.
  4. 이미지에 μ‹œλ§¨ν‹±ν•œ μ˜λ―Έκ°€ μžˆλŠ” 경우, μ‚¬μš©μžμ—κ²Œ 의미 μ „λ‹¬ν•˜κΈ° 쉽닀.
  • CSS background 속성 μ‚¬μš©
  1. μ½˜ν…μΈ μ˜ 일뢀가 μ•„λ‹ˆκ³  λ””μžμΈμ μΈ μš”μ†Œλ‘œλ§Œ μ‚¬μš©λ˜λŠ” 경우
  2. 인쇄할 λ•Œ 이미지가 ν¬ν•¨λ˜μ§€ μ•Šλ„λ‘ ν•  경우
  3. CSS spritesλ₯Ό μ΄μš©ν•΄ 이미지 속도λ₯Ό ν–₯μƒμ‹œν‚¬ 경우
  4. 이미지 μœ„μ— ν…μŠ€νŠΈκ°€ λ“€μ–΄κ°ˆ 경우
  5. background-size: coverλ₯Ό μ΄μš©ν•΄ μœˆλ„μš° 전체λ₯Ό λ°°κ²½μ΄λ―Έμ§€λ‘œ μ±„μšΈ 경우
  6. λ°˜λ³΅λ˜λŠ” 이미지일 경우
    When to Use HTML <img> Tag and CSS background-image Property
속성섀λͺ…
background-imageURL을 μ΄μš©ν•΄ μ΄λ―Έμ§€μ˜ μ£Όμ†Œμ—μ„œ 이미지λ₯Ό λΆˆλŸ¬μ˜¨λ‹€.
background-color배경색을 지정
background-repeatλ°°κ²½ μ΄λ―Έμ§€μ˜ λ°˜λ³΅μ„ 지정
(repeat, no-repeat, repeat-x, repeat-y, round, space)
background-positionλ°°κ²½ μ΄λ―Έμ§€μ˜ μœ„μΉ˜λ₯Ό 지정
background-attachment배경이미지λ₯Ό κ³ μ •μ‹œν‚¬ 수 μžˆλ‹€.

font

속성섀λͺ…
font-familyκΈ€κΌ΄ 지정
font-sizeκΈ€κΌ΄ 크기 지정
font-weightκΈ€κΌ΄ κ΅΅κΈ° 지정
font-styleκΈ€κΌ΄ μŠ€νƒ€μΌ 지정
text-transformν…μŠ€νŠΈλ₯Ό λŒ€λ¬Έμž, μ†Œλ¬Έμžλ‘œ ν‘œν˜„ κ°€λŠ₯
text-alignν…μŠ€νŠΈ μ •λ ¬
text-decorationν…μŠ€νŠΈλ₯Ό 꾸밈 κ°€λŠ₯

μΆ”μ²œ μ›Ή 폰트 μ‚¬μ΄νŠΈ

μΆ”μ²œ μ›Ή μ•„μ΄μ½˜ μ‚¬μ΄νŠΈ

font format

  • 폰트λ₯Ό κ΅¬ν˜„ν•˜λŠ” 방법, λΈŒλΌμš°μ € λ³„λ‘œ μ„œλ‘œ λ‹€λ₯Έ 포맷을 μ§€μ›ν•˜κΈ° λ•Œλ¬Έμ— λΈŒλΌμš°μ €λ³„ 지원 정보λ₯Ό μ•Œμ•„ λ‘˜ ν•„μš”κ°€ μžˆλ‹€.

    edtλ§ˆμ΄ν¬λ‘œμ†Œν”„νŠΈκ°€ μ›Ήμ—μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄ μ œμ•ˆν•œ 포맷(IE만 지원)
    woffμ—¬λŸ¬ νšŒμ‚¬λ“€μ˜ ν˜‘μ—…μœΌλ‘œ μ œμ•ˆλœ 포맷, κ°€μž₯ 널리 μ‚¬μš©
    woff2woffλ₯Ό κ°œμ„ ν•˜μ—¬ 30%정도 더 μž‘μ€ κΈ€κΌ΄ 파일둜 μ••μΆ• κ°€λŠ₯(폰트 μš©λŸ‰μ„ μ€„μ΄λŠ”λ° 효과적)
    ttfμ• ν”Œκ³Ό λ§ˆμ΄ν¬λ‘œμ†Œν”„νŠΈκ°€ κ³ μ•ˆν•œ 벑터 포맷(λŒ€λΆ€λΆ„μ˜ μ›Ή λΈŒλΌμš°μ €μ—μ„œ 지원)
    otf어도비와 λ§ˆμ΄ν¬λ‘œμ†Œν”„νŠΈκ°€ μ—½λ ₯ν•΄μ„œ λ§Œλ“  ttf κ°œμ„ νŒ
    svg벑터 데이터λ₯Ό μ €μž₯ν•˜λŠ” svgλ₯Ό ν™œμš©ν•œ κΈ€κΌ΄ ν‘œν˜„

opacity

  • μš”μ†Œμ˜ 투λͺ…도 지정

[좜처: νŠœν† λ¦¬μ–Όλ‘œ λ°°μš°λŠ” HTML & CSS]

color(κΈ€μžμƒ‰)

  • ν‘œν˜„ 방법: black, #000, #000000, rgb(0, 0, 0), rgba(0, 0, 0, 0.8), transparent

    색상 μ΄λ¦„λΈŒλΌμš°μ €λŠ” 140가지 색상 이름을 지원(λ‹€λ₯Έ ν‘œν˜„ 방식에 λΉ„ν•΄ μˆ˜κ°€ μ œν•œμ )
    https://www.w3schools.com/colors/colors_names.asp
    RGBλΉ›μ˜ 3 원색인 Red, Green, Blueλ₯Ό ν˜Όν•©ν•˜μ—¬ 0~255의 κ°’μœΌλ‘œ 색 ν‘œν˜„
    HEX
    (16μ§„μˆ˜)    		16μ§„μˆ˜ 6자리 μ½”λ“œλ‘œ 색 ν‘œν˜„
    6자리 μ½”λ“œλŠ” 각각 2μžλ¦¬μ”© Red, Green, Blue에 λŒ€ν•œ 값을 ν‘œν˜„

[좜처: νŠœν† λ¦¬μ–Όλ‘œ λ°°μš°λŠ” HTML & CSS]

πŸ“Ž Text

  • line-height : κΈ€μžμ˜ 높이 지정 / normal(κΈ°λ³Έκ°’), 숫자 κ°’(μ†Œμˆ˜μ  지원), px, em, %
  • letter-spacing : κΈ€μž μ‚¬μ΄μ˜ 간격 쑰절 / normal(κΈ°λ³Έκ°’), px, em
  • text-align : ν…μŠ€νŠΈ μ •λ ¬ / left, right, center, justify
  • text-indent : λ“€μ—¬μ“°κΈ° μ„€μ • / mm, cm, px, em, %
  • text-decoration : ν…μŠ€νŠΈλ₯Ό κΎΈλ©°μ£ΌλŠ” 속성

🏁 제 1회 μžμ‹ λ§Œμ˜ 캐릭터 그리기 κ²½μ§„λŒ€νšŒ

πŸ“Ž HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>character</title>
    <link rel="stylesheet" href="character.css" />
  </head>
  <body>
    <div class="container">
      <div class="face">
        <div class="mouth"></div>
        <div class="face-right"></div>
        <div class="eye-left"></div>
        <div class="eye-right"></div>
        <div class="nose"></div>
        <div class="cheek"></div>
      </div>

      <div class="ear"></div>
      <div class="ear-line"></div>

      <div class="hair-left"></div>
      <div class="hair-right"></div>
      <div class="hair-line"></div>

      <div class="beanie-container">
        <div class="beanie-left"></div>
        <div class="beanie-right"></div>
      </div>

      <div class="mouth"></div>
    </div>
  </body>
</html>

πŸ“Ž CSS

@import "../reset.css";

:root {
  --face-color: #ffd0c0;
  --border: 10px solid #333;
}

.container {
  position: relative;
  top: 100px;
  left: 100px;
}

.face {
  position: relative;
  width: 300px;
  height: 300px;
  border: var(--border);
  border-radius: 100%;
  background-color: var(--face-color);
}

.eye-left,
.eye-right {
  position: absolute;
  top: 120px;
  right: 15px;
  width: 25px;
  height: 45px;
  border-radius: 100%;
  background-color: #333;
}

.eye-left {
  right: 90px;
}

.face-right {
  position: absolute;
  top: 120px;
  right: -25px;
  width: 180px;
  height: 160px;
  border: var(--border);
  border-radius: 100%;
  background-color: var(--face-color);
}

.face-right::after {
  content: "";
  position: absolute;
  top: -130px;
  right: 15px;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background-color: var(--face-color);
}

.nose {
  position: absolute;
  right: 50px;
  bottom: 90px;
  z-index: 10;
  width: 35px;
  height: 35px;
  border-top: var(--border);
  border-top-left-radius: 35px;
  border-top-right-radius: 35px;
  transform: rotate(100deg);
}

.cheek {
  position: absolute;
  bottom: 90px;
  left: 120px;
  z-index: 10;
  width: 55px;
  height: 35px;
  border-radius: 100%;
  background-color: #f28888;
}

.mouth {
  position: absolute;
  left: 220px;
  bottom: 60px;
  width: 45px;
  height: 40px;
  border-top: var(--border);
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  transform: rotate(180deg);
}

.ear {
  position: absolute;
  top: 150px;
  left: -50px;
  width: 150px;
  height: 125px;
  border-left: 10px solid #333;
  border-bottom: 10px solid #333;
  border-radius: 100%;
  background-color: var(--face-color);
  transform: rotate(35deg);
}

.ear-line {
  position: absolute;
  bottom: 70px;
  width: 50px;
  height: 30px;
  border-top: var(--border);
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  transform: rotate(10deg);
}

.hair-left {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 250px;
  height: 100px;
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  background-color: #333;
  transform: rotate(160deg);
}

.hair-right {
  position: absolute;
  top: 50px;
  left: 243px;
  width: 80px;
  height: 40px;
  border-top-left-radius: 80px;
  border-top-right-radius: 80px;
  background-color: #333;
  transform: rotate(30deg);
}

.hair-line {
  position: absolute;
  bottom: 95px;
  left: -10px;
  width: 80px;
  height: 80px;
  border-top: 20px solid #333;
  border-top-left-radius: 200px;
  border-top-right-radius: 200px;
  transform: rotate(70deg);
}

.beanie-container {
  position: absolute;
  top: -70px;
  left: -80px;
  width: 339px;
  transform: rotate(-15deg);
}

.beanie-container::after {
  content: "";
  position: absolute;
  top: 85px;
  left: -20px;
  width: 349px;
  height: 100px;
  border: var(--border);
  border-radius: 40px 40px 18px 18px;
  background-color: #ff665a;
}

.beanie-left,
.beanie-right {
  position: absolute;
  width: 170px;
  height: 170px;
  background-color: #ff665a;
}

.beanie-left {
  left: 0;
  border-top: var(--border);
  border-left: var(--border);
  border-top-left-radius: 170px;
}

.beanie-right {
  right: 0;
  border-top: var(--border);
  border-right: var(--border);
  border-top-right-radius: 170px;
}

마무리

  • velog에 적용이 μ•ˆλ˜λŠ” λ§ˆν¬λ‹€μš΄μ΄ κ½€ λ§Žμ•„μ„œ μ•„μ‰¬μš΄ 뢀뢄이 생긴닀.
    => 정리병이 돋고 μžˆλ‹€!
  • 제 1회 μžμ‹ λ§Œμ˜ 캐릭터 그리기 κ²½μ§„λŒ€νšŒκ°€ μ—΄λ ΈμŠ΅λ‹ˆλ‹€. μ˜ˆμ—μ—μ—μ—πŸ’ƒ
profile
Bori
이전 포슀트

🦁_21.11.03 TIL

λ‹€μŒ 포슀트

🦁_21.11.05 TIL

0개의 λŒ“κΈ€