본문 바로가기

✏️/CSS

(10)

[CSS] flex 🔗 CSS에서 flex란? box와 item 등을 행 또는 열로 자유자재로 배치시킬 수 있는 CSS 속성이다. display: flex; flex-direction : 주축 방향 설정 · row : 가로축 → default · row-reverse : 가로축(역방향) ← · column : 세로축 ↓ · column-reverse : 세로축(역방향) ↑ flex-wrap : 줄바꿈 설정 · nowrap : 줄바꿈 X (1행에 모두 배치 => item width 자동으로 축소됨) default · wrap : 줄바꿈 O · wrap-reverse : 줄바꿈 O (역방향) ▪ flex shorthand flew-flow: flex-direction flex-wrap; justify-content : 주축(m..

[CSS] animation 🔗 CSS에서 animation이란? CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜주는 CSS 속성이다. @keyframs를 통해 중간 상태를 지정한다. animation-name : 애니메이션 이름 지정 @keyframes name : 중간 상태 지정 (from : 시점 0% ~ to : 시점 100%) animation-duration : animation 지속 시간 (몇 초 동안) animation-delay : animation 딜레이 시간 (몇 초 뒤에) animation-timing-fuction : animation 가속도 · linear default · ease : 빠름 -> 느림 (ease-out 보다 빠른 속도로 시작) · ease-in : 느림 -> 빠름 · ease-out..

[CSS] transition 🔗 CSS에서 transition이란? 애니메이션 속도를 조절하는 CSS 속성이다. transition-property : transition 적용할 속성들 나열 transition-property: width, background-color; => width, background-color만 transition 적용되고, 나머지는 그대로 transition-duration : transition 지속 시간 (몇 초 동안) transition-delay : transition 딜레이 시간 (몇 초 뒤에) transition-timing-fuction : transition 가속도 · linear default · ease : 빠 -> 느 (ease-out 보다 빠른 속도로 시작) · ease-in : 느..

[CSS] 선택자(selector) 정리 🔗 기본 선택자 태그명 태그 선택 .class명 class 선택 #id명 id 선택 🔗 전체 선택자 * 전체 선택 🔗 자식 선택자 > 자식(직계) 선택 🔗 동위 선택자 ~ 모든 뒤 동위 선택 + 바로 뒤 동위 선택 🔗 속성 선택자 [속성="값"] ex) ul li input[type='text']{} 🔗 속성값 일치 선택자 ~= 해당 단어 포함 선택 (띄어쓰기 기준) *= 해당 단어 포함 선택 ^= 해당 단어로 시작 선택 |= 해당 단어로 시작 선택 $= 해당 단어로 끝 선택 ex) h1[title*='제목']{} 🔗 상태 선택자 :checked 체크된 상태 :enabled 수정 가능 상태 :disabled 수정 불가능 상태 :focus 초점이 맞춰진 상태 🔗 child, of-type child => ..

[CSS] link (hover, active, visited, link) :link default 평상 시 :visited 방문한 적이 있는 상태 :hover 마우스 오버 상태 :active 마우스 오버 + 클릭 상태 (+) cursor: pointer; : 마우스 오버 상태일 때 커서 포인터로 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 4개일 때 : top right bottom left 2개일 때 : x축(top, bottom) y축(left, right) 1개일 때 : all 🔗 Font color : 텍스트 색상 font-size : 텍스트 사이즈 default : 16px.. devjindev.tistory.com

[CSS] display (inline, inline-block, block) / 차이점 🔗 CSS에서 display란? 요소를 어떻게 보여줄지 선택하는 CSS 속성이다. display: inline; => width, height 지정할 수 X 요소를 inline으로 표시한다. , , , , , , 등 display: inline-block; => width, height 지정할 수 O 요소는 inline이지만, 내부는 block으로 표시한다. display: block; => width, height 지정할 수 O / width 100% 요소를 block으로 표시한다. 따라서 요소 앞 뒤로 줄바꿈 된다. , , , , , , , , , , 등 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으..

[CSS] float / 해제하는 방법 🔗 CSS에서 float란? 요소를 띄어서(끌어올려서) 배치하는 CSS 속성이다. 🔗 float 해제하는 방법 자식이 모두 float를 가지면 부모 높이가 '0'이 되므로, 이를 되찾기 위해 float를 해제해줘야 한다. : after{ content: ''; display: block; visibility: hidden; clear: both; } 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 4개일 때 : top right bottom left 2개일 때 : x축(top, bottom) y축(left, right) 1개일 때 : all 🔗 Font color : 텍스트 색상 font-size ..

[CSS] position (static, relative, absolute, fixed) 🔗 CSS에서 position이란? 요소의 위치를 배치하는 CSS 속성이다. position: static; default position: relative; : 부모에 선언 => 기준 position: absolute; : 자식에 선언 => relative를 기준으로 position(top, left) position: fixed; : 위치 고정 ▪ overflow-y : 부모를 넘어간 자식 공간 처리 · hidden · scroll ▪ 우선순위 (숫자 클수록 우선순위 높아짐) default : 먼저 짠 거 < 나중에 짠 거 z-index: 숫자; 💡 같이 보면 좋을 Post [CSS] 왕초보를 위한 font / background / border 속성 총정리 css에서 속성은 '시계 방향'으로 적용 ..

이전 1 2 다음

티스토리툴바