학원에서 배운 것/CSS16 KDT 5th 웹개발자 입문 수업 6일차 1. 전환 transition 요소의 전환(시작과 끝) 효과를 지정하는 속성, 원래 모양을 다른 모양으로 바꿀 때 사용 transition : 속성명 지속시간(필수) 타이밍함수 대기시간; 1-1. transition-property : 전환 효과를 사용할 [속성명]을 지정 - all : 모든 속성에 적용, 기본값 - 전환 효과를 사용할 특정 속성명을 정해줄 수 있음 1-2. transition-duration : 전환 효과의 [지속시간]을 지정 - 0s : 기본값(전환되는 효과가 없어보임) - 단위값 s 지정 -> 전환 시, 전환이 끝났을 때 동일하게 지속시간이 정해짐 1-3. transition-timing-function : 전환 효과의 [타이밍 함수]를 지정 - ease : 느리게 ➡️ 빠르게 ➡️.. 2023. 2. 2. CSS Diner 문제 다 풀었다!! 선택자가 매번 어려웠던 나는... 강사님이 오늘 소개해주신 선택자 관련 게임을 풀었다. 19번 한 문제 막혀서 구글링 했지만.. ㅎ 약간 아리송하던 개념을 다시 볼 수 있었다. (물론 아직도 선택자는 어렵다) https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 이제 복습해야지 ........ 😂 2023. 2. 1. KDT 5th 웹개발자 입문 수업 5일차 1. Position 요소의 위치 지정 기준 - static : 기준 없음 기준이 없으므로 top, bottom, left, right 를 사용할 수 없음! - relative : 요소 자신(상단좌측 모서리)을 기준 배치 전 자리(상단좌측 모서리를 기준으로)에서 top, bottom, left, right 로 배치를 변경해줄 수 있다. *배치 전 자리는 그대로 비어있게 되므로 기본적으로 다음 요소가 침범할 수 없다. - absolute : 위치 상 부모 요소를 기준 -> 부모의 요소의 위치를 확인해야 함 보통 부모 요소의 위치를 잡아준다음, position : relative;(static만 아니면 됨) 로 설정해두고 그 아래 자식을 position : absolute; 로 둬야 제대로 배치가 먹힌다. .. 2023. 2. 1. KDT 5th 웹개발자 입문 수업 4일차 ✚ 복습 추가 가상 요소 선택자인 ::before/::after 등은 주로 HTML에 가상의 content를 넣어줘서 디자인 요소를 넣어줘서 사용하므로 content="" 속성이 따로 없다면 다른 스타일들을 적용하더라도 적용되지 않는다. 그러므로 가상 요소 선택자는 꼭 content를 넣어주고 사용하자. CSS 속성 1. 박스 모델 웹페이지에 나타낼 수 있는 것은 글자와 상자로 나눌 수 있다. 즉, 요소가 화면에 출력되는 특성은 크게 인라인 요소/블록 요소로 나뉜다. ✔️ 인라인 요소 : 글자를 만들기 위한 요소들 ✔️ 블록 요소 : 상자(레이아웃)을 만들기 위한 요소들 * width/height의 기본값은 요소에 이미 들어있는 속성의 값임 span 요소 div 요소 span 요소 span 요소 div .. 2023. 1. 31. 이전 1 2 3 4 다음
