본문 바로가기

웹코딩 배우기/· CSS140

Flexbox 정의 See the Pen Flexbox 정의 by nilgi (@nilgi) on CodePen. Flexbox는 아이템의 위치 지정(예:float) 없이 반응형 웹페이지를 만드는데 아주 유용하다. Flexbox의 기본은 Flex comtainer안에 아이템을 넣어 display: flex 한다. 티스토리 오디세이 스킨에 Flexbox가 사용되고 있다. 다른 스킨은 안 봐서 모르겠음. html의 구조를 보면 div안에 div 4개가 있다. div의 기본 성질은 block 구조로 쌓는 성질인데 flex를 사용하면 inline구조를 가지게 된다. flex는 방향 값이 있으므로 변경 가능하다. 2021. 10. 1.
resize; 크기 조정 가능한 박스 만들기 See the Pen resize by nilgi (@nilgi) on CodePen. [박스의 오른쪽 끝 조절] • resize: horizontal; // 가로 크기만 조절 가능 • resize: vertical; // 세로만 가능 • resize: both; // 가로세로 가능 2021. 9. 30.
column-count 레이아웃 나누기 See the Pen column-count by nilgi (@nilgi) on CodePen. • column-count: 3; // 칸 수 • column-gap: 50px; // 칸 간격 • column-rule-style: solid; // 칸 사이 줄 • column-rule-width: 1px; // 줄 굵기 • column-rule-color: tomato; // 줄 색 • column-rule: 4px solid #1E90FF; // 줄 속기(border와 쓰는 방법 같음) • column-span: all; // 레이아웃에서 제외(레이아웃 전체에 적용) • column-width: 100px; // 칸 크기 지정 2021. 9. 29.
object-position 콘텐츠 위치 지정 See the Pen qBrKxvV by nilgi (@nilgi) on CodePen. • object-position: 80% 100%; // (기본값 50% 50%)콘텐츠의 x% y%로 위치 지정. • object-position: left bottom; // 방향으로 지정. • object-position: 200px 100px; // px로 지정하여 박스 밖으로 콘텐츠를 내보낼 수 있다. 2021. 9. 29.
object-fit 박스에 콘텐츠를 채우는 방식 See the Pen object-fill by nilgi (@nilgi) on CodePen. object-fit: fill; // 기본값. 콘텐츠를 박스에 가득 채운다. 가로세로비가 깨진다. object-fit: cover; // 가로세로비 유지하여 가득 채운다. 박스와 콘텐츠의 크기가 다르면 이미지가 잘린다. object-fit: contain; // 박스 크기에 맞게 가로세로비를 유지하여 가득 채운다. object-fit: none; // 콘텐츠의 크기를 조절하지 않는다. 박스 크기만큼 보여주고 이미지는 잘린다. object-fit: scale-down; // nono과 contain 중 콘텐츠 크기가 작은 값 선택하여 보여준다. 아~ 헷갈려~ @_@) 2021. 9. 24.
box-reflect 반사 효과 See the Pen box-reflect 반사 by nilgi (@nilgi) on CodePen. -webkit-box-reflect: below; // 아래로 반사 -webkit-box-reflect: above; // 위로 반사 -webkit-box-reflect: left; // 왼쪽으로 반사 -webkit-box-relfect: right; //오른쪽으로 반사 -webkit-box-reflect: righy 30px; // 반사 사이에 공간 넣기 -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0) rgba(0,0,0,0.7)); // 그라디언트를 이용해 물에 비치는 효과 만들어 보기 2021. 9. 24.
슬라이드로 들어오는 카드 만들기 See the Pen 들어오는(슬라이드) 카드 by nilgi (@nilgi) on CodePen. [이미지에 마우스를 올려보세요] 이거 이해하고 정리하는데 1시간 넘게 걸렸다. (〃￣︶￣)人(￣︶￣〃) ㅋㅋㅋ 이해한게 어디야. 2021. 9. 17.
풍선 도움말 만들기 See the Pen 풍선 도움말 by nilgi (@nilgi) on CodePen. 이걸 공부하면서 느낌. 저거 하나 만드는데 이리 긴~~~ CSS를 써야 하는구나. [웹코딩 배우기/· CSS] - 제목 줄(border)에 삼각형(방향) 넣기 제목 줄(border)에 삼각형(방향) 넣기 이렇게 제목줄에 삼각형 방향을 넣는 방법이다. • transparent : 색 투명을 이용해서 만들었다. 태그는 복잡해 보이는데 'border 대각선 개념'을 이해하면 아주 쉽다. css에서 h3로 지정하면 모든 h3에 nilgi.tistory.com 2021. 9. 17.
animation 속기 See the Pen animation 속기 by nilgi (@nilgi) on CodePen. animation-name: 이름; animation-duration: 시간(s); animation-timing-function: 속도; animation-delay: 지연시간(s); animation-iteration-count: 반복; animation-direction: 방향; animation: 이름 시간 속도 지연 반복 방향; 2021. 9. 14.
animation-fill-mode 키프레임 지정 See the Pen animation-fill-mode by nilgi (@nilgi) on CodePen. animation-fill-mode: forwards; // 마지막 키프레임을 유지하고 마친다. animation-fill-mode: backwards; // 지연시간동안 첫번째 키프레임을 보여준다. animation-fill-mode: both; // 시작은 첫번째 키프레임, 끝은 마지막 키프레임을 적용하고 유지한다. 2021. 9. 14.
animation- timing-function 애니메이션 속도 See the Pen animation-timing-function by nilgi (@nilgi) on CodePen. animation-timing-function: linear; // 같은 속도 animation-timing-function: ease; // 느림 - 빠름 - 느림 (기본값) animation-timing-function: ease-in; // 느리게 시작 animation-timing-function: ease-out; // 느리게 끝내기 animation-timing-function: ease-in-out; // 느리게 시작 느리게 끝내기, ease 처럼 중간에 빠름 없음. 2021. 9. 10.

티스토리툴바