Media Queries는 오직 CSS만을 이용해서 스크린의 사이즈에 따라 설정을 변경할 수 있는 방법이다. 반응형 웹사이트를 만들 수 있고, 스마트폰이나 태블릿이 세로모드인지 가로모드인지(landscape / portrait)에 따라 설정을 바꿀 수도 있다. 먼저 media queries를 { }로 열고, 그 안에 원하는 CSS를 넣어주면 된다. 또 media query는 "and"를 써서 연결된다. @media screen and (min-width: 601px) and (max-width: 1200px) { div { background-color: wheat; } } @media screen and (orientation: landscape) { span { display: none; } } 첫번..

Transition transition은 state에 따라 바뀌는 property를 갖고 있으면 사용된다. 변화하는 state에 애니메이션을 넣고 싶다면 사용한다. transition은 반드시 바뀌는 state가 아닌 원래의 상태(root)에 해당하는 것에 써야한다. 그래야 hover의 경우 마우스를 올려놨을 때, 뗐을 때 둘다 작동하게 된다. 그리고 변화하는 것을 처음에 뭐에서 뭐로 바뀌는지 정확히 쓸 것! transition에 여러개를 개별적으로 설정하고 싶다면 ,를 이용하면 된다. 전부다 똑같은 설정이면 all을 쓰면 된다. a { color: wheat; background-color: tomato; transition : color 5s easy-out, background-color 1s ea..

Position div에 position:fixed를 취하면 화면이 내려가도 화면상의 box의 위치는 바뀌지 않는다. 또한 fixed를 한 뒤에 top, bottom, left, right 중 어느 하나만 취해도 위에 붙어 있던 레이어는 신경도 안쓰고 위로 올라갈 수 있다. 즉 기존의 레이더가 무엇이건 다른 레이어 위에 위치할 수 있다. position : static은 디폴트 값으로 맨 처음 위치 그대로 유지하는 경우에 해당한다. position : relative는 원래의 위치에서 top, bottom, left, right 각각을 조금씩 움직이고 싶을 때 사용 ex. top : -10px left : -10px 이면 위로 10px만큼, 왼쪽으로 10px만큼 이동한다. position : absolu..

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은 ..