전반적인 css 내용에 대해 기록해보기. ✏️

✔️ What I Learned

CSS

1. css를 적용하는 방법

3가지가 있다.

• inline style (가독성, 유지보수 어려움)
• style 태그 사용 (html파일 헤드부분에 작성, 유지보수에 불리함)
• css 파일 분리하기 (head 안에 적어줌)

  <link href="./style.css" rel="stylesheet" type="text/style" />

2. 부모 자식 선택자, 다중 선택자

선택자 사이의 공백 유무에 따라 자손 선택자, 다중 선택자로 나뉜다.

.box #title {
    color : red
}

.box#title {
    color : red
}

위는 자손 선택자이다. 여러개의 선택자를 공백으로 연결해서 작성했다. 자손 선택자는 특정 부모 요소 안에 있는 자식 요소만 선택할 수 있음!
아래는 다중 선택자이다. 공백 없이 연결하여 만들 수 있고, 중첩된 선택자들을 모두 만족하는 요소를 선택한다.

3. 박스 모델

모든 html 요소는 박스 모양으로 구성되어있다. 우리는 이것을 박스모델(box-model)이라고 부른다.
박스모델은 html 요소를 패딩(padding) , 테두리(border) , 마진(margin) 그리고 내용(content) 으로 구분한다.

content - 요소의 실제 내용이 차지하는 영역
padding - 내용과 테두리 사이의 간격, 내부 여백에 해당
border - 내용과 패딩을 감싸는 테두리
margin - 테두리와 이웃하는 요소 사이의 간격, 외부 여백에 해당
box-sizing - 요소의 너비와 높이를 계산하는 방법 지정

• box-sizing
  

4. 가상 클래스 선택자

:first-child 첫번째 자식 선택
:last-child 마지막 자식 선택
:nth-child(n) 모든 형제 요소 중 n번째 요소를 선택. n자리에는 간단한 함수나 특정한 숫자가 들어올 수 있다.
:first-of-type 부모태그 안의 형제요소 중 자신의 유형과 일치하는 제일 첫 요소
:hover 마우스를 요소에 올렸을 때
:active 활성화된 요소를 선택 하는 가상 클래스 선택자
focus focus를 받고있는 입력창들의 요소를 선택 하는 가상 클래스 선택자
visited 사용자가 방문한 적 있는 링크를 선택 하는 가상 클래스 선택자

5. 가상 요소 선택자

가상 요소 선택자로는 before과 after가 있으며 가상 요소 선택자를 이용하면 실제로 html요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다. 즉, html을 길게 쓰지 않고도 css만으로도 간단히 새로운 요소를 만들거나 조작할 수 있음!

아래와 같은 형태의 박스를 만들 때, 원래는 html에 box를 두개 만들어야 하지만, 가상 요소 선택자를 활용해도 아래와 같은 이미지가 동일하게 나온다.

.box1{
    width : 200px;
    height: 300px;
    background-color: yellow;
}
.box1:after{
    content:"나는 박스2입니다.";
    display: block;
    background-color: blue;
} 
//html에는 box1만 존재하는 상태

❗️가상 요소 선택자는 html에 존재하지 않으므로, 인위적으로 요소 내에 들어갈 내용(content)를 작성해 주어야 한다. 없으면 화면에 그려지지 않음❗️

6. 형제 요소 선택자

같은 부모를 가지고 있는 형제 요소들을 선택할 수 있다.

<div class="container">
	 <p class="text">나는 text입니다.</p>
	 <span>나는 span입니다.</span>
	 <span>나는 span입니다.</span>
	 <p>나는 p입니다.</p>
	 <p>나는 p입니다.</p>
</div>

.text ~ span {
	background : red
} //.text와 같은 부모를 가지고 있는 형제 요소들 중, span을 선택한 것!

7. flex-wrap, flex-item

