음수 마진에 대해 간략하게 정리해보겠습니다. 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..

초기 CSS1는 A4용지 한 장에 다 쓸 수 있을 정도로 스펙이 적었습니다. CSS2도 스펙이 적을뿐더러, 그 스펙 중에서 가운데 정렬을 하는 방법을 개발자들이 꼼수(?)로 찾습니다. margin: 0 auto;를 사용한다는지 position 값을 주고 left값과 transform값을 준다든지, line-height를 준다든지, 혹은 부모 요소에서 text-align: center;를 사용하여 자식 요소를 가운데 정렬하든지 등 방법을 사용하여 박스를 가운데 정렬을 해주었습니다. 이에 가운데 정렬의 필요성이 대두되다보니 flex와 grid를 만들어내면서 가운데 정렬을 편하게 할 수 있도록 만들어주었습니다. 얼른 flex와 grid를 지원하는 웹브라우저를 많이 사용하는 날이 왔으면 좋겠습니다! * 추가 태..

HTML 파일에서 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); html { font-size: 10px; } body { font-size: 1.6rem; color: #181818; background-color: #fff; font-family: 'Spoqa Han Sans'; font-weight: 400; } 파일을 보면 import로 를 불러옵니다. HTML 파일에서 를 통해 가져올 수 있는데, 왜 css 파일에서 import로 불러왔을까요? ..

* inline > embeded > external > 브라우저 기본값 순으로 우선순위를 갖습니다. css 선언 방식이 위에서 왼쪽에 위치할수록 사용자에게 보여지게 됩니다. * 선언 방식이 같을 경우 가장 마지막으로 적용한 것이 사용자에게 보여집니다. * 특정도(specify) 값을 계산해서, 가장 많은 점수를 받은 것에 우선 순위를 부여합니다. 특정도 계산식 1. 인라인 스타일: 1000점 2. ID 선택자: 100점 3. 클래스 선택자: 10점 4. 태그 선택자: 1점 * !important 선언 !important는 모든 순서를 무시하고, !important가 선언된 속성이 사용자에게 보여집니다. 적용 방법은 다음과 같습니다. selector { property: value !important; }

* External (외부 선언) 태그를 통해 외부 css 파일을 링크해서 사용합니다. 유지보수, 퍼포먼스 관점에서 우수합니다. javascript 같은 경우, src 속성을 사용하는데 이는 연결이 아니라 삽입의 개념이다. * Embedded / Internal (내부 선언) * Inline (엘리먼트에 직접 선언) HTML 태그 안에서 style 속성을 설정합니다.

* P.C (파스칼 케이스) 첫 단어를 대문자로 표기합니다. MainContent * C.C (카멜 케이스) 낙타 등이 들쑥날쑥한 것처럼 각 단어의 첫 글자들만 대문자로 표기하는 방법입니다. 가장 첫 문자는 소문자로 표기합니다. mainContent * K.C (케밥 케이스) 하이픈으로 단어를 연결하는 방식입니다. main-content * S.C (스네이크 케이스) 여러 단어로 이루어진 경우 단어 사이를 언더바로 나누는 방식입니다. main_content * CSS 방법론 ※ 참고 https://wit.nts-corp.com/2015/04/16/3538 https://medium.com/@jinminkim_50502/css-bem-smacss-oocss-9e4d6beb0a38 - SMACSS 범주화로 ..