CSS?

CSS란 Cascading Style Sheets의 약자로 적층적 특성을 갖고 있는 스타일링 문서를 말합니다.

적층적 특성이란, 마치 폭포수가 위에서 아래로 떨어질 때 아래에 있는 바위들이 모두 물을 차례로 맞듯이, HTML 상위 그룹에 적용된 스타일이 하위에 있는 HTML 태그들 까지 적용되는 것 을 말합니다.

Why CSS

컴퓨터 그래픽은 붓을 들고 캔버스에 물감을 칠하는 것처럼 단순하지는 않습니다

CSS는 복잡한 알고리즘과 계산식으로 표현해야 하는 이런 컴퓨터 그래픽들을, 몇 가지 CSS 규칙으로 정의해 놓았습니다

이들을 더욱이 조합하여 표현할 수 있기 때문에, 각 규칙의 특성을 잘 이해한다면 무수히 많은 그래픽들을 효과적으로 표현할 수 있습니다

Why CSS is difficult

하나의 CSS 규칙을 이해는 것은 간단합니다. 하지만 각 규칙들의 조합을 이용해 내가 표현하고자 하는 그래픽에 도달하는 것은 어렵습니다. 조합의 가짓수가 너무 많기 때문이지요

CSS는 개별적 속성 규칙 / 관계형 속성 이렇게 두 가지 규칙으로 나뉩니다.

개별적 속성 규칙은 글자의 색, 이미지 크기 등 요소의 개별적 속성들을 정의해주는 규칙들입니다. 이 규칙들은 각 규칙이 표현하고자 하는 그래픽과 1:1로 매칭이 됩니다. 특별히 규칙들의 조합이 필요하지 않고, 내가 글자 색을 바꾸고 싶다면 color: red;처럼 한 가지 규칙을 적어주면 된다는 이야기 이죠

관계형 속성 CSS 규칙은 종류는 레이아웃 / 정렬 / 배치와 같은 그래픽을 표현하고 싶을 때 사용됩니다. 이런 그래픽들은 개별적 속성을 정의하는 첫 번째 종류와는 다릅니다. 스타일이 적용되는 개별적 요소만 고려해야 하는 것이 아니라, 그 스타일이 적용되었을 때 스타일이 적용되는 하위 또는 상위 요소를 반드시 고려해야 하죠.

레이아웃 / 정렬 / 배치 스타일 규칙들 다른 요소들을 고려해야 하고, 규칙들을 상황에 맞게 조합하여 사용해야 합니다. 그래서 어렵습니다. 사람들은 종종 아래와 같은 짤로 이 어려움에 대한 분노를 표현하기도 합니다

이런 문제를 해결하기 위해 CSS는 많은 새로운 규칙들을 내놓았습니다. float, position 등이 대표적인 그 예 입니다. 하지만 이 문제들도 역시 여러 규칙을 상황에 맞게 조합해야 했기에 근본적인 불편함을 해결하진 않았습니다. 같은 규칙이 어떨 때는 작동하고, 어떨 때는 작동하지 않는 상황들을 무수히 만들었죠.

그러던 중 2009년 경 flex / grid 규칙이 CSS에 추가되었습니다. 이 규칙들은 각 규칙이 각 레이아웃 또는 정렬, 배치의 표현과 1:1로 매칭이 됩니다. 이를 사용하는 것은 다양한 상황을 주지 않고, 명확한 한 두 가지 길을 제시하기 때문에 CSS를 처음 배우는 사람이나 사용하는 사람들의 많은 부담을 덜어 주었습니다

점점 더 많은 브라우저가 위 flex / grid 규칙을 지원하고 있습니다. 이 말인즉슨 더욱더 많은 사람들이 앞으로 flex / grid 규칙들을 사용해 웹사이트를 만든다는 의미입니다

이 Modern HTML and CSS Basics 코스에서는, CSS의 기본 문법과 위 flex / grid 규칙을 사용하여 보편적이고 강력한 레이아웃 / 정렬 / 배치 작성 방법을 배웁니다

끝으로 이 코스에서 배운 HTML/CSS를 활용하여 Instagram 페이지를 똑같이 만들어 보며, 어떻게 실제적으로 HTML/CSS 가 쓰이는지를 활용해 봅니다