1. flex-wrap
   flex-item이 여러개일 때, 아이템들의 줄바꿈을 허용할 것인지 말 것인지를 결정한다. 줄바꿈을 허용하지 않을 경우, 아이템이 아무리 많아져도 무조건 한줄에 들어감.

   flex-wrap : nowrap (기본값) - item의 줄바꿈을 허용하지 않는다. item이 아무리 많아져도 무조건 한줄에 들어가게 된다.
   

   flex-wrap : wrap item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어간다.
   

❗️align-items는 flex-items이 한 줄일 때 우선 적용!!
item이 두 줄 이상인 상태에서 정렬을 원하면, align-content라는 속성을 이용하기.

2. flex-item
   flex-container란 display:flex가 적용된 요소를 뜻한다.(즉, 부모 박스)
   flex-item이란 flex-container가 안의 각각의 아이템을 뜻한다.
   

flex-item의 속성에는 여러가지가 있다.
order ➡️ item의 순서 지정
flex-basis ➡️ item의 기본 사이즈 지정
flex-shrink ➡️ 설정된 값(숫자)에 따라 flex-container 요소 내부에서 flex-item 요소의 크기 축소
flex-grow ➡️ flex-item 요소가 flex-container 요소 내부에서 할당 가능한 공간 비율 선언

❗️이러한 속성들은 외울 필요가 없고, 각각의 속성들이 어떤 기능을 하는지 이해하는 것이 중요하다. 이후에 필요할 때 마다 찾아보면서 사용하기!

8. HTML의 글씨체 바꾸기, 웹폰트

html 요소의 글씨체를 바꾸고 싶다면 font-family를 이용하면 된다.

.선택자{
	/* 폰트이름에 공백이 있는 경우 */
	font-family:"폰트 이름","폰트 이름2","폰트 이름3"
	/* 폰트이름에 공백이 없는 경우 */
	font-family:폰트이름,폰트이름2,폰트이름3
	/* 혼용해서 사용할 경우 */
	font-family:폰트이름,"폰트 이름2"
} // 첫 번째 폰트 파일을 찾을 수 있다면 첫 번째 폰트를 적용하고, 없다면 다음 폰트 파일을 찾아 적용하는 식으로 우선 순위를 두게 되는 것.

웹폰트 : 두가지의 방법이 있다.
1. @font-face
2. @import

☝🏻 @font-face 사용하기

1. 웹폰트 파일을 준비한다. (확장자명: woff / woff2 / ttf / eot)
2. css에서 @font-face 를 이용해 폰트 파일을 불러온다.
3. @font-face 안에서 해당 폰트 파일을 어떤 이름의 font-family로 지정할 것인지 설정한다.
   

✌🏻 외부 서비스에서 제공하는 링크를 이용하기

웹폰트 링크를 제공하는 서비스에는 여러가지가 있지만, 구글폰트가 대중적으로 사용된다.

1. google fonts 사이트에 접속 후 , 원하는 폰트 옆에 있는 select this style를 클릭한다.
   
2. use on web 항목에서 import를 선택하고, 해당 import 구문을 css파일 내에 입력한다.
   
3. css rules to specify families를 참고하여 font-family를 적용한다.
   

9. 폰트관련 속성들

• text-decoration
  텍스트에 장식용 선을 추가한다.

  /* 해당 속성값들 중 택1 해서 사용할 수 있다*/
  text-decoration: underline | overline | line-through | none

• line-height
  텍스트의 행간을 설정한다.

  line-height: 1.8

• letter-spacing
  텍스트의 자간을 설정한다.

  letter-spacing: 0.1rem

• word-spacing
  텍스트의 단어 간 간격을 지정합니다.

  word-spacing : 2px

• text-align
  블록요소나 표안에서 텍스트의 가로 정렬방식을 지정한다.

  text-align : center | left | right | justify

• vertical-align
  인라인 요소나 표안에서 텍스트의 세로 정렬 방식을 지정한다.

  vertical-align : top | middle | bottom

• text-indent
  텍스트의 들여쓰기를 설정한다.

  text-inedent: 10%

