Unit4. 회고 [CSS 기초]

성취도 

상중하

 

이해도 자가 점검 리스트

 

Chapter1. CSS 기초

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

Chapter2. 박스모델

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

Chapter3. CSS selector

• 다양한 CSS selector 규칙을 이해한다.
• 후손 selector와 자식 selector의 차이를 이해한다./자식 selector는 부모selector 안에 포함된 요소 중 가장 바깥에 위치 한 요소/ 후손 selcetor는 같은 부모selector를 공유하며 자식selector에 포함된 자식selector
• 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다

---

id와clsss의 차이

중복사용여부

id는 코드안에  하나밖에 존재 할 수 없다. 그렇기에 중요하게 분류해야 하는 부분이나, 의미가 있는 파트를 구성 할 때 사용한다. 반면 class는 몇개든 동일한 class명을 사용해도 무방하다.

 

이름을 불러오는 방식

id는 샵(#), class는 마침표(.)를 사용하여 불러온다.

 

한 요소가 갖는 class,id의 갯수 차이

id는 하나의 태그에 하나의 id만 사용 가능하다. 반면 class는 하나의 태그에 여러개의 클래스를 사용가능하다.

 

---

block 과 inline, 그리고 inline block

inline

줄바꿈을 하지않고, text의 크기만큼 공간을 차지한다.

대표적인 태그로는 <span>태그가 있다.

margin / padding top / padding bottom 등 공간을 따로 설정 할 수 없다.

line-height를 원하는대로 사용할 수 없다.

 

block

줄바꿈이 가능하고, 무조건 한 줄을 차지하고있다. 다음태그는 무조건 줄바꿈이 적용된다.

대표적인 태그로는 <div>.태그가 있다.

margin / padding top / padding bottom 등 크기 조정이 가능하다.

ine-height를 원하는대로 사용할 수 없다.

 

inline block

inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다. 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.

width/height 적용 가능

margin/padding-top/bottom 적용 가능

line-height 적용 가능

** 고려사항

inline-block 사이에 공백이 생기게 되는데, parent 태그에 font-size: 0를 적용하면 해결된다

nline-block 끼리 높이가 안맞을 때 상위 공백이 생기게 되는데 vertical-align: top을 적용하면 해결할 수 있다.

 

 

---

Unit4 소감

HTML과 더불어 개발이라고 해도 되나 싶을정도로 만만하게 봤던 CSS.. 무서운 녀석이다.

오늘 여러가지 selector를 이해하기위해 HTML의 레이아웃을 보며 고생을 좀 했다.

특히, 구조 가상 클래스 셀렉터? 

ul > li:first-child { }

이를테면 이런 셀렉터가 문제에 나오는데 머리에 쥐가 나는 것 같았다.

내 식대로 의사코드처럼 써보자면 'ul엘리멘터의 자식 엘리멘터 중 첫번째 자식이 li엘리멘터인 경우'  이런식으로

중얼거리면서 이해했던 것 같다.

프론트엔드 개발에 있어서 자바스크립트 말고는 내가 힘들만한게 없다고 생각했는데, 오늘 여러므로 나를 객관적으로 파악하는 계기가 된 것 같다.

기초를 단단하게 잡아두고 다음 유닛으로 넘어가야겠다.

(아이패드없는 찌질이라 열심히 메모장에 적어놓는다.)