투명도
opacity의 정수 0은 생략이 가능하다.
Q) opacity 속성의 기본값은?
1
글꼴
font-style
font-weight
font-size
line-height
와우~ line-height 에 다음처럼 2 또는 200%로 지정하면 자동으로 font-size 에 맞춰 2배수로 line-height 가 할당된다.
이때 까지 나는 아래 예시처럼 line-height 에 px 를 명시했는데, 이제는 배수를 사용해야겠다.
아래 예시를 보면 line-height 가 32px로 할당 되어있고 글씨는 그 중앙에 위치하는 것을 알 수 있다.
따라서 글씨는 line-height의 중앙에 배치된다.
font-family
글씨체는 font-family 속성으로 변경한다.
글꼴계열은 내장되어있는 글꼴을 명시해줘야한다. 적용하려는 글꼴이 모두 없는경우에 사용되어야하기 때문이다.
실제 예시를 보면 -apple-system -> BlinkMacSystemFont 순으로 적용을 한다.
또한 "Malgun Gothic" 이라는 글꼴을 볼 수 있는데, 띄어쓰기가 있는 글꼴명인 경우 이처럼 따옴표로 묶어서 명시한다.
글꼴 계열
글꼴 계열에 어떤 것들이 존재하는지 알 수 있다.
Q) 글자 기울기를 지정할 때 사용하는 속성과 값은?
font-style: italic;
Q) 글자를 두껍게 지정할 때 사용하는 속성과 값은?
font-weight: bold;
Q) 고딕체 계열을 의미하는 속성 값은?
font-family: sans-serif
Q) line-height 속성을 사용할 때 권장하는 단위는?
line-height: 2;
line-height: 1.4;
배수
문자
문자 중앙 배열
하나 기록하고 싶은 것은 flex 를 사용하지 않고도 글자를 가운데 정렬하는 방식이다.
나는 이러한 것들도 flex로 처리하는데 아래 방식도 알아두면 좋을 것 같다.
color
text-align
text-decoration
text-indent
이 속성은 별로 사용해본적이 없는 것 같다.
들여쓰기에 대한 속성이고 반대로 음수값을 넣으면 내어쓰기가 된다.
Q) 문자를 수평 정렬하는 속성은?
text-align
Q) 문자를 들여쓰는 속성은?
text-indent
Q) text-decoration 속성의 기본값은?
none
배경
background 속성의 값에 url(images/logo.png) 가 명시 된 것을 확인할 수 있다.
앞서 경로에 대해 배울 때 images/logo.png = ./images/logo.png 라고 배운점을 다시 상기하자.
아래 예시에서 background url 의 경로는 절대경로를 사용했다.
background-size : 50 으로 지정되었을때 남은 공간에 배경이 바둑판 배열되는 것을 볼 수 있다.
이러한 반복 출력을 의도하지 않았다면 다음 속성을 통해 반복을 제거할 수 있다.
background-repeat: no-repeat;
그리고 background-position: center 를 사용하여 가운데에 배경을 배치한다.
background-color
background-image
배경 색상은 이미지 뒤에 나온다.
background-repeat
background-position
방향은 아래예시처럼 두가지 방향을 명시할 수 있다.
따라서 우측 상단에 배경이미지가 배치된다.
또한 x 좌표와 y좌표를 명시하는 방법도 사용할 수 있다.
이때 첫번째는 x, 두번째는 y로 순서에 주의해야한다.
background-size
cover 는 더 넓은 너비에 맞춰지기 때문에 이미지가 짤린다. 이때 기준은 이미지가 아닌 배경을 적용하는 요소이다.
contain 은 더 짧은 너비에 맞춰진다. 이때 기준은 이미지가 아닌 배경을 적용하는 요소이다.
background-attachment
background-size : 150px 100px 처럼 x길이 y 길이 모두 명시할 수 있지만
아래처럼 100px 하나만 명시할 경우 브라우저가 x 길이를 기준으로 y 길이를 계산해주기때문에 더 편리하다.
background-attatchment : scroll 를 명시하면 다음처럼 동작한다.
background-attatchment : fixed 값을 할당하면 배경이 고정된다.
Q) 요소 배경에 이미지를 삽입하는 속성은?
background-image
Q) 요소 배경에 이미지를 삽입할 때 사용하는 함수는?
url("이미지경로")
Q) 배경 이미지를 반복하지 않는 속성 값은?
no-repeat
Q) 요소가 스크롤 될 때 배경 이미지는 뷰포트에 고정되는 속성 값은?
background-attatchment: fixed;
배치
position
relative
relative 는 요소 자신의 위치를 기준으로 새롭게 요소를 배치 시킨다.
여기서 주의할 점은 기존 위치의 요소가 존재한다는 것이다.
3번 오랜지 박스는 2번의 기존 위치 아래에 위치한 것을 확인할 수 있다.
따라서 relative 로 옮겨진 요소는 실제 위치가 아님을 주의해야한다. (실제 위치는 분홍색 영역)
absolute
absolute가 적용되어 있는 요소의 부모에 relative 가 적용되어 있지않다면, 부모 요소가 뷰포트가 되어버린다.
따라서 위치 상 부모 요소를 지정해주어야 원하는 위치에 요소를 배치시킬 수 있다.
fixed
fixed 값은 헤더와 배너를 만들 때 유용하게 사용된다.
요소 쌓임 순서
z-index 는 position : static 이 아닌 요소에 적용할 수 있다.
다음은 relative 일때도 적용되는 예시.
position: absolute 에만 사용할 수 있다 라고 생각했던건 아니지?
z-index
position 을 사용하면 display 속성값이 변한다?
오호 또 몰랐던 내용이다!
position 속성 값으로 absolute, fixed 가 지정된 요소는 display: block 이 적용된다.
아래 예시를 보면 span 은 display 인라인 인데, position: absolute 가 부여되어 display: block 으로 변경된 것을 확인할 수 있다.
Q) position 속성의 기본값은?
static
Q) 위치상 부모 요소를 기준으로 배치하는 position 속성의 값은?
absolute
Q) 뷰포트를 기준으로 배치하는 position 속성의 값은?
fixed
Q) display 속성이 block 값으로 바뀌지 않는 position 속성의 값은?
- absolute
- relative
- fixed
relative
플렉스(정렬) Container
display: flex 가 적용되어 있는 요소를 Flex Container 라고 하고, 자식 요소들은 Flex Items 가 된다.
flex-wrap
justify-content
align-content
align-content 는 교차축이 여러줄 일때 정렬하는 방법이다.
보통은 한줄의 align-items 를 많이 사용한다.
왜 이렇게 생소하지.
align-content 는 flex-item 이 2 줄 이상일 경우에 적용된다.
또한 flex-item 에 height 를 별도로 명시하지 않으면 부모 요소의 height 의 남는 영역만큼 공간을 차지하게 된다.
align-items
위 align-content는 주축 하나만 고려했다면 align-litems 는 줄 하나당 축이 존재한다.
흠 ~ 따라서 여러줄 일때는 align-content 를 사용하고 한 줄 일때는 align-items 를 사용하자.
Order
숫자가 작을 수록 flex box 의 앞에 있다.
flex-grow
flex-grow, flex-shrink, flex-basis 이전에 공부했던 내용 한번 보고 들어가기.
2022.08.18 - [FrontEnd/CSS] - [Flex] 일분코딩
flex-shrink
flex-basis
Q) display: flex 가 지정된 요소의 자식 요소를 Flex ??? 이라 부릅니다. 에서 ??? 에 들어갈 용어는?
Items
Q) Flex Container의 주 축을 지정하는 속성은?
flex-direction
Q) flex-wrap 속성의 기본값은?
nowrap
Q) 교차 축(Cross-axis)의 한 줄 정렬을 위한 속성은?
align-items
Q) Flex Item 의 증가 너비를 지정하는 속성은?
flex-grow
Q) flex-grow 속성의 기본값은?
0
Q) flex-shrink 속성의 기본값은?
1
Q) flex-shrink 속성의 기본값은?
1
전환
transition 은 자료에 나온대로 요소의 시작과 끝을 애니메이션 효과처럼 연결해주는 것을 의미한다.
transition-property
transition-property 의 디폴트 값은 all 이지만 width 처럼 원하는 속성만 적용시킬 수 있다.
다음 처럼 말이다. 아래 코드에서는 transition 효과가 width 속성에만 적용된다.
transition-duration
오 ~ 이거 대박이다. 몰랐던 내용 또 발견
다음 처럼 콤마 로 여러개의 속성에 다른 시간의 transition 을 적용할 수 있다.
transition-timing-function
easing 함수는 만들어져있는거 사용하자!
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
easings.net
transition-delay
다음 처럼 단축 속성에 시간을 나타내는 값이 두개 있으면 첫번째는 지속시간 , 두번째는 대기시간을 의미한다.
Q) transition-property 속성의 기본값은?
all
Q) transition 단축 속성의 필수 포함 속성은?
transition-duration
변환
translate
여기서 주의할 점은 translate(x,y) 는 2D 에 대한 변형이고 , translateY, translateX는 3D 에 대한 변형이다.
scale
rotate
rotateX 와 rotateY 는 3D 변형이므로 변경을 확인하려면 perspective 라는 원근법을 적용시켜야한다.
다음 처럼 말이다.
원근법 함수는 제일 앞에 작성해야한다.
다음 css 는 어떻게 적용되는 것일까?
만약 perspective(150px) 만 적용되어있다면 다음과 같을 것이다.
transform: perspective(150px) rotateX(45deg);
여기서 translateX(100px) 를 바라보는 중심점을 X 축으로 100 만큼 이동시킨다.
잘이해가 안돼서 예시를 좀 더 찾아봤다.
perspective
해당 속성은 transform 을 가진 요소의 부모에 적용해야한다.
See the Pen [css] persepctive by mill (@millfeel) on CodePen.
transform: perspective( )
See the Pen [css] perspective() by mill (@millfeel) on CodePen.
backface-visibility
뒷면을 보여줄꺼니 안보여줄꺼니에 관한 css 속성
카드 UI 만들때 좋겠구만
See the Pen Untitled by ehddud1006 (@ehddud1006-the-looper) on CodePen.
간단하게 CSS 에 대해 설명해보자.
뒷면에 적용된 다음 css 와 backface-visibility: hidden 으로 인해 뒤 라고 명시되어 있는 면은 보이지 않는다.
transform: rotateY(-180deg);
만약 hover 가 발생할 경우에는 앞면과 뒷면이 다음처럼 회전되어 뒷면이 보이게 된다.
Q) transform 속성의 2D 회전을 지정하는 변환 함수는?
rotate()
Q) 관찰 대상의 부모 요소에 원근법을 지정하는 속성은?
perspective
Q) skewX 변환 함수에서 값으로 사용하는 단위는?
deg
Q) perspective 함수에서 원근 거리가 적용되는 대상은?
관찰 대상 자체
Q) 요소의 둣면을 숨기는 속성과 값은?
backface-visibility: hidden;
'카카오 테크 캠퍼스 > HTML CSS JS' 카테고리의 다른 글
| [카테캠 5주차] 자바스크립트 기초 (0) | 2023.05.14 |
|---|---|
| [카테캠 4주차] 오버워치 캐릭터 선택 예제 (4) | 2023.05.07 |
| [카테캠 3주차] CSS 속성 (0) | 2023.04.28 |
| [카테캠 3주차] CSS 개요 (2) | 2023.04.27 |
| [카테캠 1주차] 웹에서 시작하기 / HTML 개요 / HTML 핵심 정리 (0) | 2023.04.14 |