Flex box의 규칙 1. 자식이 아닌 부모 elements에 "display: flex"를 명령해야한다. div태그가 있는 부모 태그가 body이면, body의 속성을 display: flex로 하면 된다. 그렇게 명령을 내려야 body가 flex 컨테이너가 된다. 그런데 div안에 또 다른 컨텐츠가 있다면 이번에는 div가 부모가 되어 flex 컨테이너가 될 수 있다. 그런데 변경하고 싶은 컨텐츠의 직속(?) 부모가 flex여야 가능하다. 부모의 부모가 flex여봤자 의미가 없다. 2. flex 컨테이너는 주축과 교차축이라는 두가지 축으로 움직인다. 주축(main axis)은 수평으로 디폴트가 설정되어 있고, 교차축(cross axis)은 수직으로 설정되어 있다. display: flex를 설정한 ..

id는 각 요소(태그)에 대해 유일한 식별자(unique identifier)이다. 무조건 하나의 요소에 하나의 id만이 쓸 수 있다. 주민등록번호처럼 말이다. 그런데 이 경우 중복이 안되다 보니 똑같은 속성을 부여해야할 때 코드가 길어질 수 있다. 이때 쓰는 것이 class이다. 하나의 요소에 대해서 여러개의 class를 가져도 상관없고, 여러개의 요소가 하나의 class를 공유해도 상관없다. 그래서 대부분 class의 사용빈도가 높고, 특정 요소만 지정하고 싶을 때만 id를 쓴다고 생각하면된다. class를 활용해서 보다 효율적으로 코드를 만들어봐야겠다.

margin : 컨텐츠의 border로부터 바깥에 있는 공간 margin 값을 줄 때는 top, botton, left, right를 각각 따로 설정할 수 있지만, 간편히 할 때에는 두개의 값을 넣고 상하 / 좌우로 줄 수 있고, 네 개의 값을 넣고 시계방향으로 상, 우, 하, 좌의 값을 줄 수 있다. body { margin: 20px 30px; } body { margin: 20px 30px 10px 15px; } padding : border로부터 안쪽의 공간 border : margin과 padding의 경계, inline도 border를 가질 수 있다. margin-collapsing : 컨텐츠가 여백과 만나게 되면서, 각각의 마진이 합쳐지고, 이 마진이 body의 마진에도 통합되어 영향을 미치..

block과 inline은 각자 같은 줄에 다른 컨텐츠를 놓을 수 있냐 없냐에 따라 달라진다. block은 놓을 수 없고, inline은 놓을 수 있는데 만약 block 속성을 가진 태그를 inline으로 바꾸고 싶다면 display 속성을 사용하면 된다. 위와 같이 대표적인 inline 태그인 span의 경우도, display 속성을 block으로 하면 block으로 바뀌게 된다. 반대로 div 태그도 display 속성을 inline으로 하면 inline으로 바뀌게 된다. block과 달리 inline은 그 자체로는 높이와 너비를 가질 수 없다. 그래서 내용물을 적지 않으면 block과 달리 아무것도 나타나지 않는다. inline은 block과 달리 box가 아니기 때문이다. 대표적인 inline은 ..