12월 12일~ 18일 학습내용

#1 핵심 CSS 복습하기!

저번주에는 핵심 HTML에 대하여 복습을 하는 시간을 가져 보았고 이번주는 CSS에 대하여 조금씩 정리를 해보려고 한다.

#2 CSS란? 

종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일 시트 랭귀지[*])로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이고, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

 

자유도 - 위키백과, 우리 모두의 백과사전

https://kr.123rf.com/photo_64896030_%EA%B3%84%EB%8B%A8%EC%8B%9D-%ED%8F%AD%ED%8F%AC.html

CSS MDN 에서는 Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 지정합니다. 이렇게 정의 하고 있다. 사실 이해하기에는 MDN에 적혀있는 내용이 더 이해하기 쉬울 것이다.

#3 CSS 문법

아주 간단한 예시로 

p {

color: red;

}

 

이렇게 표현한다면 p (선택자 )  color(속성) red(속성값) {}(정의)이다.

#4 CSS 속성들

많은 속성들이있지만 html과 마찬가지로 전부다 외우려고 하기보다는 이해하는 것이 중요한것같다.

많이 사용해보고 공부하는 것이 중요할 것같다. css를 공부하면서 가장 많이 사용하는 것 같은 속성은

background, border, bottom, box-sizing, display, margin 등등 이있다. 

 

속성들을 작성할때 나중에 여러명의 개발자들과 함께  프로젝트를 할 경우를 대비하여야 한다.

속성들을 순서에 맞게 잘 작성한다면 중복된값 때문에 중복된 내용의 나중에 작성된 내용으로 덮여서 

스타일링에 문제를 일으킬 수 있다.

 

#5 CSS Box Model

CSS 상자 모델은 기본적으로 모든 HTML 요소를 감싸는 상자입니다.
- 콘텐츠(이미지, 텍스트 등) (Content)

☞ 콘텐츠 는 HTML 요소 의 주요 초점이며 텍스트, 이미지, 링크 등이 될 수 있다.

- 패딩 (Padding)

☞ 패딩 은 콘텐츠 주변의 공간이다. 텍스트 주위에 공간을 추가하여 공간을 만들고 싶지만 다른 CSS 요소 사이에 공간을 추가하고 싶지 않은 경우 일반적으로 이 방법을 사용한다.

- 테두리 (Border)

☞ 값을 설정하면 content 및 주변에 테두리가 생긴다. 각 개별 측면을 설정 하거나 속기를 사용하여 크기, 색상 및 스타일 속성을 설정할 수 있다.

 

- 여백 (Margin)으로 구성된다.

☞ 가장 바깥쪽 요소이며 값을 준만큼 바깥쪽으로 밀어낸다.

 

 

+ 작업을 하는 경우에는 보통 box-sizing: border-box로 설정을 하고 작업을 한다.