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의 값만큼 들여 쓰기를 하면서 텍스트가 숨겨지는건데, 만약 높이값..

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 처리는 포커스를 잃지 않습니다.

음수 마진에 대해 간략하게 정리해보겠습니다. margin 속성에 음수 값을 주는 것을 말합니다. 그림에서와 같이 top / right / bottom / left에 음수 값을 줄 수 있습니다. 그런데 top과 left에 음수 값을 주는 것과 right와 bottom에 음수 값을 주는 것에 차이점이 있습니다. margin-top 혹은 margin-bottom에 음수 값을 주었을 때 See the Pen margin-left: -30px; by 석금용 (@gmyong) on CodePen. .box1 박스에 margin-left: -30px;을 적용시켰을 때 박스가 왼쪽으로 30px 이동한 것을 볼 수 있습니다. top / left에 음수 마진을 주면, 그 방향으로 요소가 이동하게 됩니다. margin-ri..

display: inline; display 속성에 inline 값을 가진 태그로 이 대표적입니다. content나 text 크기만큼 크기를 갖고 동일 라인에 붙습니다. 보통 text 내에 특정 부분에만 스타일을 간단히 줄 때 많이 사용됩니다. inline 값을 가진 태그로는 , , , , , , , , , , , , , , , , , , , , 등이 있습니다. inline 값을 가진 태그 아래와 같은 특징을 갖습니다. 1. width / height 속성이 적용이 안됩니다. 2. margin / padding-top / padding-bottom 속성이 적용이 안됩니다. 3. line-height 속성을 원하는 대로 적용하기 힘듭니다. ( 태그에 line-height 속성을 적용하면 해당 span 상자..