1. 폰트 스타일
1.1 color
속성
•
color: 글자 색
•
background-color: 배경색
속성값 - 색 표현
•
hexcode: 빛의 3원색 값을 16진수로 2자리씩 표현한 6자리의 코드
◦
#000000 ~ #ffffff
◦
각 자리는 0~f(0~9, a=10, b=11, c=12, d=13, e=14, f=15)
◦
3원색을 각각 0부터 15까지 값의 2자리로 0~255까지의 값으로 표현
•
rgb,rgba:16진수가 아니라 10진수로 직접 각 색의 강도를 표현
◦
rgb(0, 0, 0) ~ rgb(255, 255, 255)
◦
투명도 표현: rgba(0, 0, 0, 0) ~ rgba(255, 255, 255, 1.0)
1.2 폰트(글씨체)
속성
•
font-family: 글씨체
•
예시
font-family: “Times New Roman”, Times, serif;
font-family: 돋움, 굴림, 고딕, 궁서;
속성값 - 폰트 표현
•
폰트명을 직접 작성함으로써 지정
•
하나의 글씨체 이름이 여러 단어로 이루어져 있다면 쌍따옴표로 묶어줌
•
여러 개의 폰트 리스트 작성시 순서대로 우선 적용 (지정 폰트가 없을 경우 다음 폰트)
•
내가 지정한 폰트가 다 없을 경우 알아서 선택되도록 serif, sans-serif, cursive, monospace 중 특성을 가진 폰트를 알아서 선택하도록 할 수 있음
•
접속하는 사용자의 컴퓨터에 따라 없는 폰트가 있을 수 있으니 잘 확인해서 써야합니다. 특히 영문 폰트는 쉽게 적용이 가능하지만 한글 폰트는 제약이 많습니다.
1.3 글씨 크기
속성
•
font-size: 글씨 크기 (pt, px, em 등의 단위를 사용)
속성값 - 크기 표현
•
글씨나 컨테이너의 크기를 결정할 때 기본 단위는 px, pt, em, % 등이 있음
•
px: 화면의 pixel 개수의 단위, 해상도에 따라 화면에 보이는 실제 크기가 다름
•
pt: 포인트 단위로 1 포인트는 1/72 인치 기준으로 인쇄시에도 비슷한 크기로 인쇄
•
em: 상대 크기, (부모 요소에서) 기존에 사용된 크기 대비 비율 (1.0em=100%)
•
%: 상대 크기, 부모 요소의 컨테이너 크기에 비해 얼만큼의 크기를 차지할지
1.4 기타
•
font-weight: 글자 굵기 (100~900 사이의 값이나 bold 로 굵은 굵기 표현 가능)
•
line-height: 줄 간격 (% 단위나 px 등의 단위를 사용)
2. 텍스트 스타일
문장, 문단과 관련된 스타일
정렬
•
text-align
•
left, right, center, justify(균등) 중 선택
들여쓰기
•
text-indent
•
px 등을 이용해서 들여쓰기 적용
글자 장식
•
text-decoration
•
underline, overline, line-through 적용
3. 크기
너비
•
width: 너비값 (width: 200px)
•
width 값만 지정하면 height 값은 비율에 맞게 조정됨 (=height: auto;)
높이
•
height: 높이값 (height: 150px)
참고: size 속성값으로 % 사용시
4. 여백
•
Box Model 박스 모델: div 등의 요소에 사용
•
문법
◦
padding 혹은 margin: 40px; → 상하좌우 여백
◦
padding 혹은 margin: 20px 40px; → 상하, 좌우 여백
◦
padding 혹은 margin: 15px 5px 15px 5px; → 상, 우, 하, 좌 여백 (시계방향)
◦
margin: {특정숫자} auto; → 좌우 여백은 (상위 요소의) 중앙에 맞게 알아서 적용
◦
box-sizing : border-box; → 박스 내부로 padding 주기 (박스 크기가 늘어나지 않게)
5. 배경
•
background-color: 배경 색
•
background-image: 배경 이미지
◦
background-image: url({url});
•
background-repeat: 배경 이미지 반복 여부
◦
background-repeat: no-repeat/repeat-x/repeat-y/repeat
•
background-position: 배경 이미지 위치
◦
background-position: 10px, 10px (x, y 좌표)
6. 위치
위치
•
display: 해당 요소가 어떻게 보여질지 지정
◦
none: 화면에 보이지 않게 함
◦
block: 블록 요소 형태로 표현합니다. 내용과 관계없이 너비를 전부 차지
◦
inline: 인라인 요소 형태로 표현합니다. 내용에 따라 너비가 결정
◦
inline-block: 블록 요소로 표현하되 양 옆에 다른 요소가 위치할 수 있음
◦
flex: flex 레이아웃을 사용할 수 있게 함
◦
grid: grid 레이아웃을 사용할 수 있게 함
•
float: 화면 내용들을 무시하고 좌측이나 우측으로 위치 정렬 (left, right)
•
position: 위치 값을 직접 정할 수 있는 규칙 적용
◦
absolute: 문서 내 절대 좌표로 요소를 위치
(다음과 같이 위치 값과 함께 표시
position: fixed;
top: 10px;
right: 20px;
◦
relative: 바로 앞의 요소에 대해 얼마나 떨어져 위치 할지를 지정
◦
fixed: 화면 스크롤과 관계 없이 위치 고정
◦
static (기본 값): 아무 것도 지정하지 않는 것과 동일
7. 테두리
특정 요소에 테두리를 지정할 수 있음
•
border-width: 굵기
•
border-style: 선 종류
◦
solid: 실선, dotted: 점선, dashed: 대시선, double: 이중선 등
•
border-color: 선 색 (hexcode, or rgb)
•
border: 위의 3 속성을 한 번에 사용 가능합니다.
◦
e.g. border: 1px solid #000000;
box-shadow: 테두리 외부에 그림자 효과를 줍니다.
•
box-shadow: 5px 10px; : 오른쪽으로 5px, 아래로 10px
•
box-shadow: 5px 10px #000000; : 위의 속성 + 그림자 색 지정 (검정)
•
box-shadow: 5px 10px 8px #000000; : 위의 속성 + 8px 정도 그림자 blur
•
box-shadow: 5px 10px 8px 10px #000000; : 위의 속성 + 10px 정도 주변으로 그림자를 퍼지게 (spread)
테두리의 둥글기 (border-radius)
•
border-radius: 25px;: 25px 만큼 상하좌우 테두리를 둥글게
•
border-radius: 20px 5px;: 좌측상단, 우측하단은 20px, 우측상단, 좌측하단은 5px;
•
border-radius: 15px 30px 50px;: 좌측상단, 우측상단과 좌측하단, 우측하단 순으로 적용
•
border-radius: 15px 30px 30px 20px;: 좌측상단, 우측상단, 우측하단, 좌측하단 순
참고자료
•
인프런, ⟪프로그래밍 시작하기: 웹 입문⟫ 수업자료