• text-transform
  영문 텍스트의 대소문자를 바꿀 수 있다.

  text-transform: cpaitalize | none | uppercase | lowercase

• word-break
  텍스트가 콘텐츠박스 영역 밖으로 넘쳤을 때, 어떻게 줄을 바꿀지 설정한다.

  word-break: keep-all | break-all

• overflow-wrap
  단어가 콘텐츠 박스 영역 밖으로 넘쳤을 때, 줄바꿈 여부를 설정한다.

  overflow-wrap: normal | break-word

• overflow-wrap vs word-break
  비슷해 보이는 두 속성의 차이점은?!
  

  break-all을 사용하는 word-break의 경우에는 모든 단어를 음절 단위로 쪼개게 된다.
  따라서 예시와 같은 문장의 경우엔 오히려 문단을 읽기가 불편해짐!
  반면에 break-word를 사용하는 overflow-wrap같은 경우에는 사용자가 문장을 읽기 편하도록 띄어쓰기 기준으로 줄바꿈을 한다.
  단어가 길어서 content 영역 밖으로 넘칠때에만 단어 중간에 줄바꿈을 함. 가독성이 더 좋음!

• overflow
  콘텐츠가 커서 요소 안에서 내용을 다 보여주기 힘들 때 어떤 방식으로 보여줄 지 설정한다.

  overflow: visible | hidden | scroll | auto

• text-overflow
  줄바꿈을 하지 않을 때, 요소 밖으로 넘치는 text를 어떻게 표기 할 것인지 설정한다.

  text-overflow: clip | ellipsis 

❗️text-overflow를 적용하기 전 선행 조건❗️
white-space : nowrap;
overflow : hidden;

10. 단위

1. 절대단위 - 외부 요인의 영향을 받지 않고 절대적인 값을 지니는 단위 (cm, m, kg, g등)

   px = pixel = 화소
   화면을 구성하는 가장 기본이 되는 단위

   px은 웹에서 가장 많이 사용되는 절대 단위이며 흔히 화소라 불립니다.
   디지털 화면은 수많은 작은 네모들로 구성이 되어있으며, 이 네모 한 칸이 1px입니다.

   pt(포인트) = 1/72 inch(인치)
   인쇄를 위한 단위

   pt는 인쇄를 위한 단위이기때문에 웹에서는 잘 사용하지 않습니다.
   보통 워드 프로세서 등 문서 편집 프로그램에서 pt를 많이 사용합니다.

2. 상대단위 - 외부 요인의 영향을 받아 유동적인 값을 지니는 단위 (%등)

   %
   부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용합니다.

   em
   스타일 지정 요소의 font-size 속성값에 비례하여 값을 결정합니다.
   font-size : 16px 인 경우
   1em => 16 1 = 16px
   0.8em => 16 0.8 = 12.8px
   3em => 16 * 3 = 48px
   
   rem
   최상위 html 요소의 font-size속성 값에 비례하여 값을 결정합니다.
   font-size : 16px 인 경우
   1rem => 16 1 = 16px
   0.8rem => 16 0.8 = 12.8px
   3rem => 16 * 3 = 48px

11. Cascading(캐스케이딩)

css에서 캐스케이딩은, 브라우저에 어떤걸 먼저 그려줄 지 결정하는 우선순위 적용 원리다. 우선순위를 적용하려면 적용할 기준이 필요함! (중요도, 명시도, 선언순서)

1. 중요도

   ❗️중요도 순위를 정리하자면,

   1. 인라인 스타일 css
   2. style 요소 안에 있는 css
   3. link로 연결한 css파일
   4. 사용자 스타일 시트
   5. 브라우저 스타일 시트

