첫 번째가 display: inline-block 두 번째가 float:left 속성을 넣은 것이다. 1. display: inline-block - 각 div에 기본적으로 마진값이 들어가있다. - block 요소때문에 빈 공간이 있어도 다음 줄로 넘어간다. 2. float: left - 각 div가 마진값이 없이 붙어있다. - float의 속성으로 height 값이 없어져 inline 요소처럼 보여진다.

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. - 기본값 : content-box - 상속 : No - 애니메이션 : No - 버전 : CSS Level 3 속성으로는 box-sizing: content-box l border-box l initial l inherit 이 있습니다. 1. content-box box모델의 기본값으로 width, height 값 + padding, border 값을 추가로 더해야 진짜 width, height 값이 된다. 컨텐츠 역역을 기준으로 크기를 정합니다. 2. border-box width, height 값 안에 padding, border 값도 포함되어있다. 테두리를 기준으로 크기를 정합니다. 3. initial 기본값으로 ..

Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다. 주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다. ------------------------------------------------------------------------------------------------- Flex Container 1. display display: flex(Block 특성), display: inlin..

웹표준 웹표준을 잘지킨다 = W3C의 권고를 따라 HTML,CSS,JS, DOM(문서 객체 모델)을 원칙에 따라 구조화를 잘 시킨 것을 말합니다. 1. 데이터와 디자인의 분리 태그가 아닌 css를 이용하여 스타일을 정한다. 2. absolute보단 relative font-size를 쓸 때 px,pt보단 em,rem을 써서 responsive한 디자인을 신경쓴다. 3. 구조화를 하자 구조화가 잘 된 문서는 렌더링도 빨리 된다. HTML 구성요소들을 잘 활용해서 태그들을 사용하자. 제목: h1, h2, h3 문단: p 목록: ul, ol, dl 4. 크로스 브라우징 우리의 앱은 모든 브라우저에서도 똑같은 화면이 나타나야 합니다. 이를 크로스 브라우징이라고 한다. 각기 다른 브라우저는 엔진또한 모두 다릅니다..

BEM(Block Element Modifier)은 크게 Block으로 영역을 짓고, Element로 지정하며, Modifier로 상태를 표시합니다. 즉, __를 쓰는 경우와 --를 쓰는 경우를 분리한 것인데, __는 명사와 같은 이름을 사용합니다. (__button, __title, __meun 등) --는 동사와 같은 상태를 이름으로 사용합니다.(--active, --disabled, --full 등) 예를 들면, BUTTON BUTTON 라는 식으로 코드를 작성하는 경우입니다. 공통 요소에 BEM 방식을 적용하는 것은 옳지 않을수도 있습니다. 또, 모든 요소에 BEM 방식을 적용하기에 어려운 점도 많습니다. header, nav, footer 등 구역을 지칭하는 것들은 보통 일반적인 위치에 존재하기..

/* 부모 요소가 position:relative를 가지고 있다는 전체하에 작성*/ 1. position: absolute; 50%로 밀고 px로 당기기 * 가운데 정렬시키고 싶은 대상을 왼쪽,위로부터 50% 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법. -장점 : 막힘없는 하위 버전 호환 -단점 : 대상의 width, height 값이 유동적이지 않다.(px로 고정 후 반 길이만큼 당겨주어야 하기 떄문에) 2. position: absolute; 50%로 밀고 translate로 당기기 * 1번과 마찬가지로 50% 위치로 밀어낸 후 대상의 크기 절반 값만큼 당기는 방법 -장점 : width, height 값이 고정되지 않아도 사용 가능하다. -단점 : transform의 크로스 브라우징이 안..