오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다. 👉 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다. html 태그에 뷰포트 태그를 선언해줍니다. width=device-width : 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 기본 사이즈를 1로 지정함. 👉 디바이스별 분기점 👉 반응형 분기점 1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px 2. 테블릿 가로 : 768px ~ 1023px 3. 모바일 가로, 태블릿 : 480px ~ 767px 4. 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-wid..

CSS transition 속성으로 엘레멘트의 위치, 크기, 컬러 등이 변경될 때 부드러운 전환 효과를 넣을 수 있다. 하지만 일반적인 백그라운드 컬러와 달리, linear-gradient 를 사용한 백그라운드 컬러에는 transition 속성값이 적용되지 않는다. 그래서 여기서 트릭을 사용해야 한다 - 부모 요소에 가상 요소인 ::before 혹은 ::after를 만든다. 변화 하고 싶은 색을 linear-gradient를 사용해 입력한다. transition의 time값을 지정한다. absolute을 사용해 부모 요소와 포지션이 완전히 겹치도록 만든다. opacity 값은 0으로 설정한다. (중요!!) - 마지막으로 hover했을때 opacity가 1이되도록 속성을 추가하면 끝이다. HTML 삽입 미..

웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 있다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있고, 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여주어야 할 때도 있다.이럴 때 사용할 수 있는 CSS 스타일링 요령에 대해서 알아보았다. 1. HTML 마크업아이콘과 텍스트를 나란히 배치하는 HTML 코드를 작성하였다. 아이콘은 SVG를 텍스트는  태그를 사용하였다. 내 프로필  2. 기본 스타일링정렬을 하기 전에 중요한건 우선 SVG 이미지와 텍스트의 크기를 비슷하게 맞춰주는 것이다. 아이콘 크기와 텍스트 크기가 반드시 정확히 동일할 필요는..

grid의 정렬 속성에 대하여 알아보았다. 1. auto-fill과 auto-fit auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채울 수 있다. 따라서 반응형을 보다 쉽게 만들 수 있고 repeat() 함수와 minmax() 함수랑 궁합이 잘 맞는다. .container { grid-template-columns: repeat(auto-fill, minmax(20%, auto)); } auto-fil 의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어갑니다. auto-fill과 auto-fit 의 차이는 auto-fil은 크기보다 셀의 개수가 부족하면, 공간이 남게 되고 반대로 auto-fit을 사용하면, 남는 공간..

저번 포스팅에서는 그리드를 선언하고 작성하는 방법에 대해서 알아보았다. 이번에는 템플릿 레이아웃에 대하여 알아보도록 하자! 네모네모 블록쌓기 말고, 좀 더 다양한 형태의 레이아웃을 짜고 싶을 땐 어떻게 하면 좋을까? 1. grid-line 각 아이템의 위치와 크기를 조정하는 속성이다. 아이템이 4개 있는 컨테이너에게 column과 row를 지정해 주었다. .container { display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: 150px 150px; } 그런 다음 start와 end를 시용해 첫 번째 아이템이 1에서 시작해서 4에서 끝나도록 아래와 같은 속성을 추가하였다. .item1 { grid-column-star..

레이아웃을 구현할 때는 flex를 쓰면 편리할때가 많다. flex만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에 편리한 grid에 대해 알아보자. 1. flex와 grid의 차이점 flex와 grid의 가장 크 차이점은 flex는 한방향 grid는 양방향이라는 점이다. 따라서 flex보다 더 복잡한 레이아웃 표현이 가능하는 장점이 있다. 2. grid구성 알아보기 ‖ 그리드 컨테이너 (Grid Container) display: grid를 적용하는, grid의 전체 영역이다. grid 컨테이너 안의 요소들이 grid 규칙의 영향을 받아 정렬된다고 생각하면 되는데 위 코드는 가 grid 컨테이너이다. ‖ 그리드 아이템 (Grid Item) Grid 컨테이너의 자식 요소이다..

HTML 삽입 미리보기할 수 없는 소스 1. URL로 SVG 내려받기 SVG 이미지를 내려받기 위해서는 background-image 에 url() 함수의 인자로 이미지의 주소를 넘겨주면 된다. 예를 들어, 체크 모양과 하트 모양 SVG url을 check와 heart 클래스에 넣어주면, 요소 앞에 각각 체크 모양과 하트 모양의 SVG 이미지가 나타나는 것을 볼 수 있다. .check { width: 50px; height: 50px; background-image: url("https://s2.svgbox.net/octicons.svg?ic=check"); background-repeat: no-repeat; background-position: center; background-size: contai..

공백 문자 바로 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 대표적으로 공백을 나타내는 문자이다. 하지만 이러한 문자들을 아무리 연속해서 많이 사용하더라도 웹에서는 그냥 하나의 띄어쓰기로 처리가 되는 경우가 많다. 게다가 이러한 공백 문자가 HTML 요소 내에서 맨 앞이나 맨 뒤에 나오면 아예 없는 셈 치기도 한다. normal 위와 같은 현상이 발생하는 이유는 white-space 속성은 별도로 지정해주지 않으면 기본적으로 normal이 적용이되기 때문인데 white-space 속성이 normal로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시가 된다. 뿐만 아니라 normal 속성값은 텍스트가 너무 길어서 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈을 해..