transform, opacity, z-index, text-decoration, box-sizing
transform
- 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성
- CSS의 좌표 공간을 변경하는 것
- none 값 또는 CSS 변형 함수 값을 지정해야 함
대표적인 CSS 변형 함수
rotate
- 2D 평면의 고정된 점을 중심으로 요소를 회전
scale
- 2D 평면에서 요소의 크기를 위아래로 조정
translate
- 2D 평면의 요소를 변환
opacity
- 요소의 불투명도를 설정
- 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대임
- 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속받지는 않음
- 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 가짐
- 자식 요소는 불투명하게 유지하고 싶다면 background 속성을 사용
- ex)
background: rgba(0, 0, 0, 0.4);
- ex)
z-index
- 위치 지정 요소와, 그 자속 또는 하위 플렉스 아이템의 Z축 순서(앞뒤)를 지정
- 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮음
z-index: auto;- 박스가 새로운 쌓임 맥락을 생성하지 않고 현재의 쌓임 맥락에서의 위치는 부모 요소와 동일
z-index: 0;z-index: -1;- 음수 값으로 우선순위를 낮출 수 있음
text-decoration
- 텍스트에 장식용 선을 추가하는 속성
- 모든 자손 텍스트 요소에 걸쳐 적용되기에 자식 요소에서 부모가 적용한 텍스트 장식을 제거할 수 없음
예제
text-decoration: none;text-decoration: underline;text-decoration: overline;윗줄text-decoration: dashed underline overline;- 밑줄과 윗줄을 동시에 적용할 수도 있음
text-decoration: solid underline red 4px;
box-sizing
- 요소의 너비와 높이를 계산하는 방법을 지정
- CSS 박스 모델의 기본값에서 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됨
- 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그림
- 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 함
box-sizing 속성의 키워드
- content-box
- 기본 CSS 박스 크기 결정법을 사용
- 요소의 너비를 100px로 설정하면 콘텐츠 영역이 100px 너비를 가지고, 테두리와 안쪽 여백은 이에 더해짐
.box {width: 350px; border: 10px solid black;}→ width = 370px
- border-box
- 테두리와 안쪽 여백의 크기도 요소의 크기로 고려
- 너비를 100px로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100px을 유지
- 대부분의 경우 border-box가 크기를 조절할 때 쉬움
.box {width: 350px; border: 10px solid black;}→ width = 350px
1122 수업 중 피그마로 구현한 나의 프로필을 구현해보는 실습을 하면서 심화된 버전을 알게 되었음
html 속성값과 css 속성값이 정말 많고 생각보다 구현할 수 있는 범위가 넓은 것 같고 하나씩 배워나가고 싶음
피린이