이 글은 아래의 영상의 내용을 기반으로 작성되었습니다. www.youtube.com/watch?v=KWrGRZaBdgs 방법에는 총 두가지가 있습니다. 1. Break Point Mixin 생성 이 방법은 사용하는 것이 더 간단하지만 성능은 더 좋지 않습니다. // mixin 생성 @mixin breakpoint($size) { @if $size == mobile { @media screen and (min-width: 360px) { @content; } } @else if $size == tablet { @media screen and (min-width: 768px) { @content; } } @else if $size == laptop { @media screen and (min-width: 1..

제가 활동하고 있는 문예 단체에서 문예지를 구독하는 독자들이 작품을 이메일에서 받은 즉시 볼 수 있도록 이메일 HTML 템플릿을 만들어 달라는 부탁을 받았습니다. 처음엔 단순한 퍼블리싱 작업인 줄 알았지만 생각 이상으로 장애가 많아서 혹시 저처럼 퍼블리싱을 통해 이메일 템플릿을 제작하고 싶은 개발자, 디자이너가 있다면 참고하실 수 있도록 글을 작성해보기로 했습니다. 염두에 두어야 하는 제한사항들 사실 조심성이 많은 사람이라면 이메일로 어느 정도의 컨텐츠를 보낼 수 있는지 궁금해하고 인터넷을 뒤져볼 것입니다. 그러나 정보들이 산발적으로 흩어져 있어서 이곳에서 어떤 것을 이메일 컨텍스트 내에서 구현할 수 없는지, 어떤 제한 사항이 있는지를 정리해보겠습니다. 자바스크립트 탑재 불가 일반적인 html 에는 태그..

[ transform ] transform 속성 : 해당 요소의 위치나 크기를 바꾸는 속성으로, 값으로 translate(200px, 400px) 혹은 translateX(200px), translateY(400px)를 줄 수 있습니다. 혹은 해당 요소의 크기를 바꾸는 속성으로, 마찬가지로 scale(0.5, 2), scaleX(0.5), scaleY(2)를 줄 수 있습니다. 혹은 요소를 회전시키기 위해 3차원 에서 해당 요소를 가로축, 세로축에서 회전킨다 rotate(60deg, 90deg), rotateX(60deg), rotateY(90deg), 그리고 요소를 시계방향으로 회전시키는 rotateZ(180deg)를 쓸 수 있다(마이너스값을 주면 반시계 방향으로 회전). transform 이 일어나는 ..

[ 박스 모델 ] 블록 레벨 엘리먼트는 100% width를 차지 한다(설정한 width 넓이와 상관없이) [ floating elements ] 플롯은 이미지 바로 옆에 텍스트 단락을 둘수 있도록 만드는 기능이다. 보통의 문서 흐름을 무시하고, 원래의 블록을 바로 아래의 블록 안의 왼쪽, 오른쪽에 끼워 넣는다. 끼움당한 블록은 자동으로 끼워진 만큼 너비가 줄어든다. 그리고 아래의 박스들은 자동으로 끼워진 블록이 없어진 만큼 위로 이동한다. 이때 플록 블록에 width 속성이 정해져 있지 않으면 끼워지지 않는다. 플롯이 위에서 여러개가 있으면, 맨 아래에 플롯이 아닌 블록에 한꺼번에 겹쳐진다. 맨 아래에 있는 블록까지 플롯을 부과하면, 하나의 블록 안에 해당 플롯 블록들이 순서대로 배열된다. [ clea..

[ CSS 그리드의 특징 ] CSS 그리드는 부트스트랩이나 여타 다른 CSS 와는 다르게, 마크업의 위치나 클래스 이름이 크게 중요하지 않습니다. 웹 페이지 하나를 하나의 큰 격자들의 모음으로 보고, 그 격자에 어떤 태그가 어느정도를 차지할지를 결정하는 식으로 레이아웃이 결정되지요. 그리고 이를 화면 크기에 따라 재정렬하고 크기를 조절할 수 있는 유연성을 가지고 있습니다. 이 격자들은 위의 그림에서는 8 x 8 이지만 사실 이는 사용자가 맘대로 정할 수 있습니다. 2 x 2 가 되던, 12 x 12 가 되던 상관 없습니다. 게다가 각각의 column 과 row 는 모두 동일한 너비와 높이로 이루어져 있어야 할 필요가 없으며, 이용자가 마음대로 이를 지정할 수 있습니다. [ CSS 그리드 적용 방법 ] 관..

[ flex container ] 그냥 div 태그 같은 display: block; 속성이 할당된 태그는 width 를 지정해도 요소 자체는 전부 100%의 width 값을 가지게 되지만, 해당 div 들이 display 값이 flex인 컨테이너 안에 들어있다면, 모두 지정된 width 값을 가진 블록 아이템이 되어 정렬됩니다. float 과의 차이점은, 문서 흐름에서 벋어나지 않기 때문에, 플렉스 속성이 지정된 상위 태그의 높이와 너비는 안의 자식 요소들에 의해 결정된다는 것입니다. [ flex-grow ] flex-grow 는 flex container 안의 아이템들에 지정하는 것이며, 부모 태그에서 채워지지 못한 남은 width 들을 해당 아이템이 채우게 됩니다. 1 부터 수치를 매길 수 있는데,..