style 속성
태그에 css를 적용하려면 style이라는 속성을 사용한다.
<div style="...">
</div>
css 속성과 css 속성 값
css 코드를 추가할 때는 css 속성: css 속성값 형태로 적는다.
여러 개의 css 속성 사용하기
세미콜론(;)으로 구분한다.
<div style="color: #ffffff; background-color: #eeeeee">
</div>
css 기본 단위
색 이름
red, green, yellow처럼 색상을 이름으로 사용하는 방식이다. 다양한 색을 표현하는데 한계가 있어 거의 사용하지 않는다.
css 이름 목록 : https://www.w3.org/wiki/CSS/Properties/color/keywords
CSS/Properties/color/keywords - W3C Wiki
Color keywords Basic Colors Named Numeric Color name Hex rgb Decimal black #000000 0,0,0 silver #C0C0C0 192,192,192 gray #808080 128,128,128 white #FFFFFF 255,255,255 maroon #800000 128,0,0 red #FF0000 255,0,0 pu
www.w3.org
색상 코드
색상을 16진수로 표현한 값이다. 대부분 이 방법을 사용한다. 'color picker' 등을 검색하여 색상 코드를 확인해 볼 수 있다. 주로 이미지 편집 프로그램 같은 데서 디자인을 하면서 색상 코드를 정하게 된다.
픽셀
화면에서 그려지는 가장 작은 정사각형을 말한다. 이 사각형을 크기의 단위로 사용한다.
css 속성
배경색
backgound-color: #272928글자색
color: #ffffff글꼴
우선 적용할 글꼴 이름부터 차례대로 적어준다. 글꼴 이름이 띄어쓰기가 있는 경우엔 따옴표로 감싸준다.
font-family: Poppins, 'Noto Sans KR', sans-serif구글 폰트 : https://fonts.google.com/
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
글자 크기
font-size: 16px글자 굵기
100 ~ 900까지 100 단위로 올라간다. 중간이 되는 값은 400이다.
font-weight :400글자 정렬 위치
left, center, right를 통해 정렬할 수 있다.
text-align: center너비
width: 560px높이
height: 380px안쪽 여백
아래는 세로 10px, 가로 20px의 예시이다.
padding: 10px 20px바깥 여백
auto는 가로 크기에 맞게 알아서 여백을 채워 넣는다. 참고로 auto는 바깥 여백의 가로에서만 동작한다.
margin: 10px auto
'💻 STUDY > Frontend' 카테고리의 다른 글
| 박스 모델 정리 (0) | 2023.11.23 |
|---|---|
| 다양한 padding, margin 표기법 (0) | 2023.09.27 |
| CSS 속성 정리 (0) | 2023.09.22 |
| CSS 개념 정리 (0) | 2023.09.20 |
| HTML 문법 정리 (0) | 2023.08.23 |