..

[Element가 배치되는 방식] - 렌더링 과정 / 레이아웃 작업 - 일반적으로 위에서 아래로 순서대로 블럭을 이루며 배치됨- 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, CSS에서 추가적인 속성을 제공- display 속성 (block / inline / inline-block) - position 속성 (static / absolute / relative / fixed)- float 속성 (left / right) [display 관련] - display: block - display 속성이 block 이거나 inline-block 이면 그 element는 어떠한 영역(블록)을 가지고 쌓임- 화면에 위에서 아래로 쌓이듯 채워짐- 대부분 display: block 속성을 기본으로 가지고 ..

- 색상 관련 - color: red- color: rgba(255, 0, 0, 0.5)- color: rgb(255, 0, 0)- color: #ff0000- 이처럼 값 / rgba() / rgb() / #16진수 로 색상값을 표현할 수 있음- 일반적으로 16진수로 많이 표현함- VSCode에서 color picker 사용 가능 - 글자 크기 관련- font-size: 16px- font-size: 1em- em은 기본 글자 크기의 배수를 위한 단위.- px는 절대적, em은 상대적- 글자 기본 크기는 16px, 따로 설정하여 기본값을 변경할 수 있고, 이 경우 상대 크기도 달라지게 됨. - 글꼴 관련- font-family: monospace, sans-serif;- 앞에서부터 시작하여 브라우저가 해..

- Element를 쉽고 빠르게 찾기 위해 Selector를 사용한다. - Selector에 태그 / id / class 를 사용할 수 있다. 태그span { color: red; }id#spantag { color: red; }asdfclass.spanClass { color: red; }asdf - id, class 요소 선택자와 함께 활용- div.myclassname 처럼 .이나 # 앞에 상위 요소를 명시하여 구체적으로 명시할 수 있음- 그룹 선택- h1, span, div { color: red; }- 콤마로 구분하여 여러 태그에 CSS 스타일을 적용하라 수 있음- 하위 요소 선택- #asdf span { color: red; }- asdf id를 가진 태그에 span이라는 하위 요소가 있으면 ..