HTML+CSS 기초 강의 - 23. CSS 기초이해 2 - CSS 작성 순서
대부분 CSS 클래스를 정의한다고 하면 CSS 를 정의하는 기본 문법만 주구장창 배우게 됩니다.
시방 뭣이 중헌디...
실전 프로젝트에서 클래스를 정의하는데 있어서 가장 중요한 것은 CSS를 정의하는 문법이 아닙니다.
문법같은거야 쓰다보면 자연스럽게 외워지기도 하고 익숙해집니다.
CSS 작성을 아무리 많이 해도 결국은 사용하던 것만 사용하게 되기 때문에
잘 사용하지 않거나, 복잡한 CSS 속성들은 어차피 레퍼런스 사이트에서 규격을 확인하지 않으면 제대로 작성하기 힘듭니다.
그것보다도 100배쯤은 중요한 것이 CSS를 작성하는 기본 순서입니다.
HTML 문서 앞에서 나오는 내용부터 주욱 클래스를 정의해나가다보면 중복에 중복에 중복을 거쳐서 클래스가 꼬이기 시작합니다.
앞에 정의했던 클래스 속성을 뒤에 나오는 클래스에서 덮어쓰고, 상속받은 클래스 속성을 재정의에 재정의를 또 하는 일이 비일비재 합니다.
그러다보면 100줄이면 될 CSS 파일이 200줄 300줄로 늘어나게 되고,
CSS 속성 하나를 수정하려면 여러군데를 확인해가면서 꼬이지 않는지 조심조심 수정을 해야하는 상황이 벌어지기도 합니다.
생략하고 결론부터 보겠습니다.
이부분은 앞으로 CSS를 작성하는데 있어서 모든 경우의 가장 핵심이고 기초가 되는 부분입니다.
반드시 숙지하고 외워두기를 추천합니다.
1. 가장 위에 전체 레이아웃에 관련된 기본 레이아웃 태그 및 시맨틱 태그 클래스를 정의합니다.
<body></body>, <header></header>, <section></section>, <footer></footer> 같은 영역별 태그의 기본 설정을 지정합니다.
특히 시맨틱 태그들을 많이 사용하는 모던 웹사이트들을 위해서 시맨틱 태그들의 초기 설정은 반드시 해두어야 합니다.
기본적으로 <header></header>, <nav></nav>, <section></section>, <article></article>, <aside></aside>, <footer></footer> 태그 정도는 기본으로 정의를 해주어야 합니다.
예를 들어body { font-weight: 400; font-family: 'Noto Sans KR', sans-serif; font-size: 1em; line-height: 1.25;}html, body { width: 100%; height: 100%; margin: 0; padding: 0;}
이런식으로 기본 문서 레이아웃에 공통으로 적용되는 글꼴 크기나 마진, 패딩 등의 값을 정의 해둡니다.
2. 두번째로 문서 내용 표시에 관련된 태그들의 초기화가 위치합니다.
CSS로 사용자 정의되지 않은 HTML 문서는 기본 속성을 가지게 됩니다.
<a></a> 태그는 기본 컬러가 검정색이며, 마우스 오버가 되면 밑줄이 쳐져 보이고, 방문했던 링크는 보라색으로 보이는 기본 CSS 속성이 내부에 정의되어 있습니다.
물론 이걸 실전에서 그대로 사용하는 경우는 없습니다.
방문했던 링크가 생뚱맞게 보라색으로 보이는 페이지는 정말 이상해 보이기 때문입니다.
따라서 주요 HTML 태그들의 공통된 기본 색상, 텍스트 크기, 자간, 줄 간격을 한꺼번에 초기화를 해서 기본값이 이것이다라고 정의를 맨위에 해두어야 합니다.
양식 필드들에 대해서도 마찬가지입니다.
레이아웃 설정을 할 수 있는 태그들은 안쪽 여백과 바깥쪽 여백에 대한 기본 설정도 합니다.
링크 태그도 마찬가지입니다. 기본 색상, 마우스오버 시 색상과 텍스트 속성, 방문했던 링크, 현재 활성 상태인 링크에 대한 것도 공통으로 지정해둡니다.
예를 들어
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure { margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; font-size:16px;}header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block;}input, select, textarea, button { font-size: 100%; border-radius: 0;}a:link, a:hover, a:visited, a:active { text-decoration:none; color:#000;}
3. 각 영역별 요소들의 클래스를 정의할 때는 배치와 관련된 최 외곽 태그들의 위치 및 여백을 정의합니다.
위치 및 여백을 정의할 때는 반드시 바깥쪽 태그의 클래스를 먼저 정의하고 안쪽 태그들의 클래스를 나중에 정의해야 합니다.
그리고 화면 레이아웃 배치에서 가장 중요한 CSS 속성인 "box-sizing:border-box" 는 꼭 알아두어야 합니다.
나중에 자세히 차이점을 배우게 되지만, 레이아웃을 잡는데 정말 큰 차이를 만들어냅니다.
4. ID에 적용하는 클래스들은 한곳에 모아 앞쪽에 배치합니다. 그리고 ID를 이용한 CSS는 가능하면 최소화해 사용할 것을 권장합니다.
경험상 여러 문서에서 공통으로 사용하는 CSS 파일의 특성상 ID로 정의한 CSS가 많아지면 관리가 너무 힘들어집니다.
ID로 CSS를 다수를 정의해 관리할 경우 네이밍 규칙을 잘 정해서 어느 위치에 사용하는 ID인지를 즉시 알 수 있도록 정의하는 것이 좋습니다.
5. 텍스트 관련 태그의 CSS 속성을 정의할 때는 반드시 상속을 고려해서 상속되는 것과 상속되지 않는 것들을 반드시 숙지해서 불필요한 정의들을 최소화합니다.
그리고, 반응형 웹페이지, 또는 웹사이트를 제작할 경우 가능하면 크기 단위로 "em"을 사용할 것을 권장합니다. 상대 크기를 사용해 다양한 기기 환경에 대응할 수 있도록 해야 최근에 나오는 레티나 디스플레이 기기들에서 가독성을 유지할 수 있습니다.
6. 나중에 배우겠지만 !important 속성은 가능하면 사용금지입니다. 이 지시자는 평화로운 CSS 세상을 깨는 문제아입니다. 정말 예외적인 꼭 필요한 경우에만 사용해야 합니다.
특히 여러명이 CSS를 함께 제작하거나, 제작된 CSS를 다른 사용자가 사용하게 되는 경우에는 특히나 !important는 주의해서 사용해야 합니다.
7. 반응형 및 화면 크기별 지원을 위한 미디어 쿼리 CSS는 끝 부분에 따로 모아서 작성합니다.