의외로 잘 모르는 HTML & CSS 8가지 알아보기

 

마크업을 하고 UI 개발을 하다 보면 우리는 매번 너무나 익숙하게 습관처럼 사용하는 코드를 사용합니다. 태그도 각각의 태그가 가지고 있는 의미에 맞게 사용하고 보다 좋은 코드는 무엇일까 고민하면서 작업한다면 분명 우리는 어제보다 조금 더 나아진 코드를 마주하게 될 거예요.

 

평소에 무심코 사용하는 HTML과 CSS의 숨겨졌던 새로운 모습을 정리해보겠습니다.

 

1. dl 태그는 반드시 <dt>와 <dd>의 구조로 쌍을 이뤄서만 사용해야 하는 것은 아닙니다.

dl (definition list : 정의 목록) 요소

- 블록 레벨 요소로 dt, dd 요소 이외의 요소를 포함할 수 없으며 용어를 설명하는 목록입니다.

 

dt (definition term : 정의 용어) 요소

- 블록 레벨 요소로 용어의 제목을 나타냅니다.

 

dd (definition description : 정의 설명) 요소

- 블록 레벨 요소이며  용의를 설명하는 데 사용합니다.  한 개의 dt에 쌍을 이루는 dd, 또는 여러 개의 dd는 가능하지만 dt가 없이 dd 만 정의되는 것은 불가능하며 dt 만 정의되고 dd는 생략될 수 있어요.

 

- dt(정의 용어)와 dd(정의 설명)이 짝을 이루는 경우

<dl>        
    <dt>Drink</dt>
    <dd>Coffee</dd>
</dl>

 

 

- 하나의 dt(정의 용어)에 복수의 dd(정의 설명)가 존재하는 경우

<dl>
    <dt>Drink</dt>
    <dd>Coffee</dd>
    <dd>Water</dd>
    <dd>Milk</dd>
</dl>

 

 

- 복수의 dt(정의 용어)에 복수의 dd(정의 설명)가 존재하는 경우

<dl>
    <dt>Drink</dt>
    <dd>Food</dd>
    <dd>Water</dd>
    <dd>Milk</dd>
</dl>

 

-  dt(정의 용어)에 만 존재하는 경우

<dl>    
    <dt>Drink</dt>
    <dt>Food</dt>
</dl>

 

2. 마크업을 할 때 모든 버튼을 anchor 태그로만 사용하는 것은 시맨틱(semantic) 적으로 굉장히 좋지 않습니다.

마크업을 할 때 쉽고 편하다는 이유로 버튼으로 정의된 디자인 기능을 모두 anchor 태그로 마크업을 하는 경우가 있는데 이와 같은 방법은 접근성 측면에서 해당 기능이 버튼인지 링크를 위한 태그인지에 대한 불편함이 존재하게 되고 시맨틱 마크업도 해치게 돼요.

 

각 상황에 맞게 어떠한 버튼을 사용하여야 하는지 고민하고 사용한다면 보다 좋은 코드가 될 거예요.

 

- 모든 버튼을 anchor 태그로만 사용한 예 (잘못된 사용)

 

<a href="#">Test 버튼</a>

 

Form 태그처럼 안에서 값을 넘겨주어야 할 때는 submit 버튼을 사용합니다. 

특정한 값이 사용자에 의해서 입력되고 그 값이 전달되는 건 submit입니다. submit으로만 값을 전달하는 방법이 있는 건 아니지만 여기서는 가장 보편적인 방법만 알아볼게요.

submit 버튼에는 <button type="submit">과 <input type="submit"> 두 가지가 존재하는데 둘 다 같은 결과를 호출하기 때문에 본인에게 익숙한 코드를 선택하여 사용하시면 돼요.

두 버튼의 가장 큰 차이점은 input은 value에 값을 넣어서 사용하고 button은 태그 안에 값을 넣어 사용한다는 게 차이점이라 할 수 있습니다. 저는 개인적으로 <button type="submit">이 마크업적인 면에서 조금 더 명확하고 시맨틱 하다고 판단하여 <button type="submit">을 사용하고 있습니다.

 

- submit

<input type="submit" value="전송" />
<button type="submit">전송</button>

 

Form에 입력되어 있는 값들을 초기화 시켜줄 때 사용하는 버튼으로 input과 button 두 가지가 존재하며 둘 다 동일한 결과를 호출합니다.

 

- reset

<input type="reset" value="reset" />
<button type="reset">Test 전송</button>

 

가장 보편적으로 많이 사용하는 anchor 태그는 타 페이지로 이동하는

주소 값(특정 URL)으로 이동 시 anchor 태그를 사용하는 게 맞습니다.

 

- URL

<a href="http://test.html">링크 바로가기</a>

 

클릭을 위한 버튼은 아래 코드에 사용된 버튼을 사용합니다. input과 button 두 가지가 존재하며 둘 다 동일한 결과를 호출합니다.

 

-button

<input type="button" value="Test 버튼" />
<button type="button">Test 버튼</button>

 

3. button을 사용하려면 별도의 CSS를 추가해 주어야 합니다.

