style
- background-color
구역의 배경 색상 설정
ex)
<div style="background-color: black">- color
글자 색상 설정
ex)
<h1 style="color: white">
<div style="background-color: black; color: white">- font-family
글꼴 설정
웹 폰트 : 사이트에 접속하면 글꼴을 자동으로 다운받아서 보여주는 것(google fonts)
link태그 사용 (head태그 안에 넣어줘야 한다)
ex)
<body style="font-family: sans-serif, Arial, AppleGothic">ex)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">- font-size
폰트 크기 설정
ex)
font-size: 20px- font-weight
폰트 굵기 설정(100단위)
ex)
font-weight: 300- text-align
글자 정렬
ex)
text-align: center
center, right, left- width, height
이미지 크기 설정
ex)
style="width: 700px; height: 375px"
style="width: 100%;"
(%를 사용하면 웹브라우저의 크기에 따라 이미지의 크기가 변한다)
이미 태그에 background-color가 설정되어 있다면 아래에 div태그를 추가하여 거기에 설정해준다- padding, margin
여백 설정, 테두리 바깥 설정
ex)
padding: 20px auto
(세로 20px, 가로 자동)
margin: 32px-
line-height 줄 높이
따로 단위 없이 쓰는 글자 크기에 상대적인 값
ex) line-height: 1은 font-size가 16px이라면 16px1 = 16px이 되고
line-height: 1.5는 16px1.5 = 24px이다 -
text-decoration 텍스트 꾸미기
텍스트에 밑줄을 넣거나, 취소선 등을 넣을 때 사용
none은 a태그에 기본으로 들어간 밑줄을 없애는데 많이 사용
underline은 밑줄
line-through는 취소선 등을 나타낼때 사용
누구나 같은 팀으로 되길 바라는 개발자가 되자