HTML-CSS/CSS (5) 썸네일형 리스트형 CSS Border Box box-sizing: border-box; 가령 CSS하다보면 이런 문제가 있습니다. div에 100px값을 줬다고 해봅시다. 그런데 이때 padding을 50px을 주면 전체 길이가 100px로 유지되는것이 아니라 padding값이 원래길이에 더해져서 늘어지기만 합니다. 이유는 div에 width값을 100을줬으면 CSS는 이를 유지하는방향으로 선택합니다. 그래서 div박스는 늘어나게 됩니다. 따라서 해결하기 위해서는 아래와 같은 코드를 삽입해줘야합니다. div { box-sizing: border-box; } 이렇게 되면 패딩 값이 늘어나도 전체 div박스의 크기는 유지가 됩니다. 즉 div에 width값을 줄때는 컨텐트의 width값이지만 box-sizing에게 border-box값을 주게 되면 w.. CSS Media Queries CSS Media Queries CSS로 스크린 화면을 인지하는 방법입니다. 가령 스마트폰으로 웹페이지를 본다면 landscape모드 와 portrait모드를 사용할 것입니다. 컴퓨터 스크린으로 볼때는 스마트폰 스크린보다는 크겠죠? 따라서 브라우저에게 말해주는겁니다. 핸드폰이면 이걸 보여주고 컴퓨터면 이걸 보여달라는 식으 로 말입니다. @media screen을 사용해서 위 내용을 실행 시켜보면 스크린 사이즈를 800px보다 작게 한다면 div의 백그라운드 색이 파랑에서 빨강으로 바뀌게 됩니다. 만약 코드를 이렇게 쓴다면 갸령, @media screen and (min-width: 800px) and (max-width: 1000px){ div { background-color: red; } } 800p.. CSS Animation CSS Animation 앞에서 transition을 사용해서 CSS로 애니메이션 효과를 살펴보았습니다. 하지만 이는 state값이 바뀔때나 사용할 수 있기 때문에 가령 마우스커서를 이미지 위에 올리지 않고도 애니메이션 효과를 보고싶을 겁니다. 이를 위해서는 @keyframes를 사용할 필요가 있습니다. 원하는 애니메이션의 이름을 @keyframes 옆에 선언해주고 from to구문을 사용해주어야 합니다. 그리고 img에 animation: 사용자가지어낸이름 5s ease-in-out infinite;를 써주면 페이지가 로드되는 즉시 에니메이션이 실행 됩니다. infinite는 계속 무한이 애니메이션을 실행 시킵니다. 그런데 문제가 있습니다. 가령 아래 코드를 실행해보면 이미지가 뱅글뱅글 돌다가 마지막에.. CSS transform transform transform: rotateXYZ(앵글)을 주면 이미지를 원하는 축 만큼 돌려줍니다. 크기를 늘이거나 줄일 수 도 있습니다. "scaleX(몇배)" 처럼 쓴다면 x축을 "몇" 배 증가시킵니다. translateXYZ(픽셀값)을 주면 원하는 방향으로 이미지를 이리저리 움직일 수도 있습니다. 하지만 sibling 관계는 움직이지 않습니다. 가령 예를들면, hahahahaha 라 합시다. 바디에 스팬으로 hahahaha라는 텍스트가 써져있습니다. 그런데 옆에 이미지가 100px x축으로 오른쪽으로 움직였다고 해서 hahahah는 움직이지 않는다는 뜻입니다. transformation은 box element를 변형시키지 않습니다. margin, padding 이 적용되지 않습니다. 일종의 .. CSS transition CSS transition Go home transition을 주지 않으면 에니메이션이 없어서 이쁘지 않다. javascript를 사용해도 되지만 CSS에서 좋은 구문을 제공합니다. transition을 주는데 가령 anchor에게 주었습니다 a:hover는 앵커에 마우스커서를 호버링할때인데 이는 state값으로서 여기다가 transition을 주는 실수를 하지맙시다. 이유는 마우스 호버링이 끝나면 바로 바뀌어버리고 transition이 원활하게 끝맺지 못하기 때문입니다. transition은 우리가 알고있는 거의 모든 state에 반응합니다. 갸령 hover, active, focus, focus-within등에 작동합니다. Go home attribute value값으로 all 0.5 ease-in-.. 이전 1 다음
