HTML, CSS
-
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의 경우에는 말 그대로, 위치시킨다는 의미로 생각하면 된다. 차이점은 다음 그림을 통..
-
Flexbox 기본 다지기 :: 마이구미HTML, CSS 2017. 10. 23. 20:41
이 글은 flex 레이아웃에 대한 기본적인 이해를 도와줄 것이다. 글에서 다루는 것들만 이해해도 많은 이점을 얻게 된다. 예제는 하단 또는 다음 링크를 참고바란다.flex-direction 의 값을 사용한다면, 주축과 교차축을 바뀐다는 것을 인지하고 있어야한다.또한, flexBox 를 다룰 때에는 관련된 속성들의 디폴트 값을 이해할 필요가 있다. Flexbox 기본 - https://codepen.io/mygumi/pen/vewOoY Flexbox 응용 - https://codepen.io/mygumi/pen/ZMGaPm 다음 글 Flex 기본 2(flex-wrap, flex) - https://mygumi.tistory.com/344 Flexbox 란 무엇인가? Flexible boxes 또는 flex..
-
font-weight 제대로 알고가기 :: 마이구미HTML, CSS 2017. 8. 29. 00:58
이 글은 font-weight 속성에 대해 다뤄본다.웹폰트를 사용하는 과정을 통해 font-weight 속성에 대해 설명한다.웹폰트를 사용하기 위한 기본적인 @font-face와 같은 속성을 이해하고 오면 좋다. font-weight는 무엇인가?공식 문서를 보거나, 단순히 짐작으로도 알 수 있을 것이다.다음과 같다. The font-weight CSS property specifies the weight (or boldness) of the font. => 폰트의 가중치나 굵기를 명시한다. 본인 또한 단순히 짐작만으로 판단하여 굵기라고 판단하면서 필요할 때 사용했다.하지만 웹폰트를 사용하는 과정에서 무식이 들어났다. 웹폰트를 사용하기 위한 기본적인 코드는 다음과 같다. @font-face { font-f..
-
생략 부호(ellipsis) CSS 적용 :: 마이구미HTML, CSS 2017. 7. 19. 19:32
이번 글은 CSS를 통해 생략 부호에 대한 적용법을 다뤄본다.생략 부호는 텍스트가 노출 범위를 넘었을 때, 일반적으로 이용한다.예를 들면, 아래와 같은 경우가 된다. 위에서 보이는 "..." 이 생략 부호가 된다.대부분 생략 부호를 사용할 때는, 라인 수를 정하고 싶은 경우가 있다.텍스트의 길이에 상관없이, 노출 영역에 있어, "2줄 이상이면, 생략부호, 3줄 이상이면 생략부호" 이런 식으로 말이다.이러한 생략 부호를 구현 할 수 있는 방법은 크게 2가지가 된다.text-overflow: ellipsis가상클래스 before, after 위 2가지 방식을 활용해보자. 1. text-overflow width: 300px; display: -webkit-box; -webkit-line-clamp: 2; /..
-
레아이웃 팝업창 투명도 조절 :: 마이구미HTML, CSS 2017. 1. 5. 21:40
이번 글은 레이아웃 팝업창에 대해서 다뤄본다.팝업창은 누구나 보았거나 개발해봤으리라 생각한다. 팝업창은 크게 2가지로 나눌 수 있다.1. window.open을 사용해 새창으로 팝업창을 띄우기2. 새창을 띄우지 않고 레이아웃 형식으로 팝업창 띄우기 이번 글은 레이아웃 형식의 팝업창에 대해 다룰 것이다.레이아웃 팝업을 사용한다면 거의 투명도 조절을 하리라본다. 위처럼 팝업을 띄우고 팝업 주변은 불투명하게 보여지는 것을 볼 수 있다.레이아웃 팝업은 이런 식으로 많이 활용하고 있다. 구현에 있어서는 어렵지 않다.css를 통해 opacity 속성을 통해 투명도를 조절해주면 된다.#popup { opacity : 0.5; } // 0~1 낮아질수록 투명예를 들어 html로 레이아웃 팝업을 위해서는 아래와 같이 구..
-
워드프레스 Fontello 아이콘 추가 :: 마이구미HTML, CSS 2016. 11. 30. 21:32
이번 글은 웹 폰트 이라는 주제이다. 사실 Font Awesome, Entypo, Fontello 등등 많다. 일단 대중화되어 알고 있는 Font Awesome 용어로 통일화하겠다. 들어본 적이 있는가? 일단 확률이 높지 않은 예이지만 한번 들어보겠다. 혹시 사이트 이미지가 궁금해 소스를 깠는데 까도까도 이미지 경로가 보이지 않은 적이 있는가? 혹시 위와 같은 경우를 겪은 적이 있는가? 이미지의 css가 content: '\e893' 이라고 설정되어있다. 이것을 없애면 이미지가 없어질 것이다. 궁금하다면 아래의 링크를 통해 한번 해보아라. http://erunspace.com/ Font Awesome이란 무엇인지 한번 살펴보자. 간단히 Font Awesome의 정의는 아래와 같다.Font Awesome ..
-
일정시간 팝업 노출 간단히 구현해보자 :: 마이구미HTML, CSS 2016. 11. 22. 19:41
이번 글은 "일정시간 팝업 노출" 에 대해 다뤄본다. 일단 주제를 자세히 알기 위해 아래 링크를 방문해보자. https://www.agoda.com/ko-kr/city/fukuoka-jp.html http://gostaygolf.com/goods/view.html?pid=67 아래 이미지 보자. 위 링크와 같이 자동으로 팝업이 나왔다가 사라지는 경우를 많이 볼 수 있다. 사실상 크게 어려운 작업이 없다. 하지만 수요가 많기에 개발능력이 미숙한 사람들이 많이 찾아올 꺼 같아서 글을 쓴다. 쉽지만 누구나 히스토리에 남길만한 주제로 괜찮다고 생각했다. 본인이 간단하게 작성한 테스트 페이지이다. 테스트 페이지 여기서 핵심적인 것은 position:fixed 속성이다. css의 position을 사용할 때는 거의..
-
웹 접근성 API 보조공학과 상호작용 :: 마이구미HTML, CSS 2016. 8. 21. 18:33
이번 글은 어떻게 보조공학(스크린 리더) 자체가 사용자에게 어떻게 정보 전달의 원리를 볼 것이다. 조금 기술적으로 말해보자면, 웹 콘텐츠의 내부에서 일어나는 일과 보조공학(AT) 상호작용의 기본 원리를 본다. 기본적으로 알고 가야할 것들을 먼저 보자. API(Application Programming interface)란 무엇일까? 많이 들어봤을 것이다. 하지만 API가 뭐냐? 물으면 바로 말할 수 없는 사람들이 많다. 이번 계기로 확실히 알고 가보자. API에 대한 정의로는, 어떤 언어로 프로그래밍하는 데 필요한 코드나 함수, 혹은 용어를 제공하는 프레임워크나 규칙. 이번 주제에 관한 정의로 본다면, 브라우저나 보조공학 같은 소프트웨어에게 어떤 작업을 하라고 명령할 때 사용하는 코드 라이브러리. 예를 ..