Unit5 - [CSS] 기초 회고

Chapter1. CSS 기초

• CSS의 사용 목적을 이해한다.
• CSS의 기본 문법과 구조를 이해한다.
• CSS를 HTML에 적용하는 방법에 대해서 이해한다.
• HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
• CSS를 이용해 텍스트를 꾸밀 수 있다.
• CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다.
• MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.

Chapter2. 박스모델

• CSS 박스 모델을 이해할 수 있다.
• 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.
• margin, border, padding, content
• 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.

Chapter3. CSS selector

• 다양한 CSS selector 규칙을 이해한다.
• 후손 selector와 자식 selector의 차이를 이해한다.
• 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.

 

 회고 질문

 

1. 지금 현재, 당신의 기분이나 느낌을 표현해주세요.

    수업 중에 이해가 된다고 생각하고 퀴즈를 풀면 다 맞추지 못해서 속상하다.

    하루 종일 노트북 화면을 보니까 눈이 피곤하다..

 

2. 오늘 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해주세요.

    CSS, UX, UI, CSS작성법, HTML 파일에 CSS 파일 추가하는 방법

    id vs class, css스타일링, 글꼴 사이즈 단위, box, margin, border, padding

    셀렉터 (자식, 후손, 형제, 인접)

 

3. '2' 에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.

   

4. 설명하기 어려운 단어가 있다면, 그 이유는 무엇인가요?

   -  em과 rem 의 차이, 구글링에서 예시를 보았을 때, 예시가 똑같아 차이를 알지 못했다.

  -  pading 와 border , 실제 html작성 후 실제 웹페이지에서 어떻게 나타나는지 즉각적으로 예상하지 못하겠다.

 

5. 그 단어를 스스로 설명할 수 있기 위해서 누군가에게 질문을 한다면, 어떤 질문을 해야 할까요?

    em과 rem의 차이 

    2022.06.30 - [HTML] - [HTML, CSS] em 과 rem 의 차이

[HTML, CSS] em 과 rem 의 차이

    pading 다르게 설정 후 예시, boder 다르게 설정 후 예시 보기