웹 문서(HTML & CSS) 작성 사전준비

아래 내용은 학원 수업을 듣고 정리한 내용입니다.

시안분석

디자인된 파일을 HTML 파일로 만들기 위해서 제일 먼저 해야 할 일은 무엇일까?
바로 시안을 분석하는 것이다. 시안을 분석하는 것은 아래와 같이 나눌 수 있다. 

선형화 순서 고민하기

디자인된 파일을 보고 콘텐츠의 논리적인 구조에 대한 분석을 해야 한다. 
(콘텐츠의 논리적인 구조가 왜 중요한지에 대한 설명은 앞서 설명했으므로 이번 포스팅에서는 생략하도록 한다.)

시맨틱 마크업 고민하기

선형화 한 콘텐츠들을 어떤 엘리먼트를 사용하고, 해당 엘리먼트에 CSS의 어떤 속성을 사용하여 디자인된 모습을 구현할지 생각한다.

이 과정에서 의미에 맞는 시맨틱 마크업을 진행하기 위해서는 고려해야 할 것들이 있으므로 살펴보자.

• header, main, footer, section, article 등은 명시적인 아웃라인을 그리며 위와 같은 엘리먼트들이 나오기 전에는 heading 태그(h1 ~ h6)를 사용했을 때 암묵적인 아웃라인이 그려지게 된다.
• section이나 article을 사용한다면 heading을 가져야 한다. 
• section과 article 중 어떤 엘리먼트를 사용하는 게 좋을지 결정하는 게 쉽지 않다. 이럴 때는 내용을 파악하여 내용이 좀 더 독립적으로 구분하여 재사용할 수 있는지의 여부를 확인하여 알맞게 사용하는 것이 좋다. 

heading 태그 (h1 ~ h6)

heading의 사용은 4단계 이상 깊어지면 좋지 않으며, 중간에 단계를 건너뛰거나 혹은 글자의 사이즈를 변경하기 위해서 사용하지 않아야 한다. 

숨김 컨텐츠 (숨김 제목)

콘텐츠의 구분을 위해 작성하지만 디자인상 화면에서 보이지 않아야 하는 경우에 사용한다. 
a11y-hidden, readable-hidden, offscreen 등으로 이름 지어서 사용한다.

이런 숨김 콘텐츠 작성 시 
overflow를 hidden으로 한 뒤 text-indent : -9999px; 를 설정하여 사용하기도 하는데, 이 코드는 키보드로 탐색 시 화면 이동의 이슈가 있으므로 아래와 같은 코드를 사용하는 것이 좋다.

.a11y-hidden {
  positon : absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  clip: rect(0,0,0,0);
  clip-path: polygon(0 0, 0 0, 0 0);
}

CSS 방법론

CSS는 작성하기가 매우 까다롭다.

중첩 작성이 가능하며, 중첩되었을 때는 명시도 점수에 따라서 적용되는 속성의 우선순위가 달라진다. 

그나마 혼자 작성했으면 대략적이라도 파악이 가능하지만, 여러 사람이 함께 작성한다면? 의도했던 모습이 아니라 다른 모습으로 구현될 가능성이 매우 커진다. 심지어 CSS는 오류가 발생하지 않기 때문에 왜 이런 모습이 되었는지 하나하나 찾아서 디버깅하려면 매우 많은 시간이 걸리게 될 것이다. 

이러한 이유 때문에 여러 가지 SMASS, BEM, OOCSS의 CSS 방법론이 나오게 되었다. 각 방법론마다 추구하고자 하는 방향이 다르므로 잘 찾아보고 자신의 스타일, 혹은 프로젝트의 성격에 맞게 선택해서 사용하는 것이 도움이 될 수 있다. 

input

input은 HTML5 이전에는 10개의 type만 존재했으나 HTML5에서 대폭 추가되어 총 23개의 type이 있으며, 이 타입에 따라서 특성과 형태가 다르다. 필요에 따라 잘 선택해서 사용할 수 있어야 한다.

• input에 required를 작성하면 필수로 작성해야 하는 속성이라고 알려주는 것이다.
• input의 name속성은 서버에 있는 데이터 필드 이름이 된다. (그렇기 때문에 name은 고유한 이름이 되어야 하고, 이 때문에 일반적으로는 id와 같은 이름을 사용한다. 하지만 id와 name이 반드시 동일해야 하는 것은 아니다.)

엘리먼트의 역할

HTML을 사용하여 문서를 작성 중에 div 혹은 span을 button의 역할을 하도록 지정해주고 싶을 경우도 있다. (물론 애초에 button을 사용하면 되겠지만, 이 예시에선 이해가 쉽도록 하기 위해서 위와 같은 상황을 설정하자. 사실은 a태그를 버튼처럼 사용할 수도 있고, 여러 가지 상황이 있을 수 있다.)

이럴 경우 role="button"이라는 속성을 사용하면 된다. 단, div와 span은 키보드 탐색 시 포커스로 이동이 불가하므로 추가적으로 tabindex를 별도로 설정해주어야 한다.

이처럼 이미 지정되어 있는 (기존에 부여되어 있는) 역할을 임의로 변경하고 싶을 때는 role=""이라는 속성을 사용하면 된다. 이 role=""속성에는 button 외에도 여러 가지 속성이 존재하므로 한번 살펴보는 것도 좋을 것이다.