2. 명시도
   선택할 대상을 구체적으로 특정할수록 명시도가 높아진다.

   부모에게 상속받은 속성 < 전체 선택자 < 태그 선택자 < 클래스 선택자, 가상 선택자 < ID 선택자
   선택자는 광범위 할수록 우선순위가 낮고, 구체적이고 작은 범위일수록 우선순위가 높다.

   ❗️만일 명시도(구체성)을 강제로 끌어올리고 싶다면!?
   !important 라는 명령어를 이용하는 방법이 있다! 해당 명령어는 모든 조건을 무시하고 강제로 명시도를 최상위로 끌어올린다. 잘못 사용하면 소스코드 전체의 우선순위가 꼬일 수 있기때문에 주의를 기울여 사용할 것!

3. 선언 순서
   나중에 선언한 스타일이 우선 적용된다. 만일 명시도가 동일한 여러개의 선언이 중첩 되어 있을 경우, 가장 나중에 선언한 스타일을 적용한다.

11. 배경

• background-image
  요소의 배경 이미지를 한 개, 혹은 여러개 지정한다.

  background-image: url("이미지 경로")
  
  _백그라운드 이미지는 한개만 지정할 수도 있지만, 여러개의 이미지를 중첩시키는것도 가능_
  
  **이미지 중첩하기**
  background-image: url("이미지 경로") , url("이미지 경로2")

  이렇게 background-image를 여러개 지정하게 되면 앞에 있는 것이 가장 위에 깔리고, 뒤에 있는 것이 아래에 깔리게 된다. 또한 linear-grandient() 등의 기능을 이용하여 그라데이션 배경을 만드는것도 가능함

  ❗️ 그라데이션 배경 만들기

  background-image: liner-gradient(방향, 시작색상, 종료 색상)

• background-position
  요소의 배경 이미지의 위치를 지정한다.

  /* 다섯가지 키워드를 조합해서 위치를 지정 */
  background-position: center;
  background-position: top right;
  background-position: left;
  background-position: bottom center;
  
  /* x축과 y축 수치 직접입력 */
  background-position: 50px 24px; (각각 x축 y축)

• background-repeat
  요소의 배경 이미지의 반복 여부와 반복 방향을 지정

  background-repeat: no-repeat | repeat | repeat-x | repeat-y

• background-size
  요소의 배경 이미지의 크기를 지정

  background-size: cover | auto | contain 
  
  /* 직접 픽셀을 정해줄 수도 있다. */
  background-size: 200px 120px 

• background-attachment
  요소의 배경 이미지의 스크롤 여부를 지정

  background-attachment: fixed | scroll(기본값) | local 

• background 단축 속성

  background 관련 속성들을 한번에 지정
  
  /* background : color imageUrl repeat position/size attachment */
  background : red url("이미지 경로") no-repeat center/cover fixed

• object-fit
  img, video 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정

  /* 네개 중 하나를 선택해서 사용합니다. */
  object-fit : cover / fill(기본값) / contain / none

• object-position
  img, video 등 대체요소의 콘텐츠 정렬 방식을 지정

  object-position : 100px 40px

12. 색상

색상 이름 표기, HEX 색상코드, rgb 색상코드 3가지로 색상을 표기할 수 있다.

• 색상을 표기할 수 있는 방법에는 3가지가 있다.

1. 색상 이름 표기법

   color: red

   위처럼 웹 안전 색상이라고 불리는 216가지 색상을 이름으로 표기할 수 있다.
   웹 안전 색상은 어떤 운영체제, 어떤 브라우저에서도 안전하게 그려지는 색을 뜻한다.

2. HEX 색상코드

   색상을 16진수 여섯자리로 표기하는 방법이다!

   color: #94FB11

   Hex 색상 코드는 실무에서 가장 많이 사용되는 색상 표기 방법이며, 짧게 Hex코드라고 부른다.
   또한 Hex코드는 #ffffff ~ #000000 사이의 값을 가진다.

3. rgb 색상코드

   rgb(red, green, blue) 값을 이용해 색상을 표기하는 방법이다.

   color : rgb(251,241,17)

   rgba(red, green, blue, opacity)라는 추가 속성을 이용하면 색상에 투명도도 적용할 수 있다.

   color : rgba(0, 0, 0, 0.5)

