CSS (15) 썸네일형 리스트형 [css] visited, hover, active .icon-plus:visited { } -visited : 한번 이상 방문 (이전에 클릭한 적이 있는 링크) .icon-plus:hover { } -hover : 마우스 포인터를 글자 위에 올린 상태 .icon-plus:active { } -active : 글자를 클릭한 순간 [css] text-shadow 그림자 text-shadow: 3px 4px 5px #666666; -3px : 오른쪽 그림자 길이 -4px : 아래쪽 그림자 길이 -5px : 흐린 정도 -#666666 : 그림자 색상 [css] justify-content, align-items, flex-direction, order, align-self, flex-wrap, align-content justify-content 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items 속성은 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬 flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다. baseline: 요소들을 컨테이너의 시작.. [css] 선택자 링크 a:link 링크 걸린 텍스트 선택 a:visited 링크 방문을 했던 텍스트만 선택 a:hover 링크 걸린 텍스트에 마우스를 올렸을 때 a:focus 링크 걸린 텍스트에 포커스가 생성되었을 때 a:active 링크 걸린 텍스트에 마우스를 눌렀을 때 [Css] 반응형 단위 vw, vh, em, rem 크롬에서 폰트사이즈 변경할때 변경이됨 vw : viewport 너비의 1% vh : viewport 높이의 1% em : 요소의 글꼴 크기 rem : 루트 요소의 글꼴 크기 .parent { font-size: 8em; } .child { font-size: 0.5em; } 보통 폰트 사이즈 지정안하면 16px인데, parent가 8em이면 16px * 8 = 128px 로 표기가 되고 child는 128px(parent크기) * 0.5 = 64px 로 표기된다 퍼센트로 바꾸면 위의 em과 똑같다 .parent { font-size: 800%; } .child { font-size: 50%; } .parent { font-size: 8rem; } .child { font-size: 0.5rem; } pa.. [Css] Flexbox container에 꾸밀수 있는건 display flex-direction flex-wrap flex-flow justify-content align-items align-content item 지정할 수 있는건 order flex-grow flex-shrink flex align-self 초기세팅 container: 100vh 에서 100% 로 바꾸면 배경이 사라진다 container의 부모의 높이에서(부모 -> body) 100%로 하겠다 item에 width, height 추가 container에 display: flex를 주면 한줄에 작성된다 flex-direction: row가 기본값 flex-direction: row-reverse 는 오른쪽에서 왼쪽으로 flex-direction: colum.. [CSS] position 1. container에 left와 top을 주어도 안움직인다. 왜냐하면 기본적으로 position: static 이기 떄문이다 그래서 container위치를 바꾸려면 container에 position: relative를 주면 된다 현재 위치를 기준으로 위치를 지정한다. box에 left, top, position: relative 추가하니까 box 혼자 이동하였다 body 또는 컨테이닝 박스를 기준으로 위치를 지정할 수 있다. position: absolute를 쓰면 현재 아이템에서 제일 가까운 box안에서 이동한다 relative는 원래 있어야할 자리에서 움직이는데, absolute는 현재 아이템이 담겨있는 상자(container)안에서 옮겨간다 position: fixed 는 상자안에서가 아닌 윈.. [CSS] display 1. span은 안나옴. 내용이 있어야 나온다 2. span에 내용 추가해주고 div는 red, span은 blue로 색 지정 div는 기본적으로 block span은 기본적으로 inline 3. span에 display: block을 주면 div와 같아진다 4. div에 display: inline-block을 주면 옆으로 표시된다 5. div에 display: inline을 주면 span에 아무것도 안주어졌을 때처럼 표시된다 display: inline -> 안에 있는 텍스트에 따라 크기가 바뀜 display: inline-block -> 안에 있는 텍스트에 상관없이 지정한 값에 따라 한줄에 표시되는데 크기가 넘어가면 다음줄로 넘어간다 display: block -> 안에 있는 텍스트에 상관없이 지정.. [CSS] 사이트 1. display 게임 사이트 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. 애니메이션 사이트 https://animista.net/play/basic/rotate Animista - CSS Animations on Demand Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use. animista.net 3. 언어별로 공식 사이트 정리 https://devdoc.. [CSS] 크롬과 shadow 관련 1. css에서 shadow 관련해서는 구글에 'box shadow css generator' 검색하면 이런 사이트가 나온다 2. 글씨체 바꾸기 크롬 설정에서 Experiments - Enable new Font Editor tool within the Styles Pane. 선택 그이후 F5하면 글씨체 변경 가능하다 3. Flex box editor 개발자 모드에서 옆에 아이콘 선택하면 가능 grid, flex도 가능 이전 1 2 다음
