📌 Box Model
- 기본적으로 모든 HTML 요소를 감싸는 상자
- 여백, 테두리, 패딩 및 실제 콘텐츠로 구성
Content: 텍스와 이미지가 나타나는 상자의 내용Padding: 콘텐츠 주변 영역을 지움. 패딩은 투명Border: 패딩과 콘텐츠를 둘러싸는 테두리Margin: 테두리 밖의 영역을 지움. 여백은 투명
.a-button {
margin-right: 5px; /* 요소 외부에 5px 공간 추가 */
margin-right: -5px; /* 음수 => 반대방향 여백 추가 */
margin-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
margin: 5px; /* 모든 면에 5px 여백 추가 */
margin: 5px 10px; /* 여백 상하 5px, 좌우 10px 추가 */
margin-left: <top><right><bottom><left>
padding-top: 5px; /* 요소 내부에 5px 공간 추가 */
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-right: -5px; /* 음수는 영향 없음 */
padding: 5px /* 모든 면에 5px의 패딩 추가 */
padding: 5px 10px /* 패딩 상하 5px, 좌우 10px 추가 */
padding: <top><right><bottom><left>
border-width: 1px; /* 테두리 너비 설정 */
border-width: 1px; /* 테두리 스타일 설정 */
border-width: 1px; /* 테두리 색 설정 */
border: <width><style><color>;
border: 1px solid blue;
}📌 텍스트 스타일링
.a-button {
font-familt: serif; /* 글꼴 변경 */
/* 글꼴 스택 : Roboto 없으면 -> Verdana -> Arial 순 적용 */
font-family: Roboto, Verdana, Arial;
font-size: 40px; /* 글꼴 사이즈 변경 */
font-weight: bold; /* 글꼴 굵기 변경 */
font-style: italic; /* 글꼴 스타일 변경 */
text-align: center;
line-height: 36px;
text-decoration: underline;
text-decoration: none;
}font-weight
- 글꼴 두께 지정
- 일반 = 400 / semi-bold = 500 / bold = 700
text-align
- 텍스트 정렬 설정
- left 왼쪽 정렬 / right 오른쪽 정렬 / center 가운데 정렬
- jutify 양쪽 정렬 / initial 기본값으로 설정 / inherit 부모 요소의 속성값 상속 받음
📌 Image
<img class="image" src="image.jpef" alt="이미지 이름">src: 이미지 소스의 URL 명시alt: 이미지를 보여줄 수 없을 떄 해당 이미지를 대체할 텍스트 명시
=> 사용자가 느린 네트워크 환경이나 src 속성 값의 오류, 시각 장애인용 스크린 리더의 사용 등 어떤 이유로든 사용자가 이미지를 볼 수 없을 떄 이미지 대신 제공할 대체 정보를 제공
.image {
width: 400px; /* 이미지 너비 400px로 조정
높이도 크기 조정해 이미지 크기 유지 */
height: 400px; /* 너비, 높이 모드 설정시 이미지 늘어날 수 있음 */
object-fit: cover; /* 늘어나거나 왜곡되지 않고 전체 width*height 영역 포함하도록 이미지 확대 */
object-fit: contain; /* width*height 영역에 포함되도록 이미지 축소 */
object-position: left; /* width*height 연역에서 이미지 위치 결정 */
object-position: right;
object-position: top;
object-position: bottom;- object-position
- 컨테이너 내에서
<img>,<video>를 배치하는 방법을 지정
- object-fit
컨테이너에 맞게 <img>, <video> 크기 조정하는 방법을 지정하는 데 사용
<fill>: 기본값. 이미지는 주어진 치수 채우도록 크기 조정. 필요시 이미지에 맞게 늘어나거나 찌그러짐<contain>: 종황비 유지하지만 주어진 치수에 맞게 크기 조정됨.<cover>: 종황비 유지하고 주어진 치수 채움. 이미지에 맞게 잘림.<none>: 이미지 크기 조정X<scale-down>: 이미지가 none 또는 포함의 가장 작은 버전으로 축소
📌 input
- HTML에서는 다양한 타입의 input 요소를 사용해 사용자로부터 입력 받을 수 있음
📌 Transform
- 요소에 회전, 크기 조절, 기울이기, 이동 효과 부여하는 속성
- CSS 시각적 서식 모델의 좌표 공간을 변경
- 애니메이션 효과는 적용하지 않아 정의된 프로퍼티가 바로 적용되어 화면에 표시됨
- 애니메이션 효과를 부여할 필요가 있다면 트랜지션이나 애니메이션과 함께 사용해야함
| transform 함수 | 설명 |
|---|---|
| scale(): | 요소 크기, 글꼴 크기, 패딩, 높이 및 너비에 영향 |
| skewX() 및 skewY(): | 요소를 왼/오 기울임 |
| translate(): | 요소를 옆/위아래로 이동 |
| rotate(): | 요소를 현재 위치에서 시계방향으로 회전 |
| matrix(): | 손으로 작성하도록 의도된 것은 아니지만 모든 변환을 하나로 결합하는 함수 |
| perpective(): | 요소 자체에 영향X. 하위요소의 3D 변환에 영향을 미쳐 모든 요소가 일관된 깊이 관점을 가질 수 있음 |
- Skew
- 요소 기울임
skew(x-angle, y-angle), skewX(x-angel) /* +/- 각도 */- Rotate
- 요소 회전
- +/-각도
- 각도 양수 => 시계방향, 각도 음수 => 반시계 방향
rotate(angle) rotateX(x-angle) rotateY(y-angle) rotateZ(z-angle)- translate
- 요소 위치 이동
- 원래 위치 기반으로 이동하며, 기존 위치 정보는 남아있음
translate(x,y) translateX(n) translateY(n) /* px, %, em 등 */- Scale
- 요소를 x축 x배, y축 y배 확대 및 축소
- 부모 요소에 적용하면 하위 요소까지 영역을 가지는 모든 요소를 확대/축소해주기 떄문에 페이지 전체의 확대나 축소에도 적용할 수 있음
scale(x,y) scaleX(n) scaleY(n) /* 0과 양수 */📌 animation CSS
- 요소를 한 스타일에서 다른 스타일로 점진적으로 변경 가능
- CSS 애니메이션 사용하기 위해 먼저 애니메이션에 대한 키프레임을 지정
- 키프레임은 특정 시간에 요소의 스타일을 유지
- 애니메이션 속성값
| animation-name | @keyframes 애니메이션의 이름 지정 |
| animation-duration | 애니메이션이 한 주기 완료하는데 걸리는 시간 지정 |
| animation-timing-function | 애니메이션 속도 곡선 지정 ex) linear, ease, ease-in ... |
| animation-delay | 애니메이션 시작 지연 지정 |
| animation-iteration-count | 애니메이션 재생해야하는 횟수 지정 |
| animation-direction | 애니메이션 앞/뒤/번갈아 재생해야 하는지 여부 지정 ex) normal, alternate, reverse ... |
| animation | 모든 애니메이션 속성 설정하기 위한 약식 속성 |
animation-direction
| normal | 기본값. 애니메이션이 정상적으로 재생(forwards) |
| reverse | 애니메이션이 역방향 재생(backwards) |
| alternate | 애니메이션이 앞->뒤 순으로 재생 |
| alternate-reverse | 애니메이션이 뒤->앞 순으로 재생 |
📌 background-clip
- 요소 내에서 배경(색상, 이미지)이 확장되어야하는 거리 정의
border-box: 테두리 영역과 그 안쪽 영역 채움padding-box: 안쪽 여백 영역과 그 안쪽 영역 채움content-box: 내용영역과 그 안쪽 영역 채움initial: 기본값으로 설정inherit: 부모 요소의 속성 값 상속
📒 John Ahn - <따라하며 배우는 HTML, CSS> https://inf.run/MzQn
