한 걸음/HTML & CSS
기본 구조
import { keyframes } from 'styled-components'; export const Bounce = keyframes` from {transform: translateY(0px);} to{transform: translateY(-15px);} `; export const LittleBounce = keyframes` from {transform: translateY(0px);} to{transform: translateY(-4px);} `; export const Opacity = keyframes` from {opacity: 0;} to {opacity: 1;} `; export const FromLeft = keyframes` from {transform: translateX(..
미디어쿼리 범용적인 사이즈 기준점(break point) 스마트폰 320~767 / 태블릿 768~1023 / 데스크탑 1024~ Min-width와 Max-width (맨날헷갈림...) (Max-width : 768px) = “최대너비768일 때까지 아래 내용을 적용해라” (Min-width : 481px) = “최소너비 481부터 아래 내용을 적용해라” 작은 화면에서 큰 화면으로 조절해 나갈때는 min-width 큰 화면에서 작은 화면으로 조절해 나갈때는 max-width를 사용 모바일퍼스트(mobile first) 기법이란? 처음 웹 어플리케이션을 구축하는 단계에서부터 모바일 중심으로 구축하는 것을 의미 *데스크톱이나 타 기기를 위해서는 그에 맞는 반응형/적응형 웹을 제공 불필요한 요소를 최소화 시..
유동형 그리드 콘텐츠의 폭을 %로 지정 (기기 가로사이즈에 따라 컬럼의 크기가 상대적으로 변화) 유동형 레이아웃 기기 사이즈에 따라 특정 부분이 사라지거나 합쳐지며 구조를 변경하는 기법 다양한 패턴이 존재한다. (Mostly fluid, Column drop, Layout shifter, Tiny tweaks, Off canvas...) 1) Mostly fluid - 주로 유동형그리드로 구성됨 - 대형 및 중형에서 동일한 크기 유지하되, 모바일에서는 수직으로 쌓으며 콘텐츠 재배치 2) Column drop 가로 사이즈가 좁아짐에 따라 콘텐츠들을 수직으로 쌓아나가는 기법 3) Layout shifter - 여러 화면 너비에 여러 개의 break point가 존재 - 반응성이 가장 뛰어나지만 유지 관리하기..
반응형 웹이란? 웹 디자인 기법으로, 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹 - 넓은 의미 다양한 디바이스에 대응하여 최소한의 변화로 내용 탐색을 쉽게 하여, 사이트를 최적의 형태로 제공 - 좁은 의미 CSS3 Media Queries, Fluid/Hybrid Grid Layout, Flexible Media Content 등을 사용하여 구현한 웹사이트 반응형 웹의 특징 + 장점 1. 하나의 코드 하나의 콘텐츠에 오직 하나의 HTML 소스만 존재해야 한다 2. 하나의 URL 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않는다. (예: m.naver.com는 독립적인 템플릿이 존재하는 ‘적응형 웹’) ..
요소 안의 내용 줄바꿈 금지하기 아래 캡쳐의 '제출하기' 버튼과 같이, 형제요소의 길이가 길어지는 것에 따라 원치 않게 줄바꿈이 일어나는 경우가 있다. 줄바꿈을 원치 않는 요소 안에 white-space: nowrap 속성을 주어 줄바꿈을 방지할 수 있다. button { white-space: nowrap; } 요소를 삐져나오는 텍스트 말줄임표 처리 긴 텍스트를 세로길이가 1rem으로 제한된 div 안에 우겨넣으려고하면 아래와 같이 삐져나옴 현상이 발생한다. 1) white-space: nowrap 속성을 이용해 세 줄짜리를 한 줄로 만들어준다. 2) overflow: hidden 속성을 이용해 삐져나온 부분을 보이지 않도록 숨김 처리한다. 3) text-overflow: ellipsis 속성을 이용해..
grid-template-columns를 사용해서 데이터들을 순서대로 편하게+예쁘게 얹어줬는데, 오른쪽 줄의 시작부분만 조금 밀어서 지그재그처럼 보이게 해달라는 요청이 있었다. const Grid = styled.div` display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; margin-top: 2rem; // 짝수번째 태그에 top: 2rem을 줌 a:nth-of-type(even) { position: relative; top: 2rem; } `; 결과
1 2 3 4 one two 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .parent{ display:flex; width:500px; height:50px; border:1px solid black; align-items: center; background-color:yellowgreen; } .left, .right{ background-color:yellow; margin: 0 1rem; } .right{ margin-left:auto; } margin-left : auto; 를 써주면 오른쪽 정렬된다. *결과물 https://codepen.io/dayoung0510/pen/wvarpav flex 안 자식요소들 좌측/우측 정렬 ... codepen.io
[설명] 스크롤은 그 자리에 그대로 있으나, 마우스오버 할 때만 영역(배경색과 같은 컬러)을 지워줌으로써 스크롤이 뿅 나타난 것처럼 보이는... 눈 속임(?) 1. 스크롤 가리는 영역을 absolute로 위치 지정해줌 (가림영역이라고 칭하겠음) 2. 가림영역을 background-color와 같은 색으로 깔아줌 3. CSS에서 :hover 했을 때 가림영역 투명도를 100%로 설정해준다. https://codepen.io/dayoung0510/pen/bGdRqOa auto scroll ... codepen.io
