1. 반응형 UI 공유 시안

논리적인 순서 정하기 -> 시맨틱 마크업 -> 네이밍

✔️ display
Html 요소의 표현 방식을 지정하는 속성

• block
  기본적으로 부모 요소의 너비 전체를 채운다.
  width와 height를 설정할 수 있다.

• inline
  자신의 전후로 줄바꿈을 만들지 않는다.
  요소의 폭은 콘텐츠에 따라 결정된다.
  width 속성으로 요소의 너비를 직접 지정할 수는 없다.
  

• inline-block
inline 과 같이 요소 전후로 줄바꿈이 생기지 않지만,
  block요소처럼 width와 height를 지정할 수 있다.
  

• flow-root
  부모 요소가 기능을 잃었버렸을 때 부모라는 걸 다시 명시시켜주는 속성
  

• table
block요소 이지만 콘텐츠 만큼만 너비를 가진다.
  table요소 처럼 사용가능하다.
  

✔️ background

• background-color
  요소의 배경색

• background-image
  요소 박스의 배경 이미지를 지정
  콤마로 구분하여 다중 배경 이미지를 지정할 수 있다.
  이미지의 겹치는 순서는 가장 먼저 선언한 이미지가 가장 위쪽에 위치한다.

• background-repeat
  배경 이미지의 반복 여부 지정
  콤마로 구분하여 여러 개 지정이 가능하다.
  가로나 세로 방향으로 반복하고자 할 경우 repeat-x 또는 repeat-y 값을 사용할 수 있다.
  space값과 round값은 배경 이미지가 반복적으로 나타날 경우 잘려보이지 않도록 처리한다.

• background-position
  배경 이미지의 위치를 지정하는 속성
  콤마로 구분하여 여러 번 지정 가능하다.
  너비% 높이% 지정할 수 있다.
  하나만 지정할 경우 나머지는 center로 인식한다.

• background-attachment
  배경 이미지의 고정 여부를 지정하는 속성
  콤마로 구분하여 여러 번 지정가능하다.
  fixed속성 값의 경우에는 콘텐츠 영역의 스크롤과 관계없이 배경이미지가 뷰포트에 고정
  scroll 속성 값은 배경 이미지가 콘텐츠 영역과 함께 스크롤된다.
  

• background-size
  배경 이미지의 크기를 지정하는 속성
  콤마로 구분하여 여러 번 지정 가능하다.
  contain 배경 이미지의 원래 비율을 유지한 채 요소 박스 영역 전체에 배경이미지가 가득 차도록 한다.
  cover 배경 이미지의 원래 비율을 무시하고 요소 박스 영역 전체에 배경 이미지가 가득 차도록 한다.
  

🏷️ 단축 속성 (shorthand)

background : url(이미지경로) attachment repeat position / size color;

• color값은 마지막에 오는 것이 좋다. 페인트를 먼저 칠하면 안에 있는 것들을 꾸밀 수 없다고 생각하면 좋다.

• / 를 하는 이유는 숫자가 여러 번 반복되면 인식을 못할 수도 있어서이다.

✔️ list-style

• list-style-type
  목록 항목 요소의 마커를 설정하는 속성
  none circle square

• list-style-position
  목록 항목 마커와 텍스트 간의 위치를 설정할 수 있는 속성
  outline(default) inside
  

• list-style-image
  목록 항목 마커로 사용할 이미지 설정
  

🏷️ 단축 속성 (shorthand)

list-style: url(경로) type position;

✔️ float ⭐⭐⭐

노멀 플로우에서 분리된 요소를 부모 요소 라인 박스의 왼쪽이나 오른쪽 박스에 배치한다.

이렇게 지정된 요소는 다른 요소의 배치에 영향을 끼친다.

float 을 지정하면 block 요소로 랜더링된다.

block요소는 떠있게 되지만 inline은 밀린다.

right left none

• clear
float속성으로 선언된 요소 다음에 위치한 요소를 float이 적용된 요소 아래로 배치하고자 할 때 사용할 수 있다.
  block요소에 선언할 때 유효하다.
  both left right none

• ::before ::after
  자식 요소 개념으로 들어간다.
  content 속성은 무조건 있어야 하며 값을 안넣어도 된다.
  
  

---

2. 회고

오늘도 역시나 잠과의 사투.. 오전수업은 역시나 잠때문에 망친 기분
그냥 다 때려치고 자고 싶다는 생각밖에 안들었다. 왜케 자도자도 졸린걸까...💤
저번 주말특강 css 파트 때 자신감이 너무 많이 떨어져서 이번 수업도 못알아들으면 어떡하지 했는데 다행히 아는 내용 위주로 나와서 다행이었다. 아는 내용은 잘 알아듣는데 처음 듣는거는 역시나 이해하기 너무 힘들었다. background 까지는 어떻게 하겠는데 역시나 float에서 힘들었다. 예전에 탈잉 수업으로 잠깐 배운 것 덕분에 문법 다 무시하고 배치하는거는 가능한데 문법적으로 나가니까 너무 어려웠다. 다른 분들은 flex를 많이 사용해서 float이 어렵다고 했는데 나는 flex를 해본적이 없어 배울 때 또 얼마나 어려울지 걱정이다.

그리고 오늘 드디어 과제가 나왔다. 처음이라 어려운 과제는 아니였지만 막상 코드치려니까 머리가 하얘졌다. 그래도 천천히 처음부터 해보니까 다행히 과제는 생각한 것보다는 금방 끝냈다. 마지막 문법 검사까지 맞췄더니 오류 없이 나와서 다행이였다. 피그마 시안 그대로 크기 조절하고 했더니 엄청 조그맣게 나왔지만 그래도 랜더링만큼은 완벽한 것 같다. 코드리뷰하게 되면 css부분에서 지적을 많이 당할 것 같지만 일단 끝냈다는 거에 마음 편안.. 일단 yamoo님 강의들으면서 더 공부하고 보완할 점 있는지 확인해야겠다. 이제부터 월, 수, 금 이렇게 과제가 나온다는데 더 잠을 못자겠는걸..? 언제 푹 잘수있는거죠....?😢

🔻 과제 완성