[카테고리:] 학습정리

box-shadow는 요소의 전체크기를 기준으로 그림자를 만든다box-shadow: 1px 1px 1px #000; 맨 첫번째는 가로 두번째는 세로, 세번째는 번짐을 칭하며 마지막은 색깔을 정해준다 text-shadow또한

더 읽기

transform: ;으로 작성하고transform 안에rotatetranslatescale등으로 요소를 조정할수있다 transition으로 요소가 자연스럽게 바뀌도록 할수도 있다 (hover, focus등 포함)transition: all 3s;

@keyframes name {0% {}100% {}}로 기본문법을 작성하고 0%와 100%안에 스타일을 넣는다 애니메이션을 요소에 적용할 때에는 animation: name 3s linear; 이런식의 문법으로 작성한다

결합자는 특정 요소를 선택할때 사용되며 띄워쓰기를 이용하면 그 아래 모든 후손을 선택합니다> 를 이용하면 아래있는 모든 자식을 선택합니다+ 를 이용하면 바로 아래있는

더 읽기

보더는 요소의 테두리를 만들어줍니다 보더는 요소를 기준으로 padding, border, margin 순으로 구성되어있다 border:3px solid #000; 으로 스타일링 할 때 3px은 선의 넓이,

더 읽기

포지션은 요소의 위치를 잡을때 사용하며 초기값은 static이다. relative를 이용하여 위치를 지정하면 그때부터 top, left, right, bottom을 이용하여 위치를 옮길 수 있습니다absolute를 이용하면

더 읽기

수도 엘리먼트는 가상 요소로 ::selection 선택한 텍스트::before 이전::after 이후 등가상의 요소를 추가하여 스타일을 지정해 줄 수 있습니다

수도 클래스는 가상클래스로 HTML과 결합하여 :hover 마우스가 올라갔을때:first-child 첫번째 자식:last-child 마지막 자식:nth-child(n) n번째 자식:focus 포커스 되었을때 등을 확인하여 스타일을 줄 수 있다

ul : 순서가 없는 목록 ol : 순서가 있는 목록type속성을 이용하여 마커의 유형을 지정할 수 있다 (1, A, a, I, i 등)start속성을

더 읽기