❗️opacity 는 요소의 불투명도를 설정한다. 0~1사이의 숫자를 지정 할 수 있음
opacity : 0.22

12. css에서 함수 사용하기 (calc())

calc() 이라는 함수를 이용하면, 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용할 수 있다.

덧셈, 뺄셈

.item1{
	background: red;
	width: calc(50px + 50px);
	height: 50px;
}
.item2{
	background: blue;
	width: calc(100% - 120px);
	height: 50px;
}

❗️calc() 함수 사용시 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백을 주어야 한다!!

곱셈, 나눗셈

.item3{
	background: green;
	width: calc(2*100px);
	height: 50px;
}
.item4{
	background: orange;
	width: calc(100%/4);
	height: 50px;
}

13. position 이란?

html 요소가 배치되는 방식을 결정하는 속성

포지션의 속성값
1. static(기본값)
2. relative
3. absolute
4. fixed
5. sticky

position에 어떠한 속성값을 입력했느냐에 따라,
top, left, bottom, right 속성을 이용해 요소의 좌표값을 변경하는 방식이 달라진다.

14. z-index

• position을 이용해 요소의 위치를 옮기다 보면 여러개의 요소가 겹쳐지는 경우가 생기는데,
  이런 상황에서 뭐가 더 앞으로 나와야 하는지 z-index를 사용해 우선 순위를 정할 수 있다.

• z축이란? ➡️ 우리가 흔히 아는 2차원 공간을 3차원 공간으로 확장하게 되면 z축 이 하나 더 생기게 된다.
  

  z-index 실습!

  <body>
      <div class="container">
          <div class="item item1">
              z-index: 4
          </div>
          <div class="item item2">
              z-index: 2
          </div>
          <div class="item item3">
              z-index: 1
          </div>
          <div class="item item4">
              z-index: auto
          </div>
      </div>
  </body>

15. transition

css속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어 줄 수 있다.

1. transition-property
   어떤 속성(property)에 transition을 적용할 것 인지 를 지정합니다.

   transition-property: color,trasform

   ❗️위의 코드는 color, transform 처럼 특정 프로퍼티를 지정해준 것

2. transition-duration
   transition에 걸리는 시간 을 지정합니다.

   transition-duration: 0.2s

   ❗️위의 코드는 전환효과(transition)에 걸리는 시간을 지정한다. 즉, 0.2초 동안 트랜지션이 일어나게 됨. duration은 초(s), 혹은 밀리초(ms) 단위로 지정이 가능하다.

3. transition-timing-function
   transition의 속도 패턴을 지정한다. transition의 변화가 일정한 속도로 일어날 것 인지, 아니면 빠르게 시작했다가 느리게 끝날 것 인지 같은 속도 패턴!

   transition-duration: ease-in-out | linear | ease | ease-in | ease-out 

   ease-in-out 천천히 시작 => 정상 속도 => 빠르게 종료
   linear 일정한 속도로 변화
   ease 시작 시 점점 빠르게 => 느려지며 종료
   ease-in 천천히 시작 => 속도를 높여 종료
   ease-out 빠르게 시작 => 천천히 종료

   각각의 timing-function이 어떤 특징을 가지고 있는지, 아래 링크를 통해 확인해보기!
   CSS - Transition timing function sample

4. transition-delay
   transition 요청을 받은 후 실제로 실행되기까지 기다려야 하는 시간의 양 을 지정한다.

   transition-delay: 2s

   ❗️ 위의 코드는 전환효과(transition)가 시작되기까지 걸리는 시간을 지정한다. 즉, 이벤트가 발생한 시점으로부터 2초 이후에 트랜지션이 일어나게 되는 것! delay는 초(s), 혹은 밀리초(ms) 단위로 지정이 가능

   🌟 transition 속성 한번에 적어주기!

   

16. transform

