8일차 - CSS, 스터디의 방향성

오늘은 벨로그 작성 후에도 공부할게 많아서 짧게 쓰겠다.

CSS는 구조의 외부와 내부를 꾸미는 역할을 담당한다. 스타일링 도구여서 HTML 없이는 단독으로 존재할 수 없는 집에 비유하면 인테리어 같은 존재이다.

글자의 색상을 변경하는 color
글꼴의 속성을 변경하는 font-family
글자의 크기를 변경하는 font-size

세 가지가 텍스트를 꾸미는 가장 대표적 요소들이다.

박스 모델에서는 block, inline, inline-block 3가지가 있는데

줄바꿈은 block만 가능
기본 width는 block은 100% 나머지는 글자가 차지하는 만큼만
width, height는 inline만 불가능

한 특징이 있다.

그밖에는

테두리를 만드는 border

p {
  border: 3px solid blue;
}

라고 작성하면 p태그에 3px의 파란색 실선을 만드는 것이다.

바깥 여백을 설정하는 margin
안쪽 여백을 설정하는 padding 이 있는데
특이한 점은

p {
  margin : 1px 3px 5px 7px;
}

이런 식으로 작성하면 시계방향 순으로 top, right, bottom, left 순으로 여백이 지정되고
값을 두 가지만 넣으면 첫 번째 값은 top과 bottom을 결정하고 두 번째 값은 left와 right를 결정한다.
그리고 값을 하나만 넣으면 모든 방향의 여백을 결정한다.

그리고 박스 크기를 지정할 때 보통 컨텐츠를 기준으로 작성된다. 그래서 생각하는 값 보다 박스가 작게 나오는 것이 대부분이다. 해결 방법은 boder-box라는 여백과 테두리를 포함하는 값으로 박스 크기를 정하는 건데

* { 
  box-sizing: border-box; 
} 

이런식으로 작성하면 모든 요소의 box-sizing : border-box를 추가한다.

스터디 얘기로 넘어가면

오늘 드디어 스터디의 방향성이 잡혔다. javaScript.Info 사이트를 공부하면서 서로 새로 알게된 점과 궁금한 점을 공유하는 것이다.
지금 스케쥴에 이것 까지 더하면 힘들겠지만, 또 그걸 극복하는게 공부 아니겠는가. 열심히 노력해 봐야겠다.