2023/08/11
성능 최적화를 위해 cascading을 최소화하자
=> 시맨틱보다 중요한 것은 접근성과, 사용성
선택자 { 속성: 값; 속성: 값 }
- 최신 브라우저는 CSS를 대부분 지원하나,
지원하지 않는 경우에는 속성에 브라우저별 접두사를 붙여야 한다
link
태그 삽입이나@import
를 선언하여 외부 파일과 연결할 수 있다- 내부 스타일 시트와 달리 캐싱되기 때문에 로드하는 데에 유리한 장점이 있다
- HTML 문서의
head
에style
태그를 삽입하여 CSS를 사용하는 방법
- HTML 문서에서 특정 요소에
style
속성을 삽입하여 CSS를 사용하는 방법
- 동일한 스타일을 여러곳에 적용하고 싶을 때
class선택자
사용
=> 가급적 class에 스타일을 적용하는 방법을 사용하자a선택자 b선택자
=> a선택자의 자손 중 b선택자 호출a선택자 > b선택자
=> a선택자의 자식 중 b선택자 호출- 아이디 선택자는 #으로 호출한다.
a선택자 ~ b선택자
=> a선택자 뒤의 모든 b선택자.a선택자.b선택자
=> 두 클래스가 모두 지정된 요소 선택[속성값]
=> 속성 선택자로 호출
::
로 시작하며, 선택한 요소의 일부분에만 스타일을 적용할 때 사용
:
로 시작하며, 선택한 요소가 특정한 상태일 때에 스타일을 적용할 때 사용:root
=> 최상위 요소에 공통으로 사용될 속성들을 변수로 설정하면 여러 클래스에서 사용할 때 용이하다.
- 상속되는 속성
=> 디자인에 관련된 것- 상속되지 않는 속성
=> 공간에 관련된 것
=> 논리적으로 고민해보면 알 수 있다color
에inherit
값을 주면 고유의 컬러값이 아닌 상속값으로 바뀐다
- (1) 인라인 스타일, (2) id 선택자, (3) 클래스 선택자, (4) 요소 선택자
!important
는 다른 선언보다 우선해서 적용된다
=> 스타일이 겹쳐서 우선순위를 확인해볼 때만 사용하자
- 기본값은
16px
em
=> 상속값 *em
값rem
=> 루트값 *rem
값line-height
=> 줄간격
=> 넘버단위로 쓰는 것이 안전하다
시각적으로는 보이지 않지만 접근성을 고려할 때 사용한다
position: absolute; !important
=> 화면에서 띄우고,!important
로 다른 선언보다 우선하도록 한다width
와height
값을 줄인다overflow: hidden;
=> 박스보다 넘치는 내용물을 숨긴다clip-path: polygon(0 0, 0 0, 0 0);
=> 박스를 숨긴다display: none;
(=hidden
논리속성) 방식으로 숨기면 screen reader로 읽히지 않는다.
- content-box 방식
=>padding
,border
의 크기가 박스의 크기에 추가된다- border-box 방식
=>padding
,border
의 크기가 박스의 크기에 포함된다
- inline
=> 상, 하로는margin
,padding
값을 주어도 공간이 벌어지지 않는다
=>width
와height
의 값을 줄 수 없다
=> 컨텐츠의 크기에 맞게 너비가 조절된다- inline-block
=> 인라인 박스처럼 렌더링되지만 너비와 높이를 설정할 수 있음
=> 줄바꿈이 생기지 않는다- block
=> 기본적으로 부모 요소의 너비 전체를 채운다
=> 줄바꿈이 생긴다
- block, inline-block 요소에서 부모 요소의 너비를 주고 자식 요소에
%
너비를 주면 기기 너비에 맞게 조절된다
auto
=> 자식 박스가 부모 박스보다 큰 경우 스크롤이 생긴다visible
=> 자식 박스가 부모 박스보다 큰 경우 초과한 부분만큼 박스가 커진다hidden
=> 자식 박스가 부모 박스보다 큰 경우 초과한 부분을 숨긴다
=> 탭했을 때 선택되는 박스 영역이 보이지 않을 수 있다scroll
=> 자식 박스, 부모 박스의 크기와 상관없이 스크롤이 생긴다
- inline 박스의 상하에도
margin
,padding
이 적용되나 넘친다margin
,padding
에서auto
=>display: block;
인 경우에는auto
가 먹지 않는다- 컨텐츠 요소의 크기만큼의 너비를 가지는 block요소에
padding
값을 줘서 크기를 키울 수 있다
보통 3px 부분만 수정
box-shadow: 0px 0px 3px 0px gray;
background-clip
=> 배경 이미지 오려내기 영역 설정
=> 하단에 위치해야box-sizing
속성이 적용된다background-origin
=> 배경 이미지 시작 위치 설정
- 모든 요소의 포지션 기본 값은
static
relative
=> 원래 위치에서 상대적으로 이동한다absolute
=> 자신과 가장 가까운 상위 블록에서position
이static
이 아닌 것을 기준으로 삼아 움직인다
=> 상위 블록은relative
/ 움직이고자 하는 블록은absolute
로 많이 한다fixed
=> 설정한 대로 뷰포트 내에서 고정된다
=>absolute
와 달리 띄운 다음 뷰포트를 기준으로 움직인다sticky
=> 자신의 위치에 도달할 때까지 달라붙는다
z-index
=> 겹친 요소 중 위로 올라오게 할 때 설정
위로 띄워서 자기 부모의 영역 안에서 왼쪽이나 오른쪽으로 배치한다
자식이 모두
float
돼서 잃어버린 부모의height
를 찾을 때
display: flow-root;
- 부모도
float
시키기::after
를 만들어서content: ""
을 넣고display
를block
으로 설정하고,clear
시키기
=>clear
속성은display
가block
인 경우에만 적용이 가능하다overflow: hidden;
=> 넘치는 요소가 사라지는 리스크가 있다
currentColor
=> 글꼴의 컬러와 동일하게 적용
- 사용자 환경에 상관없이 최적의 사용자 환경을 제공하기 위해
사용자 기기에 응답하는 웹사이트를 디자인하는 프로세스- 기기에 상관 없이 모든 리소스를 다운 받아야 하기 때문에 리소스 체크를 항상 해야 한다
- 사용자 기기의 화면 크기에 따라 최적화 된다
px
이 아니고%
,em
,rem
같은 상대 측정 단위가 사용된다
- 미디어 유형에
max-width
속성을 적용해야 한다
- 미디어 쿼리의 조건이 맞지 않을 경우 뷰포트 메타 요소에 적용된 코드가 작동한다
- 너비, 초기 배율 등 기기의 화면에 최적화 할 수 있다
<meta name="viewport" content="width=device-width; initial-scale=1">
레이아웃을 위한 배치기법
- 부모 요소에
display: flex;
=> item은 block의 성격으로 렌더링된다flex-direction
=> item이 정렬될 방향을 지정
row
|row-reverse
|column
|column-reverse
justify-content
=> 주축 정렬
=> 아이템들을 정렬하는 방법
flex-start
|center
|flex-end
space-between
|space-around
|space-evenly
align-content(items)
=> 교차축 정렬
align-items
=> 기본값은stretch
이며, item들을 개별적으로 배치한다
=>flex-start
|center
|flex-end
|baseline
|stretch
flex-wrap
=>wrap
값을 주면 item들이 줄바꿈을 하게 된다- 단축 표기법
=>flex-flow: direction wrap;
order
값을 줘서 item의 정렬순서를 바꿀 수 있다
=>order
는 몸무게처럼 숫자가 클 수록 시작점에서 먼쪽부터 정렬된다
=> 같은 무게일 땐 마크업 순서가 뒤인 것이 먼쪽으로 간다flex-grow
=> 값을 준 남는 영역의 비율만큼 남는 영역을 가진다
=> 기본값은0
이며,1
을 줄 경우 부모의 박스의 너비를 자식들이 동일하게 나눠 갖는다flex-shrink
=> 줄이는 거
=> 기본값은1
이며,0
을 줄 경우 부모 크기와 상관없이 고유의 너비를 가질 수 있다flex-basis
=> 아이템의 초기 크기를 지정
=> 너비의 초기값을 지정한다.
=> width와 다르게 고정값을 가진다
=> 다른flex
속성에 따라 너비가 영향을 받는다.
auto;
=> 컨텐츠 크기만큼 크기를 가진다0;
=> 나머지 item을 배치하고 남은 크기를 가진다- 단축 표기법
=>flex: grow shrink basis;
grid
를 활용하여 배열할 요소들의 부모 요소에 display
의 값을 설정한다
display: grid(inline-grid)
px
, rem
, em
, %
, fr
등을 사용하여 각 track의 크기를 설정한다
gird-template-columns(rows)
=> 비율로 구역을 나눈다
=>repeat(반복할 수, 반복할 값)
를 이용하여 쉽게 값을 줄 수 있다minmax(최소값, 최대값)
=> 최소값보다는 크고 최대값보다는 작게 설정한다
=>auto
값도 가능하다
grid-row(column)-gap
을 사용하여 행과 열 사이의 간격을 설정한다
단축 표기법
=>grid-gap: 행간격 열간격
grid-area: 행 시작 / 열 시작 / 행 끝 / 열 끝;
=> 요소가 차지할 구역을 정한다
=>grid-area
의 값을 음수로 주면 마지막 줄부터 선택할 수 있다
grid-template-areas
=> 배열할 요소들에grid-area
속성의 값으로 이름을 부여하고
=> 부모 요소에grid-template-areas
속성의 값으로""
안에grid-area
속성에 줬던 이름을 원하는 개수만큼 넣어서 배열을 디자인한다
grid-area
=> 이름을 정의할 때 숫자는 사용할 수 없다=> 한 칸을 비우고 싶을 경우 이름 대신
.
을 적는다
명시적으로 배치되지 않은 아이템들을 자동으로 배치되도록 설정한다.
grid-auto-flow:
row(기본값)
|column
|dense
=>dense
: 배치 후 남은 공간을 밀집한 형태로 채워준다
행(열)축 정렬
=> 부모 요소에 justify(align)-items
속성을 준다.
justify(align)-items:
start
|center
|end
|stretch(기본값)
=>grid-item
에도grid
를 주고justify(align)-items
속성을 부여하면 content의 배치를 조정할 수 있다
컨테이너의 크기보다 그리드 아이템 트랙이 작을 때 사용한다.
justify(align)-content:
start
|center
|end
|stretch
|space-around
(between
|evenly
)
grid-item에 justify(align)-self
속성을 부여한다.
justify(align)-self:
start
|center
|end
|stretch
flex-item의 order
와 동일하게 동작한다
flex
와 grid
에서 요소 사이의 간격을 설정한다
transform: translateX(Y)(값)
=>X축(Y축)
으로값
만큼 이동한다transform-origin
=> 회전이 될 지점 지정
그라데이션 색깔 조합으로 배경 만들기
- 멀티로 배경을 지정할 때는 뒤에 배치할 배경의 코드를 밑에 위치한다
자바스크립트를 이용한 애니메이션에 비해 성능이 좋다
@keyframes
=> 애니메이션이 적용될 특정 시점(백분율)과 애니메이션 정보를 지정animation-name
(필수 속성)
=>@keyframes
에서 지정한 이름 할당animation-duration
(필수 속성)
=> 지속 시간animation-fill-mode
=> 실행 이전이나 이후에 효과를 표시할지 여부 지정animation-delay
=> 실행을 지연시킨다animation-play-state
=> 애니메이션을 켜고 끌 수 있게 한다(paused
|running
)이동효과를 줄 때 상대적으로
transform
이 리플로우를 덜 발생시킨다
지정한 속성이 점진적으로 전이되는 과정을 구현
transition-property
(필수 속성)
=> 지정된 속성 값이 전이된다transition-duration
(필수 속성)
단을 나누는 디자인을 할 때 사용한다
column-count
=> 지정한 값만큼 단을 나눈다column-width
=> 1개 단의 너비를 지정한다단축표기법
columns
=>count
와width
를 값으로 줄 수 있다column-gap
=> 단 사이의 간격을 조정한다column-rule
=> 단 사이의 구분선을 디자인한다column-span
=> 기본값은none
,all
값을 주면 단들이 병합된다column-fill
=>balance
값을 주면 단의 높이가 균형을 이루도록 해준다break-after
=> 페이지를 나눌 지점을 설정한다
=> 자동으로 번호를 매길 때 사용한다
사용법
- counter-reset
=> counter의 이름 또는 초깃값을 지정한다(초깃값의 기본값은 0)
=>counter-reset: 카운터이름 초깃값
- counter-increment
=> counter의 증가(감소)값을 지정한다(기본값은 1)
=>counter-increment: 카운터이름 증가(감소)값
- counter()
=> 해당하는 카운터의 값을 보여준다
=>counter(카운터이름, list-style-type)
- counters()
=> 중첩된 카운터가 필요할 때 사용
=>counters(카운터이름, 구분할text, list-style-type)
list-style-type
은 생략 가능하며, 기본값은 십진수(decimal) 형태
=> clamp(최솟값, 기본값, 최댓값)
공백 문자를 처리하는 법을 지정한다.
값
=> 기본값은normal
nowrap
=> 연속된 공백을 무시하고, 줄바꿈이 일어나지 않으며, 부모요소를 넘칠 수 있다
=>text-overflow
의 속성에ellipsis
로 값을 주면 말줄임표가 생긴다pre
=> 연속된 공백과 줄바꿈이 그대로 적용되고, 부모요소를 넘칠 수 있다pre-wrap
=>pre
와 동일하나, 부모요소를 넘치지 않는다pre-line
=> 줄바꿈만 적용되고, 부모요소를 넘치지 않는다
이미지나 비디오 요소의 콘텐츠 크기를 조절해 부모요소에 맞추는 방법을 정한다.
사용법
object-fit: fill(기본값)
=> 가로/세로의 비를 무시하고 부모 요소에 가득 맞춘다object-fit: contain
=> 가로/세로의 비를 유지하면서 세로가 최대한 길어질 때까지 부모 요소에 가득 맞춘다object-fit: cover
=> 가로/세로의 비를 유지하면서 가로가 최대한 길어질 때까지 부모 요소에 가득 맞춘다object-fit: scale-down
=>contain
과cover
중 크기가 더 작아지는 값을 따른다
프로젝트에서 공통적으로 사용될 수 있는 디자인 요소들은 만들어두고 갖다가 쓴다.
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding
을 준다.padding-left: 30px
module.css
는 class
코드를 module
객체로 받아서 사용한다.
👉 지정한 class
이름에 랜덤 값이 추가되기 다른 class
와 겹치지 않는다는 장점이 있기 때문에 사용한다.