Sass란? css의 한계와 단점을 보완해서 보다 가독성이 높고 코드의 재사용에 유리한 css를 생성하기 위한 css의 확장입니다. css의 경우 문법이 쉽기 때문에 쉽다는 장점이 있지만, 프로젝트의 규모가 커지거나 수정이 많아질수록 쉽게 지저분해질 수 있고 유지보수도 어려워진다는 단점이 있습니다. Sass를 사용하게 되면 변수를 사용할 수 있고, 조건문과 반복문도 사용할 수 있습니다. 또한 import를 통해서 작게 쪼개서 합칠 수 있고, Nesting을 통해 중복 없이 html 구조 그대로 css를 만들 수 있습니다. 그리고 Mixin이라는 기능이 있는데, 이는 함수와 유사합니다. Sass 설치 브라우저는 Sass의 문법을 알지 못하기 때문에 Sass파일을 css파일로 트랜스 파일링해주어야 됩니다. ..

word-break와 word-wrap은 줄바꿈을 위해 사용합니다. 구체적으로 들어가면 word-word 속성이 비아시아 언어의 줄바꿈을 결정하고, word-break는 아시아 언어, 즉 CJK언어의 줄바꿈을 결정합니다. word-break 속성값으로 normal(기본값), break-all, keep-all를 갖습니다. normal 속성값은 기본값입니다. 브라우저의 기본값에 따라 줄바꿈이 일어납니다. break-all 속성값은 문자를 강제로 줄바꿈 할 수 있습니다. CJK언어에서 사용할 때는 normal처럼 작동하며 비아시아 언어에 사용할 때는 임의대로 줄바꿈을 할 수 있습니다. keep-all 속성값은 단어 단위로 줄바꿈이 일어납니다. 비아시아 언어에 사용될 때는 normal처럼 작동합니다. word..

같이 공부하는 동기가 W3C 레퍼런스를 공부하다가 해석이 난해한 부분이 있어서, 같이 자료를 찾아보게 됐습니다. 레퍼런스 내용은 다음과 같습니다. If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block. -W3C Reference 위 예제에서 clearance라는 단어가 나오는데, clear 속성이 none이 아닐 때 생기는 요소간의 간격을 말합니다. ..

과 은 강조를 해주기 위해서 사용이 됩니다. 그런데 확실하게 '이럴 때 을 사용해야 돼!' 혹은 '아니야! 태그를 사용해야 돼!'라고 구분을 하기에는 모호한 부분이 있습니다. 어떻게든 차이점을 찾아서 구분을 해보자면 아래 예시를 보겠습니다. 10월 11일에 00학교에서 국어시험이 있습니다. 문제는 총 10문제입니다. 위에서 누구에게나 중요한 정보가 있습니다. 언제, 어디서, 무엇을 보는지는 누구에게나 중요한 정보입니다. 이에 을 사용하였고, 10문제의 경우 기획자가 국어 문제가 10문제인 것을 강조하고 싶다라는 부탁이 있을 때 주관적인 강조로 을 사용해봤습니다. 나름 mdn, 블로그 등을 찾아보고 제 나름대로의 해석을 해봤는데 레퍼런스 해석과 함께 좀 더 자료를 찾아봐야될 부분이 있는거 같습니다.

[attribute] See the Pen 속성 선택자1 by 석금용 (@gmyong) on CodePen. 해당 attribute를 갖고 있는 요소에 스타일이 적용됩니다. [attribute="value"] See the Pen 속성 선택자2 by 석금용 (@gmyong) on CodePen. 해당 attribute 값이 value인 요소에 스타일이 적용됩니다. 다른 클래스랑 같이 쓰인 요소는 불가능하고 value 값이 똑같아야 됩니다. [attribute~="value"] See the Pen 속성 선택자4 by 석금용 (@gmyong) on CodePen. 해당 attribute 값이 value인 요소에 스타일이 적용됩니다. 여기서는 다른 클래스랑 같이 쓰인 요소도 스타일이 적용되는 것을 볼 수 있..

