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의 경우..