HTML 기초다지기2

1. attribute(속성)

HTML 기초다지기 1에서 태그를 명령어라고 설명하였는데,

명령어에 해당 하는 태그들은 각각 자신이 할 수 있는 옵션들이 있다.

이러한 옵션들에 대한 항목들을 attribute라고 말한다.

예를 들면 

<a> 태그는 다른 페이지나 같은 페이지 위치로 이동하는 하이퍼링크 기능을 제공하는데,

href 라는 attribute(속성)을 통해 실제 웹페이지에서는 초록색의 텍스트가 보이지만,

해당 텍스트를 선택하면 빨간색으로 작성된 href 의 속성 값이 가지는 경로로 이동하게 된다.

 

HTML에서 지원하는 더 자세한 태그와 속성 값들은

w3school(HTML Tutorial (w3schools.com))을 통해 확인할 수 있다.

 

반응형

 

 

2. style 에서 class 로 개념 확장하기

 class는 원하는 style을 일괄 적용하기 위해 사용하는 attribute 중 하나이다.

 그래서 class를 알기 위해선 style을 먼저 알아야 하는데,

 우리가 일상생활에서  "어 저 친구 스타일 좋은데?" 라고 말할 때 사용하는 느낌과 유사한 용도이다.

 style atrribute를 통해 해당 태그에 대한 글자 색상, 크기, 테두리, 여백 등 다양한 설정을 옵션으로 줄 수 있다.

 

1) Inline Style CSS(Style Attribute 이용)

위의 코드를 보면, 같은 <p> 코드로 구성되어 있지만,

style이라는 attribute의 속성값에 따라 배경색, 글자색 등이 다르게 나타나는 것을 알 수 있다. 

이렇게 각각의 태그에 개별로 style을 적용할 수 있다.

이런 attribute를 이용한 방법을 inline style css라고 한다.

(*가장 단순하고 쉽게 적용할 수 있지만, 관리적인 측면이나 일관성에서 부족하기 때문에

이방법 보다는 규모에 따라 class를 이용하는 방법과 

css 파일을 다른 파일로 분리한(style sheet) 형태를 권장한다.)

,

우리가 접하는 잘만들어진 웹페이지는 수십, 수백개의 태그를 가지고 있고, 

각각의 색상과 font 등 style을 일관성있게 유지하고 있다.

 

그럼 이런 가정을 해보자.

위와 같이 html 내에 <p>태그를 200개 정도를 가지고 있는데,

해당 font color를 모두 blue로 변경해야 한다면??

200번을 수정해야할까?

그래, 번거롭긴 하지만 200번 정도는 마음만 먹으면 할 수 있는 횟수 일 수 있다.

그럼 20,000번이라면? 분명히 이건 비효율적인 방법이다.

 

그럼 이러한 반복된 작업이 예상되는 비효율적인 방법을 어떻게 개선할 수 있을까?

그 방법은 style을 개별로 할당하지 않고 일관성 있게 정의해두는 것이다.

그러한 정의를 class 이라고 한다.

class를 이용하게 되면 얼마나 시각적으로도 일관성있고 관리측면에서도 훨씬 효율적인지 살펴보자.

 

2) 내부 스타일 (<style> 태그 이용)

여기부터는 시각적인 편의를 위해 메모장에서 작성하던 코드를 Visual Studio Code에서 작성해보겠다.

먼저 각 태그별 style을 적용하는 경우, 우리는 위에서 배운 내용대로 <p> 태그에 style 의 속성을 지정해 줄 수 있다.

(1~100은 유사한 항목이 100개가 있다는 의미이다.)

이 내용을 class를 이용해서 표현하게 되면

1. 상단 head 부분에 <style> 태그를 만들어주고,

2. .class이름(ex. color_set1) {attribute} 를 지정해준 후, </style>로 태그를 닫아준다.

  (* class이름 앞에 있는 특수부호는 '.' 외에도 약속된 기호들이 있으며 이후 다시 설명을 진행하겠다.)

3. 해당 class를 적용하고자 하는 태그에 class = class이름(ex. color_set1)을 정해준다.

해당 결과를 비교해보면 각각의 <p> 태그에 style을 바로 적용했을 때와 같은 결과가 나타남을 알 수 있다.

 

그럼 굳이 이렇게 하는 이유가 뭘까?

그건 내용을 일관되게 수정할 때 엄청난 효율성을 보이기 때문이다.

글자 배경색을 green에서 orange로 변경해보겠다.

만약 첫번째 <p> 태그의 style attribute를 변경하려 하면 <p> 태그가 있는 만큼

(예제에서는 100번)을 수정해야 하고, 수정을 다하고 난 뒤에 빠뜨린게 없는지 확인을 해야할 수 도 있다.

그런데 두번째 <style> 태그를 사용하는 방법에서는 <style> 태그만 변경하면 되는 효율성과

누락되는 내용도 없을 거라는 장점이 있다.

style 태그(class attribute)만 변경했음에도 완벽

 

여기까지가 style attibute를 class(style 태그)로 변경하는 방법이다.

 

이제 마지막 단계인 class(style태그)를 css(다른 파일)로 일괄 관리하는 방법에 대해 배워보자.

분량 조절 실패로....다음 포스팅에 계속