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 범주화로 ..

CSS(캐스케이딩 스타일 시트, Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어입니다. HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있습니다. 웹사이트에서 사용되는 스타일을 지정하기 위한 언어로, 스타일은 웹의 독창적인 개념이 아니라 웹 이전부터 워드프로세스 등에 사용했던 개념입니다. 1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표됐고, 1988년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작했습니다. CSS1이 많이 빈약했는데 CSS2부터 각종 브라우저 vender들이 제안을 하면서 스펙이 풍부해진겁니다. 그 후 CSS Level 2의 버그를 수정한 CSS ..

아래 예시 코드로 공부 진행합니다. 1 2 3 4 5 6 7 8 9 block 속성을 갖는 div 박스가 9개가 쌓여있다. * display: grid; grid container 박스를 정의해준다. 예시 코드에서 grid-container 클래스를 갖는 div 박스에 display: grid를 써주면 아무 변화가 없다. 하지만 grid-item 클래스를 갖는 div 박스들이 block요소가 아니라 inline-block 요소일 때, grid-container 클래스를 갖는 div 박스에 display: grid를 써주면 item들이 block요소로 쌓이게 된다. * grid-template-columns 열의 개수와 넓이를 결정한다. 1 2 3 4 5 6 7 8 9 .grid-container에 gri..

* display: flex / inline-flex; flex cotainer를 정의해준다. item들은 각각의 내용물 넓이만큼 수평정렬된다. inline-flex는 container의 속성에 inline 속성을 추가한 것이다. item들이 나열된 축을 메인축이라 하고, main 축과 수직을 이루는 축을 교차축이라 한다. * flex-direction: row(기본) / column / row-reverse / column-reverse; 메인축 방향을 지정해준다. 각 속성의 방향은 다음과 같다. row → column ↓ row-reverse ← column-reverse ↑ 여기서 신기한 것은 대한민국의 경우 글을 왼쪽에서 오른쪽으로 쓰지만 아랍권에서는 오른쪽에서 왼쪽으로 쓰기 때문에 row의 경우..