IR 기법이란 이미지 대체 텍스트 제공을 위한 CSS 기법으로, 다양한 CSS 기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다. 종류 1. padding-top 사용 width와 hegiht 속성을 적용하고 overflow 속성을 적용합니다. 그리고 box-sizing: border-box;를 적용해야지 padding-top 속성을 적용했을 때 대체 텍스트가 숨김 처리됩니다. 2. text-indent 사용 padding-top을 사용할 때와 똑같이 width와 height 속성을 적용하고 overflow 속성을 적용합니다. 그 후 text-indent 속성을 사용하여 대체 텍스트를 숨길 수 있습니다. 대체 텍스트를 해당 width의 값만큼 들여 쓰기를 하면서 텍스트가 숨겨지는건데, 만약 높이값..

1. 비트맵 픽셀이 모여 만들어져서 레스터 이미지라고도 불립니다. 정교하고 다양한 색상을 자연스럽게 표현할 수 있지만, 확대하거나 축소할 때 깨지는 현상이 있습니다. JPG (JPEG) Full-color와 Gray-cale의 압축을 위해 만들어졌으며 압축률이 좋습니다. 손실 압축 방식을 사용하는데 이미지를 손상시키면서 저장을 합니다. 이미지 용량을 줄일 수 있지만, 이미지가 손상이 된다는 단점이 있습니다. 그래서 보통 JGP 원본이 있으면 그것을 다시 다른 JPG 파일로 저장하는 것은 추천하지 않는다고 합니다. (여러번 저장하는 것을 조심해야 함) 그리고 24비트 컬러를 지원하기 때문에 고해상도 표시장치에 적합합니다. 또 이미지의 품질과 용량을 쉽게 조절 가능합니다. 인터넷에도 JPG 파일을 자르고 편..

See the Pen image 하단 공백 by 석금용 (@gmyong) on CodePen. div 안에 img 태그를 추가했을 때 image 밑에 공간이 생깁니다. image 밑에 공간이 왜 생길까? img 태그는 inline 요소이기 때문입니다. inline 요소는 블록 요소와 달리 가상의 기준선에 맞춰서 그려지게 됩니다. 위 그림과 같이 'g'와 같은 글자는 bottom 영역까지 그려집니다. 이 때문에 inline 요소는 baseline에 맞춰져서 그려지고 baseline과 bottom라인의 공간이 필요합니다. img 태그 또한 글자는 아니지만 inline 요소이기 때문에 baseline과 bottom 라인 사이의 공간이 생겨서 밑에 공백이 보이는 것입니다. 어떻게 없앨까? 첫 번째로 vertic..

인접 형제 요소의 마진은 상쇄됩니다. See the Pen margin collapse sibling by 석금용 (@gmyong) on CodePen. .box1, .box2, .box3에 각각 margin 값으로 10px을 적용했습니다. 그러면 우리가 생각하기에는 각 박스 사이에는 20px의 공간이 생겨야 되지만, 마진 병합 현상으로 10px의 공간만 나타납니다. 만약 margin의 값이 다르다면 값이 큰 수치 값만큼 공간이 생깁니다. 부모와 첫 번째 자식 요소 첫 번째 자식 요소에 margin-top 속성을 적용했을 때 마진은 상쇄돼서 부모 바깥에 나타나게 됩니다. See the Pen margin collapse top by 석금용 (@gmyong) on CodePen. .box2가 .box1 안..

.a11y-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; clip-path: polygon(0 0, 0 0, 0 0); } 포토샵으로 따지면 마스크를 씌우면서 숨김 처리를 합니다. text-ident: -9999px; 적용하면 스크린 리더가 글을 잃다가 포커스를 잃을 수 있지만 위와 같은 clip 처리는 포커스를 잃지 않습니다.