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 안..

W3C의 이미지를 가져왔습니다. HTML Entities는 디자인 용도로는 사용을 하면 안됩니다! 특수문자의 전문 용어를 알아두면 좋습니다. 의사소통을 할 때 도움이 많이 됩니다. ` : grave 그레이브 ~ : tilde 틸드 ! : exclamation mark 엑스클러메이션 마크 @ : at sign 엣 사인 # : number sign, sharp $ : dollar sign % : percent sign ^ : caret 캐럿 & : ampersand 엠퍼센드 * : asterisk 에스터리스크 - : hyphen, dash _ : underbar, low dash = : equals sign " : quotation mark 쿼테이션 마크 ' : apostrophe 아포스트로피 : : col..

웹 콘텐츠 접근성 지침서로, KWCAG라는 한국형 웹 콘텐츠 접근성 지침도 있습니다. 이는 완벽한 것이 아닌 최소한의 접근성으로서 앞으로 웹 개발을 할 때 지켜줘야 할 항목들입니다. 다음 아래 내용은 KWCAG2.1 (한국형 웹 콘텐츠 지침) 내용입니다. 인식의 용이성 - 적절한 대체 텍스트 제공, 자막 제공, 색에 무관한 콘텐츠 인식, 명확한 지시 사항 제공(동의란 잘 보이게 등), 텍스트 콘텐츠의 명도 대비, 자동 재생 금지, 콘텐츠 간의 구분 운용의 용이성 - (마우스로 된다면 키보드도) 키보드 사용 보장, 초점 이동, 조작 기능, 응답시간 조절, 정지 기능 제공, 깜빡임과 번쩍임 사용 제한(발작 장애. 주의문구 표시), 반복 영역 건너뛰기, 제목 제공, 적절한 링크 텍스트 - h tag 잘 써서 ..

.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 상자..

* { margin: 0; padding: 0; } .wrapper { width: 100%; border: 8px solid red; box-sizing: border-box; display: flex; flex-flow: column nowrap; align-items: center; } header, section, article, footer { width: 600px; } header { height: 50px; background-color: mediumslateblue; } section { height:100px; background-color: midnightblue; } article { height: 100px; background-color: cornflowerblue; } .foo..

box1 box2 empty-box * { margin: 0; padding: 0; } .box-wrap { background-color: yellow; } .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 100px; height: 100px; background-color: green; } .empty-box { height: 200px; background-color: blue; } 여기서 .box1과 .box2에 float 속성을 적용하면, 공중에 떠버려서 자식 요소의 높이만큼 높이값을 가졌던 .box-wrap은 높이값을 잃게 됩니다. * { margin: 0; padding: 0; } .box-wrap { ..

header visual group1 group2 group3 slogan footer @charset "utf-8"; @import url(./normalize.css); @import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); *, *::before, *::after { box-sizing: border-box; } html { font-size: 10px; } body { font-size: 1.6rem; color: #181818; background-color: #fff; font-family: 'Spoqa Han Sans'; font-weight: 400; } /* 레이아웃 */ .container { background-c..