TIL 3일차 - [CSS]

• CSS의 사용 목적을 이해한다.

  HTML에 스타일과 다지인을 구현하기 위한 스타일 시트 언어다. css를 적용한 사용자인터페이스(UI)를 이용하여 더 나은 사용자경험(UX)을 제공하기 위함이다.

• CSS의 기본 문법과 구조를 이해한다.

  body {
  		속성 이름: 속성값;
         }

  

• CSS를 HTML에 적용하는 방법에 대해서 이해한다.

  적용하는 방법에는 크게 같은 줄에 스타일을 적용하는 인라인 스타일, <style>요소 안에 작성하는 내부 스타일 시트, CSS 파일 내에 작성하는 외부 스타일 시트가 있다.
  요즘은 관심사 분리를 위하여 HTML에 직접 적용하는 인라인이나 내부 스타일 시트 보다는 CSS 파일을 외부에서 가져와 적용하는 방법을 권장한다.

• HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.

  하나에 집중하기 위해 파일이나 구간을 분리하는 관심사를 분리 측면에서 HTML 문서에 직접적으로 CSS를 적용하지 않는다.

• CSS를 이용해 텍스트를 꾸밀 수 있다.

  꾸미고자 하는 태그를 선택하여 여러 속성을 가지고 꾸밀 수 있다.
  대표적인 속성에는 color, background-color, font-family, font-size, line-height 등이 있다.

• CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.

  CSS에는 px,pt와 같은 변하지 않는 절대 단위와 %,em,rem,ch,vw,vh와 같은 변하는 상대 단위가 있다.
  px과 %,em,rem,ch,vw,vh모두 컨텐츠의 크기를 설정하는 단위이지만, 화면 크기에 따라 유동성 있게 바뀌는지에 차이가 있다.
  rem은 root의 글자 크기를 따라간다. 여기서 root는 body를 의미하며, body의 글자 크기를 따라가는 반면, em은 부모의 글자 크기를 따라간다.

---

+) 2023.04.24 페어 분께 질문 후, 추가하는 내용
절대 단위는 개발자가 설정한 크기를 사용자가 임의로 변경할 수 없다.
상대 단위는 개발자가 설정한 크기와 별도로 사용자가 임의로 변경할 수 있다.
이때 vh,vw는 화면의 크기와 상관없이 사용자가 원하는 크기의 화면에 맞게 설정된다.

---

• 각 단위가 적합한 경우를 구분할 수 있다.

  pdf, 문서와 같이 화면 크기가 고정된 경우에는 고정된 기본값을 제공하는 절대 단위가 유리하고,
  화면 크기가 사용자나 장치에 따라 유동성 있게 바뀌는 경우에는 속성의 값도 변하는 상대 단위가 유리하다.

• MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.

  o

• CSS 박스 모델을 이해할 수 있다.

  박스의 종류는 텍스트의 길이 만큼 영역을 차지하여 줄 바꿈이 가능하여 width, height 속성이 적용되는 block 박스와 텍스트의 길이만큼만 박스의 너비로 결정되므로 줄 바꿈 없이 옆으로 붙어 width, height 속성을 적용할 수 없는 inline 박스로 구분할 수 있다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 속성을 적용할 수 있는 block 박스의 특징을 가지는 inline-block 박스가 있다.
  block 박스의 대표적인 태그로는 div, h, p 등이 있고, inline 박스의 대표적인 태그로는 span이 있다.
  

• 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다.

  o
  

• margin, border, padding, content

  컨텐츠를 구성하는 박스는 컨텐츠 박스고, 안쪽 여백으로 테두리와 컨텐츠 사이에 있는 박스는 패딩 박스이며,
  테두리를 구성하는 박스는 보더 박스이며, 그 외에 바깥 여백을 구성하는 박스는 마진 박스다.

• 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다.

  content-box와 border-box가 있다.
  content-box로 박스 크기를 측정할 경우, 컨텐트 박스의 너비와 높이가 기준이 되고,
  border-box로 박스 크기를 측정할 경우, content + padding +border의 너비와 높이가 기준이 된다.

---

+) 2023.04.24 페어 분께 질문 후, 추가하는 내용
content-box는 설정하지 않으면 기본값으로 지정되어 있으며,
나머지 여백들과의 조화를 이루지 못하여 생각하지 못한 변수가 생길 수 있으므로
대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장한다.

---

• 다양한 CSS selector 규칙을 이해한다.

  id, class, 부모-자식, 부모-후손, 형제, 인접 형제, 등이 있다.

• 후손 selector와 자식 selector의 차이를 이해한다.

  부모 태그 > 자식 태그 1, 자식 태그 2 .. > 후손 태그 1, 후손 태그 2.. 처럼 포함 관계를 이루고 있으며, 후손 태그에는 자식 태그도 포함된다. 각각을 선택하는 코드 작성법은 다르다.
  자식 선택자는 => 부모 태그 > 자식 태그
  후손 선택자는 => 부모 태그 후손 태그
  추가적으로
  형제 선택자는 => 형제 태그 ~ 또 다른 형제 태그
  인접 형제 선택자는 => 형제 태그 + 해당 형제 태그 바로 아래에 있는 형제 태그

• 필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다

  o

• HTML의 요소를 CSS로 선택(select)할 수 있다.

  o
  여러 class를 하나의 요소에 선택하여 css를 적용할 수도 있고,
  하나의 class를 여러 요소에 선택하여 css를 적용할 수도 있다.

• 각 요소가 하나의 박스라는 것을 이해한다.

  o
  

• 원하는 CSS 속성을 검색해서 사용할 수 있다

  o
  MDN, Google를 통해 검색하여 사용할 수 있다.

소감

🔡➡️💻➡️🤓👍

HTML를 이해하는 데에는 큰 어려움은 없었다.
부트캠프를 시작하기 2주 전에 미리 무료 강의를 학습해서일까 큰 도움이 되었다.
그런데 CSS는 생각보다 복잡하다고 느꼈다.
아무래도 구조는 어느 정도 정해져 있어서 큰 틀을 이해하면 되지만,
디자인은 아무래도 세세하기도 하고 방대하다보니 하나 하나 이해하는데 시간이 좀 더 필요했다.
디자인에도 관심이 있다보니 시각적으로 좀 더 효과를 내고 싶은 욕심이 생겨 더 공부하고자 했다.
욕심이지만서도 재밌다. 물론 머리를 몇 번 쥐어잡고 스스로 왜 못하냐고 짜증도 냈지만,
어쩌겠는가 하겠다고 마음 먹었고, 재밌다고 느꼈으면, 끝까지 해봐야지.
느리더라도 모르는 것은 파고 넘어가는 것.
그게 나의 단점이지만 가장 큰 장점이라고 생각한다.