꾸생의 DevLog

반응형 웹사이트를 위한 CSS 미디어 쿼리 분기점

1. 데스크탑(DeskTop) @media screen and(min-width: 1024px){ ... } 2. 테블릿(Tablet) @media screen and(min-width: 767px) and (max-width: 1023px){ ... } 3. 모바일 @media screen and(min-width: 767px) { ... }

2022.09.27   5

[CSS] 움직이는 고양이 만들기

안녕하세요. 꾸생입니다. 요즘 티스토리 스킨을 다시 만들고 있는데요. 인파님의 티스토리 스킨을 보며 분발하고 있습니다. 인파님처럼 화려하게 꾸미지는 못하지만 꾸안꾸 느낌으로 소소하게 재밌는 디자인을 넣고 있는데요. 비교적 간단하게 귀여운 고양이를 만들어보려 합니다. 사실 검색으로 들어오셨다면 본인이 찾던 그 고양이가 아닐 수 있습니다. 아무튼 제가 자주 애용하는 Boxicons라는 오픈소스 아이콘 라이브러리가 있습니다. CDN이나 npm 라이브러리 설치로 간단하게 사용할 수 있는데요. 대략 1000개 이상의 아이콘들이 준비되어 있어 원하는 아이콘을 검색해 사용하실 수 있습니다. 아래 링크로 접속해 확인해보세요. Boxicons : Premium web friendly icons for free Boxic..

2022.05.28  

[CSS] background-image 프린트 할 때 안 보이는 현상

background-image 프린트 할 때 안 보이는 현상 background-image 속성으로 이미지를 표시해놨고 프린트할 때 미리보기에서는 해당 이미지가 안보이며, 프린트 출력에도 나오지 않는 현상이 있었다. 이유는 이랬다. 브라우저에서 기본적으로 배경색과 이미지를 인쇄하는 옵션이 꺼져있으며, 이것을 우회하기 위해서 아래 CSS 코드를 적용하면 간단하게 해결 할 수 있다. * { -webkit-print-color-adjust: exact !important; /* Chrome, Safari, Edge */ color-adjust: exact !important; /*Firefox*/ } 출처 How can I force browsers to print background images in CSS..

2022.05.25  

[CSS] px | em | rem 단위

px | em | rem 단위 CSS에서는 요소의 크기를 지정할 때, px, em, rem 단위를 주로 사용하는데요. 이 외에도 %와 vw, vh가 있지만 비교적 간단하므로 오늘은 px, em, rem 3가지에 대해서 포스팅 해보려 합니다. 아래 설명드린 px 단위와 em을 이해한다면 rem 단위는 자연스럽게 이해될 것 입니다. 절대적 단위 px(픽셀) px 단위는 주변에 어떠한 상관관계 없이 지정한 값만큼 크기가 고정되어 표시됩니다. 어떠한 기기에서든 같은 크기로 보이는 단위이므로 고정된 크기의 값을 표현할 때 사용하면 적합한 단위입니다. 모바일 기기에서 보든 영화 스크린에서 보든 똑같은 크기로 보입니다. 상대적 단위 : em, rem 상대적 단위인 em, rem은 기준으로 하는 대상이 다릅니다. em..

2022.01.14  

[CSS] 가로 스크롤 구현하기

가로 스크롤 구현하기 모바일 환경에서 가로 형태의 스크롤을 구현해야 했는데, 보통 세로 방향의 스크롤이 기본적이기 때문에 가로 형태의 스크롤을 구현할 때는 overflow-x 속성을 auto로 만 적용하면 될 줄 알았지만 비교적 잘 안됐다. 아래의 이미지처럼 카테고리를 나열했을 때, 데스크톱에서는 width의 길이가 충분하기 때문에 별다른 조치가 필요 없지만 모바일의 경우 width 길이가 좁기 때문에 높이를 늘리지 않고 가로 형태의 스크롤바의 행태로 구현해야 했다. 세로 스크롤은 간단하게 HTML 부모 태그에 overflow 속성에서 auto나 hidden을 적용하면 간단하게 세로 스크롤을 구현할 수 있다. 하지만 가로 스크롤의 경우 하나의 CSS 속성이 더 필요했다. 가로 스크롤 예시 See the ..

2021.09.05  

CSS 전처리 도구 SASS 요약

Sass를 사용해야할 일이 생길것 같아 미리 공부해보려고 글을 작성해봅니다. Sass는 CSS 전처리기로 SCSS, Less, Stylus 등이 더 존재합니다. 이 CSS 전처리기들은 기존의 CSS 보다 더 나은 가독성과 유지보수를 편리하게 만들어주는 도구로 생각하면 좋습니다. 기존의 CSS는 중복될 수 있는 코드 작성이 가능하기 때문에 유지보수의 불편함이 생길 수 있습니다. 그러므로 이런 부분들을 해소시켜주는 SASS와 SCSS를 사용하면 좋습니다. 그리고 마지막에는 전처리 도구로 작성한 코드들은 CSS파일로 변환해서 사용하게 됩니다. CSS .wrap{ width: 200px; height: 200px; } .wrap .inner{ color: #fff; border: 1px solid #000; }..

2021.08.25  

[CSS] 글자 뒷 배경 비치게 만들기

CSS 텍스트 뒷 배경 비치게 만들기 See the Pen by junheeleeme (@junheeleeme) on CodePen. .bg{ ... background-clip: text; -webkit-background-clip: text; ... } 중요하게 봐야할 속성은 위 두개입니다. background-clip: text만 주면 효과가 적용되지 않습니다. 아래 -webki-background-clip도 적용시켜주어야 합니다. -webki-background-clip만 적용시킨 효과는 적용되나 아래 CSS에서 경고 메세지가 뜹니다. background-image를 이용해서 gif 사진을 적절히 사용한다면 인터렉티브한 텍스트를 만들 수 있습니다.

2021.08.04  

[HTML] 시멘틱 마크업(Semantic Markup)

시멘틱 마크업이란? 시멘틱 마크업(Semantic Markup)은 적절한 위치에 올바른 HTML 태그를 사용하는 것을 말한다. 여러 종류의 HTML 태그들이 있지만 각각의 사용 목적과 의미가 담겨있다. 간단하게 말해 태그와 태그를 알고 있다면 이해하기 쉬울 것이다. 나는 HTML을 주먹구구식으로 배웠지만, 애드센스 블로그와 워드프레스 블로그를 운영하면서 검색엔진 최적화(SEO : Search Engine Optimization에 대해 공부하게 되었고 시멘틱 마크업을 알게 되었다. 단순하게 SEO는 포털사이트 검색 결과 상위에 자신의 웹 문서를 노출시키기 위한 작업이다. 요즘같이 광고/홍보가 예민하게 받아들여지는 시기에는 필수인 작업이다. 구글, 빙, 네이버 등 검색엔진이 인터넷에 연결된 HTML 문서를 ..

2021.07.10