아래 내용은 학원 수업을 듣고 정리한 내용입니다.
HTML 작성을 하려고 하면, 무엇부터 해야 할까? 어디서부터 시작해야할까?
시안 분석
디자인 된 파일을 HTML 파일로 만들기 위해서 제일 먼저 해야할 일은 무엇일까? 바로 시안을 분석하는 것이다. 시안을 분석하는 것은 아래와 같이 나눌 수 있다.
선형화 순서 고민하기
디자인된 파일을 보고 컨텐츠의 논리적인 구조에 대한 분석을 해야한다.
(컨텐츠의 논리적인 구조가 왜 중요한지에 대한 설명은 앞서 설명했으므로 이번 포스팅에서는 생략하도록 한다.)
시멘틱 마크업 고민하기
선형화 한 컨텐츠들을 어떤 엘리먼트(태그)를 사용하고, 해당 엘리먼트에는 CSS의 어떤 속성을 사용하여 디자인된 모습을 구현할지 생각한다.
이 과정에서 의미에 맞는 시멘틱 마크업을 진행하기 위해서는 고려해야 할 것들이 있으므로 살펴보자.
- header, main, footer, section, article 등은 명시적인 아웃라인을 그리며, 위와 같은 엘리먼트들이 나오기 전에는 heading 태그(h1 ~ h6)를 사용했을 때 암묵적인 아웃라인이 그려지게 된다.
section이나acticle을 사용한다면 heading를 가져야 한다.section과article중 어떤 엘리먼트는 어떤걸 사용하는게 좋을지 결정하는게 쉽지 않다. 이럴 때는 내용을 파악하여 내용이 좀 더 독립적으로 구분하여 재사용할수 있는지의 여부를 확인하여 알맞게 사용하는 것이 좋다.
참고자료 : article mdn
참고자료 : section mdn
heading 태그 (h1 ~ h6)
heading의 사용은 4단계 이상 깊어지면 좋지 않으며, 중간에 단계를 건너띄거나 혹은 글자의 사이즈를 변경하기 위해서 사용하지 않아야 한다.
숨김 컨텐츠 (숨김 제목)
컨텐츠의 구분을 위해 필요(작성)하지만 디자인상(화면에서) 보여지지 않아야 하는 경우에 사용한다.
a11y-hidden, readable-hidden, offscreen 등으로 이름지어서 사용한다.
이런 숨김콘텐츠 작성시
overflow를 hidden으로 한뒤 text-indent : -9999px;를 설정하여 사용하기도 하는데, 이 코드는 키보드로 탐색시 화면 이동의 이슈가 있으므로 아래와 같은 코드를 사용하는 것이 좋다.
.a11y-hidden {
position: 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 방법론이 나오게 되었다.
각 방법론 마다 추구하고자 하는 방향이 다르므로 잘 찾아보고 자신의 스타일, 혹은 프로젝트의 성격에 맞게 선택해서 사용하는 것이 도움이 될 수 있다.
학원 HTML & CSS 프로젝트에서 BEM을 사용해본적이 있는데, 이건 추후에 정리해볼 기회가 있을 것 같다.
참고자료 : getbem
input
input은 HTML5 이전에는 10개의 타입만 존재했으나 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 외에도 여러가지 속성이 존재하므로 한번 살펴보는 것도 좋을 것이다.