CSS 에서의 transform 은 단어의 의미대로 대상이 되는 요소에 이동, 회전 확대/축소, 비틀기 등의 변형 효과 를 줄 수 있다.

translate(x, y) : 요소의 좌표를 움직일 수 있다.
❗️x좌표, y좌표 기준으로 n만큼 움직이고 싶다면 translateX(n) / translateY(n) 으로 써주기

scale(x, y) : 각 축 방향으로 x, y만큼 요소를 축소 혹은 확대 (배수로 써주기)
❗️x좌표, y좌표 기준으로 n만큼 요소를 축소, 확대하고 싶다면 scaleX(n)/scaleY(n)

skew(x, y) : 요소를 기울여 마름모꼴 처럼 만들 수 있다.
❗️x좌표, y좌표 기준으로 n도 만큼 기울 이고 싶다면 skewX(n) / skewY(n)

rotate(n) : 요소를 n만큼 회전시킴

중첩적용

tansform : rotate(75deg) translateY(120px)

17. Animation

css를 이용해서 애니메이션을 만드는 두가지 방법
1. transition 속성 활용 transition은 특정 이벤트를 기점(hover 등)으로 작동
2. animation 속성과 keyframe 활용 시작하기 위한 이벤트가 필요 없습니다. 그리고 애니메이션의 시작, 정지, 반복까지 제어가 가능

• keyframes 란?
  css 애니메이션의 시작, 중간, 끝 등의 중간 상태를 정의합니다. 애니메이션 속성을 이용해서 사용하면 됨!

animation-name : 어떠한 keyframes를 요소에 적용할 것인지 지정
animation-duration : 애니메이션을 한 번 재생하는데 걸리는 시간을 설정
animation-direction : 애니메이션 재생 방향을 정의 (정방향/역방향)
animation-iteration-count : 애니메이션 재생 횟수 정의
animation-timing-function : 애니메이션 재생 패턴을 정의하며, transition-timing-function과 유사
animation-delay : 애니메이션 시작을 얼마나 지연할 지 설정
animation 단축속성 : 만일 순서가 바뀔 경우, 오류가 발생 하거나 의도와 다른 결과가 도출 될 수 있으니 단축 속성을 사용하실 때는 순서에 유의하기!

18. Grid

1차원적인 구조를 가진 flex에 비해 Grid는 2차원적인 구조를 가지고있다.
(row와 column 방향의 배치 방식을 동시에 할 수 있음)
display: grid를 이용해 grid가 적용된 요소는 다음과 같은 구조로 변경된다.

grid-container grid 레이아웃이 적용된 요소
grid-item grid-container의 자식 요소
grid-line grid-item 사이의 경계
grid-number 몇번째 grid-line인지 구분

• grid-template
  grid의 행&열의 개수 및 크기를 지정할 수 있습니다.

  grid-template-rows : 1fr 2fr 200px
  grid-template-columns : 1fr 2fr 200px

  위와 같은 형태로 사용이 가능하며, row는 행의 템플릿을, columns는 열의 템플릿을 지정합니다.

• 단위: fr
  이 때 사용되는 fr 이란 fraction(분수)의 약자입니다. 분수라는 이름의 뜻으로 유추할 수 있듯 grid-template에서 사용할 수 있는 비율 단위입니다.
  

• repeat()
  grid-template에는 repeat() 이라는 반복 함수도 써줄 수 있습니다. repeat(a, b)라고 입력하면, b규격의 grid-template을 a개 생성한다는 의미가 됩니다.

  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: 1fr 1fr 1fr 1fr;

• grid-column & grid-row
  grid-column 과 grid-row 는 grid-item에 줄 수 있는 속성입니다.
  각각의 grid-item이 열과 행 방향으로 얼마만큼의 영역을 차지할 지 정의합니다.
  이 때, 그 값에는 시작점이 되는 grid-number와 종료지점이 되는 grid-number를 입력합니다.
  

19. 반응형 웹 & 미디어쿼리

미디어 쿼리 란 Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능입니다. 이 때, 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있습니다.
기본형태는 아래와 같습니다.

