반응형 1. 미디어쿼리 (css) @media 기기타입 and (min-width:#) and (max-width:#){} 2. 메타태그 (html) 반응형 디자인 패턴 유동형 (mostly fluid) :googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/mostly-fluid.html 열 끌어놓기(column drop) googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/column-drop.html 레이아웃 시프터(layout shifter) googlesamples.github.io/web-fundamentals/fund..

FLEX 1. 부모요소에 주는 태그 display: flex / inline-flex flex-direction flex-wrap: 줄넘김 설정 justify-content 가로 정렬 align-item 세로 정렬 2. 자식요소에 주는 태그 order: z-index와 같은 방식, 미설정 시 최상위 http://css3generator.com/ CSS3Generator by @RandyJensen Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown print..

transform rotate 3D 주사위 만들기 실습 .wrap{ width:200px; height:200px; position: relative; font-size:100px; text-align: center; line-height: 200px; color:white; margin:100px auto; transform-style: preserve-3d; transform:rotate3d(1,1,0,0deg); transition:3s; } .wrap:hover{ transform:rotate3d(1,1,0,360deg) } .wrap>div{ width:200px; height:200px; position: absolute; } .box1{ background-color:rgb(218, 112,..

multi column column-count 단 갯수 column-gap 단 간격 column-rule 구분선 table border-collapse:collapse; 테두리 합치기 transition transition-duration transition-property: 위치, 크기, margin/padding, border, color/background, opacity, transform transition-delay transition-timing-function: ease(default), cubic-beizier cubic-beizer https://cubic-bezier.com/ cubic-bezier.com cubic-bezier.com transform :translate() px, ..

종합적 주의점 html 마크업 시 1200px이상 사진 x 섹션 태그 사용(title 필수) / div.container가 자식으로. Width 지정된 박스 중앙으로 ➡️ margin: 0 auto; 화면 너비 100%가 아닌 경우 div.center 잊지말 것 (.inner라고 생각할 것) 문단 간 여백은 Margin-bottom 기본 z-index 마이너스값은 body 밑으로 들어감 FLOAT 주의점 Float :레이아웃의 기본, float은 자식이 아닌 형제에게. Float 세로 정렬 불가능 width 필수 : 너비 고정해야 하는 요소에 사용 POSITION 주의점 Position 상하좌우 좌표 지정 필수 Position:relative; 단독 사용할 경우: 원래 배치 영역을 기준/ float 동시..

text-align:justify 아시아 문자의 경우 가끔 justify가 먹히지 않는 경우가 있다고 한다. 아래 참조할 것 .rightBottom .footMenu{ text-align: justify; } .footMenu>li{ display: inline-block; } .footMenu:after { content:""; display:inline-block; width:100%; } font-face - ttf : - woff : 모든 브라우저 전부 지원, 익스하위에서 지원안됨 - eot : 익스 하위에서 지원 @font-face { font-family: 'NanumBarunGothic'; src: url('NanumBarunGothic.eot'); src: url('NanumBarunGot..