[웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성

속성들에 대해 좀 더 디테일을 알아볼 차례다. 모든 속성을 다 소개할 수는 없고 실무에서 자주 쓰이는 대표적인 속성들, 꼭 알아야 하는 것들만 알아보겠다. 그 외에는 그 때 그 때 필요할 때, 이 기능이 있으면 좋을 것 같단 생각이 들 때 검색을 활용하면 된다. 레퍼런스를 참고하거나.

HTML 요소의 구조도

1. class 속성

<ul>     <li class="1반">a</li>     <li class="1반">b</li>     <li class="1반">c</li> </ul>

가장 많이 쓰이는 속성 중 하나다. class는 말 그대로 클래스다. HTML 요소들을 일정 클래스로 분류하는 것. a, b, c 학생(요소)는 1반(클래스)으로 지정하고, d, e, f 학생(요소)는 2반(클래스)로 지정한다면 무엇이 편할까. 클래스는 CSS에서 해당 요소들을 선택하기 위해 사용하는 것이다. 즉 CSS에서 클래스를 선택하여 서식을 적용하면, 해당 클래스의 모든 요소에 같은 서식이 적용된다. 선생님이 "1반은 빨간 옷을 입고 2반은 파란 옷을 입어라~" 하면 a, b, c는 모두 빨간 옷을 입고 d, e, f는 파란 옷을 입는 것이다. 만약 클래스의 개념이 없다면 선생님은 "a는 빨간 옷을 입고 b는 빨간 옷을 입고 c는 빨간 옷을 입고, d는 파란 옷을 입고 e는 파란 옷을 입고 f는 파란 옷을 입어라" 라고 일일이 각각의 학생들에게 명령을 해야할 것이다. 웹의 화면은 구조적으로 이루어져 있다. 예를 들어 내 블로그 우측 상단의 메뉴(Life, Learning, Travel)은 메뉴라는 범주 안에서 세 가지 링크를 갖고 있다. 이 세 가지 요소는 같은 서식을 가지는 게 보기 좋다. 따라서 HTML에서 세 요소에 같은 클래스를 지정해두면, CSS에서는 그 클래스에만 서식을 명령하면 된다. 그렇지 않다면 Life 글씨는 하얗게~ Learning 글씨는 하얗게~ Travel 글씨는 하얗게~ 이런 식으로 각각 서식을 적용해야 할 것이다. 글씨 색깔만 적용하면 세 번 쓰는 게 별 일은 아니다. 하지만 색깔, 폰트, 배경색, 크기, 굵기 등등 여러 서식을 적용해야 한다면? 코드를 짜는 것도 상당한 반복 작업이 되고 복사 붙여넣기를 한다고 해도 코드가 길어져 보기에 좋지 않다. 코드는 간략한 게 최고다. 보다 자세한 실습을 통한 이해는 이후 CSS 선택자에 대한 설명을 한 후 진행해야겠다. 일단 class란 이런 것이다 정도만 이해하고 넘어가자.

2. id 속성

<ul>     <li class="1반" id="1반반장">a</li>     <li class="1반">b</li>     <li class="1반">c</li> </ul>

id는 말 그대로 아이디다. 로그인할 때 id를 입력하면 서버에서는 그 아이디를 바탕으로 아 이 id는 얘구나, 얘의 정보를 갖다주자라고 이해하고 일을 처리한다. 신분증은 정확히 이 사람은 이러한 이름, 생년월일, 거주지를 갖고 있는 사람이라고 구체적으로 한 명을 지정해준다. 마찬가지로 id 속성은 '단 하나의 요소'를 지정할 때 사용한다. 클래스는 여러 요소들에게 사용할 수 있다면 id는 오직 하나의 요소에만 사용할 수 있다. 다시 위의 예시로 돌아가보자. 선생님이 a,b,c 중 맨 앞인 a에게 반장을 맡기고 모자를 씌우고 싶다고 하자. a는 모두 class="1반"의 속성이 지정되어 있다. 여기에 a에게만 id="1반 반장"의 속성을 지정한다. 그럼 a는 1반이라는 클래스 값과 1반 반장이라는 아이디 값을 갖게 된다. 그리고 "1반 반장은 빨간 모자를 써라~"라고 명령하면 a는 모자를 쓴다. 활용은 나름이지만 근본적으로는 특정한 한 요소에게만 적용해야 하는 서식이 있을 때 활용하는 속성이다.

3. href 속성 for <a> 태그

<a href="www.naver.com">네이버</a>

HTML 자체가 HyperText Markup Language, 즉 하이퍼링크를 걸어주는 언어다. 따라서 <a> 태그는 HTML의 본질이라 할 수 있다. 그리고 일단 지금 들어온 페이지는 어떻게 들어왔다고 치고, 그럼 다음 페이지로 링크를 타고 넘어가야 한다. <a>의 href 속성은 그 링크를 지정해준다.

4. target 속성 for <a> 태그

<a href="www.naver.com" target="_blank">네이버</a>

<a> 태그에서 꼭은 아니지만 자주 쓰이는 속성이다. target 속성은 링크가 걸린 페이지를 어느 수준에서 열릴지를 지정한다. 링크를 클릭하면 어떤 건 해당 페이지 내에서 이동하고, 어떤 건 새 탭 또는 새 창이 열린다. 이걸 설정해주는 게 target 속성이다. target 속성에서 주로 쓰이는 값은 "_blank"이다. 새 탭, 혹은 새 창을 열어주는 것. 탭이냐 창이냐는 브라우저가 결정한다. 최신 브라우저는 대부분 탭을 연다. target 속성의 값은 "_blank", "_self", "_parent", "_top"이 있다. 각각 새 탭, 현재 탭, 부모(상위) 프레임, 최상위 프레임에서 링크가 열린다. 여기서 알 건 기본값은 "_self"고 새 탭에서 열리길 원할 땐 "_blank"를 이용해주면 된다는 것이다.

5. src 속성 for <img> 태그

<img src= "https://t1.daumcdn.net/daumtop_chanel /op/20170315064553027.png" alt="다음 로고">

이미지 태그로 이미지를 넣으려면, 해당 이미지 파일이 서버 혹은 웹상에 어디에 위치해있는지를 지정해주어야 한다. 그래야 브라우저가 찾아다가 보여준다. 이 때 위치를 지정해주는 속성이 src 속성이다. source다. 값에는 url을 입력해주면 끝. 부가적으로 이미지 태그에 자주 쓰이는 alt 속성이다. alt 속성은 대체 텍스트를 의미한다. 이미지가 표시되지 않을 때 이미지의 정보를 알려주는 텍스트다. 또 웹 접근성을 위해서도 필요한 속성이다. 시각장애인 등을 위해 페이지를 읽어줄 때, 브라우저는 img 태그를 보고 해당 위치에 이미지가 있음을 알려준다. 하지만 그 내용은 시각장애인이 알 도리가 없다. 이 때 alt 속성의 대체 텍스트를 읽어줌으로서 이 이미지가 이런 내용이구나를 유추할 수 있다.

이 외에도 많다. 정말 많은데 말했듯이 이걸 다 적을 수는 없다. 지금 작업하는 페이지를 예로 들면 colspan, rowspan, title 정도가 있다. colspan과 rowspan은 표 작업을 할 때 필요한 속성이다. 근데 그 외에는 별 게 없다. style이라는 속성으로 태그 내부에서 CSS 작업을 할 수도 있는데 웹 표준에는 안 맞아서 권장하진 않는다. width, height 등 CSS와 중복되는 속성도 있는데 이 역시 웹 표준에 안 맞는다. 기본적인 속성은 얼추 설명한 것 같고, 속성이란 이런 거구나 정도만 이해하고 넘어가면 된다.