'flex를 해보자!' 라고 생각만했었는데 드디어 올린다😓 이론을 좀 배워보니 헷갈리는게 많다.. 이론 후에 응용을 꼭 해보고 이해를 하자✊ 브라우저 호환 Can I use flexible Box ? Flexible Box를 쓰는 이유 대부분 사이트는 레이아웃이 수직 구성이며 '위-아래'로 스크롤 하여 사용한다. 레이아웃을 구성할 때 가장 많이 사용하는 요소들이 기본적으로 블록(block) 개념으로 표시(display)되며 이는 뷰(view)에 수직(위에서 아래)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽다. 하지만, 수평구조를 만드는 속성이 명확하지 않아 이나 float , inline-block 을 통해 만든다. 그러나 이러한 방법들은 다양한 문졔(clear, white space 등, 해결 가능하..

CSS 방법론(BEM/OOCSS/SMACSS) CSS 설계의 중요성 코드의 재사용성을 위해 쉽게 유지보수 하기 위해 확장을 가능하게 하기 위해 클래스명으로도 무슨 의미인지 예측 가능하도록 하기 위해 BEM (Block Element Modifier) Block, Element, Modifier 로 나누어 컴포넌트 기반의 웹 개발 접근법 중 하나. 유저 인터페이스를 독립된 여러 개의 블록으로 분리하자는 것이 목표 복잡한 UI를 가진 페이지의 인터페이스 개발 환경을 쉽고 빠르게 하며, 코드의 재활용을 높일 수 있다. 클래스명이 용도, 형태를 의미하므로 직관적이나 길고 복잡해지는 것이 단점. 1) Block 재사용 가능한 컴포넌트. (코드의 구조적 덩어리) 클래스명은 하나의 단어 사용, 길어질 경우 단일 하이..

[CSS] padding position 영역 조건 parent 요소에 padding을 주고 relative 해준다. child는 absolute 일 때, 위치를 어떻게 잡아줄까? .parent { width: 200px; height: 200px; border: 1px solid #000; position: relative; padding: 20px; box-sizing: border-box; } .child { position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: red; } parent의 padding을 무시하고 child는 top: 0; left: 0; 방향에 있게 된다. 방법 .wrap { width: 200px;..

[CSS] height: 100% / height: auto; height: 100%; 부모 컨테이너의 높이를 100% 로 설정한다. (부모높이 영향) #innerDiv 는 height: 50px height: auto; 높이는 자식의 높이에 따라 달라진다. (자식높이 영향) #innerDiv는 height: 10px Reference https://stackoverflow.com/questions/15943009/difference-between-css-height-100-vs-height-auto

[CSS] opacity / visibility / display 차이점 요소를 표시할 수 있으나 공간을 차지하고 클릭을 함에 따라 다르다. property occupies space(공간 차지) consumes clicks(클릭 이벤트) opacity: 0 O O visibility: hidden O X display: none X X 클릭이벤트는 ondbclick, onmousedown, onmousemove 등과 같은 다른 포인터 이벤트도 사용한다. 본질적으로 visiblity: hidden은 opacity: 0와 pointer-events: none의 조합처럼 동작한다. 출처 :: visibility:hidden vs display:none vs opacity:0 display,visibility..

[CSS] responsiveFullScreen 이미지 넣기 img VS background-image script없이 HTML / CSS 만 사용!! #1. background-image * { margin: 0; padding: 0; } html, body { height: 100%; } .bg { background-image: url("https://www.w3schools.com/howto/img_girl.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; } #2. img 2-1) [예제1] html, body { margin: 0; height: 100%; }..

[CSS] @media query 미디어 쿼리, @media query 이해하기 미디어 쿼리는 단말기 유형(출력물 vs 화면)과, 어떤 특성이나 수치(화면 해상도, *뷰포트 너비 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 유용하다. *뷰포트(viewport) :: 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역. 웹브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(전체화면이라면 화면전체)을 말한다. 뷰포트 중에서도 지금 볼 수 있는 부분을 시각적뷰포트(visual viewport)라고 부른다. 스마트폰에서 사용자가 화면을 확대했을 때와 같은 특정 상황에서 레이아웃 뷰포트의 크기는 변하지 않지만 시각적 뷰포트는 더 작아진다. 1. 미디어쿼리 사용법 1-1) CSS 코드 내부에서 분기하는 방..

[CSS] transition, transition-delay, transform, calc vendor prefix #1. transition / transition-delay vendor prefix transition 은 IE10부터 지원한다. vendor prefixes -webkit-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; -moz-transition : [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; -o-transition : [..