CSS
-
CSS Combinators(결합자) :: 마이구미HTML, CSS 2019. 4. 4. 20:02
이 글은 CSS 의 결합자(Combinators) 에 대해 다룬다. 각 결합자를 단순한 예제가 아닌, 실제로 많이 사용하고, 활용할 수 있는 예제를 통해 진행한다. 본인은 부끄럽게도 최근 들어서야, 모든 결합자를 사용하고 있다. 혹시나 특정 몇개만 사용하거나, 각 용도를 구분해서 사용하지 않고 있다면, 도움이 될 것이다. 우선 결론적으로, 이 글을 작성하게 된 이유는 인접 형제 결합자와 일반 형제 결합자 때문이다. CSS 구문에 있어, 크게 선택자와 결합자로 분류할 수 있다. CSS 선택자는 스타일을 적용시키기 위한 HTML 요소를 선택할 수 있다. h1 {...} #app {...} .container {...} input[type="text"] {...} 위와 같은 정해진 규칙(선택자)을 통해 우리는..
-
translate() vs positioning 비교 :: 마이구미HTML, CSS 2017. 10. 24. 21:06
이 글은 css의 translate()와 top/left 와 같은 positioning을 비교한다. 지금까지 요소를 이동시킬 때, 두가지 방식을 활용하고 있다. 두가지 방식은 성격자체가 다르기 때문에, 차이점을 분명히 인지해야한다. 결론부터 말하고자 한다면, 이동에 있어서는, translate()를 사용하는 것이 효율적이다. 참고한 글을 통해 예제를 확인할 수 있다. Why moving elements with translate is better than position abs top/left? transform 속성의 경우에는 좌표 공간을 변형하여 다른 요소에 영향을 미치지 않고 위치를 변경하는 것이고, position의 경우에는 말 그대로, 위치시킨다는 의미로 생각하면 된다. 차이점은 다음 그림을 통..
-
이미지 롤링 [transition] :: 마이구미HTML, CSS 2016. 8. 1. 16:05
이번 글은 css를 통해 이미지 롤링을 만들어 볼 것이다. 이미지 롤링이란... 본인은 이런 명칭을 사용하고 있는지는 몰랐다. 예를 들어 어느 홈페이지에서 이미지에 마우스를 올렸을 때 다른 이미지로 바뀌는 현상이다. 샘플 페이지 페이지 소스 까서 복붙해서 실습해보면 더더욱 이해하기에 좋다. 페이지 소스보기를 통해 소스를 봤다면, 정말 소스가 간단한 걸 봤을 것이다. css의 transition를 이용하면 해결된다. 일단 html 소스를 보자. span 태그안에 img 태그가 있다. 여기서 기억할 것은, 처음 로딩될 때의 이미지는 img 태그이고, 마우스를 올렸을 때는 span의 background 이미지를 통해 보여지게 된다. 자 기억했다면, css 소스를 보자. /*처음 로딩시*/ .dissolve {..