1. 선택자(Selector) : CSS 설정을 적용할 대상을 지정할 때 사용함.
<body> 태그에 적용하고 싶다면
body {
...
}
와 같이 css에 써주면된다. 이러면 body 태그 전체에 적용이 된다.
2. 폰트 지정
font-family로 여러개의 폰트를 쉼표로 연결해서 지정해주어야 한다.
여러개를 지정하는 이유는 OS 환경마다 쓰이는 폰트가 다르기 때문이다.
앞쪽에 있는 폰트를 적용하게 된다.
만약, 폰트 지정을 하지 않게 되면, 환경에 따라 다른 폰트가 출력되므로 통일감이 없어보이게 된다.
3. font-size : 폰트 크기 조정
4. text-align 속성은 텍스트의 정렬 방향을 의미합니다.
left: 왼쪽 정렬
right: 오른쪽 정렬
center: 중앙 정렬
5. letter-spacing : 글자 사이의 간격을 조정
6. vh와 vw
vh와 vw
vh 요소는 높이값의 100분의 1의 단위입니다.
예를 들어 브라우저 높이값이 1200px일때 1vh는 12px이라는 뜻이다.
그와 유사하게 뷰포트의 너비값이 780px이면 1vw는 7.8px이 된다.
7. css에서 inherit :요소가 부모 요소로부터 속성(property)의 값을 받게 된다.
CSS에서 상속 개념은 중요하다.
원하는 태그에 속성을 넣지 않아도, 상위 또는 최상위 태그(body)
예를 들어
body {
..
}
안에 속성을 넣게 되면
body 태그 안에 있는 모든 태그들에게 의 속성이 적용된다.
그 밑에서 원하는 태그에 오버라이드해서 재정의하면 그 태그의 속성은 바뀔 수 있다.
하지만, 지정하지 않는 모든 태그는 body 속성이 기본적으로 적용된다.
CSS에서 Color 개념
RGB 색상
16진수로 표기한다.
기본적으로, 아래와 같이 RGB 방식으로 작성한다.
#RRGGBB
RR GG BB가 같다면 #RGB로도 가능하다.
또한, vs code나 다른 HTML 개발 에디터에서는 상수값을 제공한다.
Color.red
Color.blue
Color.gray
Color.yellow 등등.. 이것을 사용하면 된다.
물론, 웹 디자이너나 더욱 색을 다양하게 표현하고 싶다면
구글에 RGB Picker 또는 RGB selector와 같이 검색하면 디테일하게 색상을 정할 수 있다.
ARGB 색상
16진수로 표기한다.
기본적으로, 아래와 같이 RGB 방식으로 작성한다.
#AARRGGBB
AA가 추가된 상태이다. 6자리 숫자만 쓰면 기본적으로 불투명이다.
A는 투명도(alpha)값이다.
box-sizing : border-box;
box-sizing은 처음보는 개념이다. 이것의 의미는 무엇인가? 박스 사이즈를 정하는 속성같은데
정확한 의미와 언제 사용되는지 알아봐야겠다.
clearfix:after
:after하니까 float 해제가 되었는데, 이 것의 의미는 무엇인가? before은 또 무엇인가?
clear 소성은 무엇인가?
이미지의 비율(ratio)을 유지하며 크기를 조정하기 위해서는,
높이를 지정하되, 너비는 auto로 해야 자동으로 한다.
