CSS
CSS 속성
텍스트 스타일링
-
텍스트 스타일링
<head> <title>Document</title> <link rel="stylesheet" href="./styles.css"> <!-- Google Font 사이트(https://fonts.google.com)에서 가져온 code 복사 --> <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@100..900&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet"> </head>.a-text { font-family: "Noto Sans Mono", monospace; /* 구글 폰트 사용 */ font-family: Roboto, Verdana, Geneva, Tahoma, sans-serif; font-size: 40px; font-weight: 400; /* 글 굵기는 숫자로도 표현 가능(400이 일반) */ font-style: italic; text-align: justify; /* 글꼴 정렬, justify는 양쪽 정렬을 하기 위해 띄어쓰기 간격이 조금씩 달라질 수 있음*/ line-height: 36px; text-decoration: underline; }- Google Font 사용하는 방법
- https://fonts.google.com로 이동
- 원하는 폰트 검색
- 구글에서 제공하는 code 복사하여 사용
- Google Font 사용하는 방법
image
<img class="image" src="./image.png" alt="이미지 대체">.image {
width: 400px;
height: 400px; /* weight와 height를 모두 지정하면 이미지가 왜곡 될 수 있음 */
/* 이미지 크기 조절 */
object-fit: cover | contain | fill;
/* 이미지 정렬 */
object-position: left | right | center;
}input
- type 종류
- text, password, checkbox, radio, file, submit
<input type="text" placeholder="텍스트를 입력하세요.">Transform
- 요소의 회전, 크기 조절, 기울이기, 이동 효과 부여
- 애니메이션 효과 제공X
animation CSS
- 요소를 한 스타일에서 다른 스타일로 점진적으로 변경
keyframe: 특정 시간에 요소의 스타일- animation-name: 임의 지정
background-clip
- 요소 내에서 배경이 확장되어야 하는 거리
- 속성 값
- border-box: 테두리 영역과 그 안쪽 영역을 채웁니다.
- padding-box: 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
- content-box: 내용 영역과 그 안쪽 영역을 채웁니다.
Flexbox
- 요소를 반응형으로 만드는 데 사용
- 요소를 동적으로 배열할 수 있는 레이아웃(1차원) 모델
Flexbox Components
<div class="flexcontainer">
<div class="flexitem">Flex Item</div>
<div class="flexitem">Flex Item</div>
<div class="flexitem">Flex Item</div>
</div>-
Flex Container
- 아이템을 담는 컨테이너
display: flex | inline-flex
/* 플렉스 컨테이너에 적용할 속성 */ /* 아이템 나열 방향 */ flex-direction: row | column | row-reverse | column-reverse; /* 아이템 크기에 따라 줄 바꿈 일어나도록 */ flex-wrap: nowrap | wrap | wrap-reverse; /* flex-direction과 flex-wrap의 축약형으로 값으로는 flex-dirction값과 flex-wrap값을 순서대로 써주면 됨 */ flex-flow: row nowrap; /* 주축에 따라 항목의 남은 공간 분산하여 정렬 */ justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; /* 교차축에 따라 항목의 남은 공간 분산하여 정렬 */ align-items: flex-start | flex-end | center | stretch | baseline; /* 교차축 기준으로 두 줄 이상의 아이템을 정렬 => 반드시 flex-wrap:wrap인 상태에서 사용*/ align-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly; -
Flex Items
- 플렉스 컨터이너의 직계자식
/* 플렉스 아이템에 적용할 속성 */ /* 플렉스 컨테이너에 아이템이 나타나는 순서 제어(order 속성의 기본 값은 "0") */ order: 음수 | 0 | 양수; /* 컨테이너의 남은 공간을 아이템의 너비를 늘려 채움, 기본 값은 0, 음수 허용X */ flex-grow: 0 | 양수; /* 컨테이너를 벗어난 아이템 너비를 줄임, 기본값은 1(이미 적용되어 있음)*/ /* `flex-wrap: wrap;`이 부여된 경우 flew-shrink 속성이 적용되지 않음 */ flex-shrink: 0 | 양수; /* 아이템의 기본 사이즈 지정 */ /* main axis에만 적용됨 */ flex-basis /* 자식 아이템을 각각 다른 방식으로 교차축에 따라 정렬 */ /* align-items, align-content는 부모 요소의 자식 전체를 묶어 정렬한다는 점에서 차이점 존재 */ /* align-content 속성 지워주어야 제대로 적용됨 */ align-self: flex-start | flex-end | center | stretch | auto;
Main, Cross Axis
- 주축(main axis)은 flex-direction 속성에 의해 정의
- 요소가 나열되는 방향
- 교차축(cross axis)은 수직으로 진행
- 주축의 수직
