eunyo의 it이야기

웹퍼블리싱 작업을 하다 보면, 특히 반응형이나 모바일 환경에서 table, 표의 양의 방대하다보면 모바일 환경에서 많이 깨져서 보입니다 ,, 반응형 웹에서 테이블이 구조가 바뀌는 소스도 있겠지만, 가장 기본적인 디바이스 크기가 넘어가면 스크롤로 데이터를 볼 수 있게 해주는 css를 소개해드리겠습니다. See the Pen rNBZzxz by aldo814 (@aldo814) on CodePen. table을 div로 감싸 준 뒤 , div에 해당 width값을 주어 해당 영역을 넘어가면 스크롤이 생기도록 처리해줍니다. 그다음에 overflow 속성을 사용하여 스크롤 여부 속성을 주면 해당 영역이 넘어가게 되면 스크롤 처리가 됩니다. overflow 속성에는 , overflow:auto : 해당 범위를 벗..

안녕하세요. 오늘은 간단하게 css로 삼각형 도형을 그리는 방법을 알려드리겠습니다. 기본적으로 css3에서는 사각형, 원형만 가능하지만 border값을 이용하여 삼각형 도형도 그릴 수 있습니다! 잘 사용하진 않지만 알고 있으면 유용한 css입니다. See the Pen LYPJLQO by aldo814 (@aldo814) on CodePen. 삼각형의 가장 높은 부분 좌우측을 투명 처리하여 만드는 삼각형 css입니다! 삼각형의 모양을 바꾸고 싶다면 border의 height를 조절해주면 됩니다 ^^

웹페이지를 만들다 보면 , 다양한 폰트를 사용하게 되는데요. 그중에 구글 웹폰트를 사용하여 간단하게 웹폰트를 사용하는 방법을 알려 드릴게요! 구글 웹폰트 사용법 구글 웹폰트에 접속합니다. 검색창을 이용하여 폰트를 검색해볼 수 있고, Language를 선택하여 해당 언어만 확인이 가능합니다. 언어가 선택 된 화면입니다. 해당 폰트를 직접 타이핑하여 확인도 가능하고, 커스텀, 폰트 굵기, 폰트 크기도 확인이 가능합니다. :) 마음에 드는 폰트를 발견하셨다면, + 버튼을 클릭하여 줍니다. 그럼 화면이 이렇게 변하게 되는데요! 해당 구역을 클릭하게 되면 이런 화면이 나오는데요, @import를 눌러준 뒤 나오는 회색박스 첫 번째 @import ~ 영역은 css 첫 번째에 영역에 선언해주시면 되고, font-fa..