@media screen and (max-width: 500px) {
	/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}

@media 미디어 쿼리 기능을 활성화
screen 디지털 화면(screen)에 노출되었을 때 중괄호 안의 속성을 적용
max-width: 500px viewport 너비가 500px 이하일 경우 중괄호 안의 속성을 적용
and 미디어 쿼리 조건 연결 (and로 연결한 모든 조건을 만족할 경우 중괄호 안의 속성을 적용)

❗️한글로 풀어서 적어보면, 미디어 쿼리 기능을 이용하여 viewport 너비가 500px 이하인 디지털 화면(screen)일 경우 중괄호 안의 속성을 적용

20.breakpoint(중단점)

뷰포트란, 주소창이나 탭 등을 제외하고 실제 웹페이지의 컨텐츠가 차지하는 영역이다.

• breakpoint 란?
  반응형 웹페이지의 작업 기준이 되는 중단점을 의미한다. 간단하게, PC / Tablet / Mobile의 기준이 되는 규격 분기이다. 가장 일반적으로 사용되는 breakPoint 분기는 다음과 같다.
  

21. 반응형 웹에 자주 쓰이는 속성

• max-width / max-height
  요소의 최대 크기를 지정하는 속성. max-width을 사용하면 가로 규격을, max-height를 사용하면 세로 규격을 한정할 수 있다.

  max-width : 1240px;
  max-height : 100vh;

• min-width / min-height
  요소의 최소 크기를 지정하는 속성. min-width을 사용하면 가로 규격을, min-height를 사용하면 세로 규격을 한정할 수 있다.

  min-width : 720px;
  min-height : 30%;

• max()
  소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수. 소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있다.

  height : max(320px, 20%)

• min()
  소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수. 소괄호 안에는 여러 개의 값을 콤마로 연결해 입력해줄 수 있다.

22. 개인적으로 알게된 것

• display 쓰면 인라인, 블록 요소 속성을 강제로 바꿀 수 있다.

• 가상 클래스 선택자 할 때, .box1 p:nth-child(2n) {} 이렇게 쓰면 2의배수 라는 뜻. 괄호 안에 다양하게 쓸 수 있음!

• 트랜지션을 사용할 때 주의할 점은, hover 부분이 아니라 hover를 뺀 부분에 적용시켜주어야 한다.

• text-shadow (x축, y축, 흐릿해지는정도, 색)

• font awesome 이미지 크기 조절

  
  폰트어썸 사이트 참고

• opasity: 0; 하면 안보임!!

---

✔️ What needs to be solved

1. 구글 폰트 사용해서 내 벨로그 썸네일? 만들었는데 적용이 잘 안된 것 같다.
2. 애니메이션 만드는 과제에서 예시3번 첫번째 마우스.. 도형이랑 밑에 글씨가 같이 움직인다.
   분할해서 글씨는 안움직이게 해야하는데 아무리해도 해결이 안되었다 🥲 ➡️ html의 문제이겠지?
   

✔️ What I Liked

1. 첫주보다 css에 대한 이해도가 높아졌고, 더 많은 경험을 했다.
2. 처음 접해봐서 어려운 것도 있었지만 첫주보다 재미있었다.
3. hover, after 를 혼자 사용해 보았다. 뿌듯!🌟
4. 아직은 css가 가장 재미있다.
5. 느리지만 혼자 해결할 수 있었다.

✔️ What I Lacked

1. 속도가 느리다.
2. html에서 실수하여 발생하는 문제점들이 꽤나 있었다.
3. html 구조 잡는것이 아직 미숙하다. (필요없는 div 만들때도 있음)

✔️ What I long for

1. 계속 흥미 가지기, 조급해하지 않기
2. 다양한 방법으로 시도해보기
3. 메모를 조금 더 잘 해놓기!
4. 조금 더 혼자 이것저것 해봐야하는데 수업 따라가는데 급급하다 아직은!