<button>...</button> 요소는 웹 브라우저 기본 값으로 회색 배경과 2px 크기의 outset 스타일이 지정되어 있는데 이 값을 초기화 시켜 주어야 원하는 디자인을 적용할 수 있습니다. 또한 button 요소는 Firefox에서만 조금 다른 모양으로 적용되는데 이를 방지해주는 CSS를 추가해주어야 모든 브라우저에서 동일한 디자인 효과를 얻을 수 있어요.

/* Firefox Cross browsing */  
button::-moz-focus-inner {    
    border:0;    
    padding:0;    
}        

/* Design Custom */
button {    
    border:0;    
    vertical-align:middle;    
    cursor:pointer;    
    background:transparent;    
    overflow:visible;
}

 

 4. textarea를 사용 시  resize를 속성을 막아주어야 합니다.

textarea를 기본적으로 적용하면 textarea 오른쪽 하단에 작은 삼각형 모양이 생기는데 이것을 드래그하면 처음 CSS에서 정의해 둔 사이즈를 무시하고 textarea 사이즈가 커지게 되면서 레이아웃이 틀어지게 됩니다. 이런 현상을 방지하기 위해 textarea 사이즈가 변경되지 않도록 CSS 별도로 추가하여 해당 textarea가 resize 되지 않도록 해 주어야 합니다.

 

textarea {resize:none;}

    

5. 인접 선택자 / 형제 선택자 사용하기

CSS를 작성하다 보면 선택자를 조금만 더 활용하면 보다 편하고 간결한 코드를 작업을 할 수 있습니다.

인접 선택자는 앞에 지정된 요소 이후 가장 근접한 하나의 형제 요소에만 적용돼요. 아래의 예제에서는 '인접 선택자 1번'만 CSS가 적용됩니다. 단 부모와 자식 사이에 주석이 있다면 동작하지 않아요.

 

- 인접 선택자

 

    

형제 선택 자는 앞에 지정된 요소 이후 모든 형제 요소에 적용된다. 아래의 예제에서는 모든 인접 선택자 1,2,3번의 CSS가 적용됩니다. 단 Heading 태그 앞에 있는 p에는 적용되지 않아요.

 

- 형제 선택자

 

6. Heading 태그는 순차적으로 사용하여야 합니다.

마크업을 하면서 사용하는 Heading 태그를 간혹 순차적으로 사용하지 않는 경우가 있습니다. 예를 들어 h1 태그가 나오고 바로 h3 태그가 사용하는 경우가 있는데 이는 올바르지 못한 사용법입니다. 이는 웹 접근성에도 위배가 되는 문제로 h3 태그를 사용하기 위해서는 h1 태그가 있고 그다음 h2 태그가 존재하는 상태에서 h3 태그를 사용할 수 있습니다.

Heading 태그는 그 페이지에서 가장 중요한 내용이 h1이 될 수 있고 중복 사용도 할 수 있다. 로고에서 h1을 사용하였다고 해서 서브 페이지의 제목에는 반드시 h2가 와야 하는 것이 아니라 h1 태그가 다시 중복될 수도 있습니다.

 

7. h1 태그는 로고에만 사용해야 하는 것은 아니다.

마크업을 하면서 가장 많이 보이는 구조가 h1 태그를 사이트의 로고에 사용하는 사람들이 많은데 이 문제에 대해서 '옳다.' / '옳지 않다.'라는 의견이 논의되고 있지만 저의 개인적인 생각은 정답은 없는 것 같습니다. 

다만 의미 없이 습관적으로 마크업을 하는 것은 옳지 않다고 생각합니다. 마크업을 하는 본인의 판단에 기준을 세우고 마크업을 진행하는 게 가장 중요한 것 같습니다.

 

8. !important 사용 대체하기    

프로젝트 시 우리는 공통 구조와 클래스를 정의해 두고 해당 클래스의  스타일을 상속받아 사용하게 됩니다. 이 때 기존 구조에서 특정 내용을 추가하거나 삭제할 때 부득이하게 상속받은 스타일이 충돌나면서 !important 를 사용해야 될 때가 발생하게 되는데 !important는 CSS 속성 선언에 최고 점수를 가지는 속성으로서 꼭 필요한 경우가 아니라면 가급적 사용을 지양하는 게 맞다고 생각합니다.

한번 !important로 수정을 하면 그 후 추가 수정은 계속해서 !important를 사용해서 수정해야만 하기 때문입니다. 

그래서 !important를 사용하지 않고도 수정 코드를 적용할 수 있는 방법을 공유하려 합니다. 

 

그 방법은 바로 클래스 명을 뒤에 한번 더 적어주면 속성이 원하는 속성으로 바뀌게 됩니다.  놀랍지 않아요? 

저만 놀라웠다면 죄송합니다. 

 

아래의 코드대로면 글자는 빨간색이 적용될 거예요.

 

!important를 사용하여 글자를 녹색으로 변경하였지만 이후 추가 수정이 있을때마다 !important 속성을 사용해야 하겠네요.

 

아래 코드처럼 클래스 명을 뒤에 한번 더 적어주면 글자는 녹색으로 바뀌게 돼요. CSS점수에 의해서 속성 코드가 변경되는 건데 지금은 간단한 예시 코드이지만 뎁스 깊이가 깊어지고 CSS가 복잡해지면 유용하게 사용할 수 있을 거라 생각합니다. 

 

 

긴 글 읽어 주셔서 감사하고 조금이나마 도움이 되었으면 좋겠어요. 

감사합니다.