0038 클래스(class) 속성


이제 클래스(class)를 다루어보자. 

    


1. HTML에서 클래스(class)


클래스(class)요소(element)들을 특정 클래스(class)로 묶는 속성(attribute)이다. 

    

HTML에서 클래스(class) 속성(attribute)은 주로 동일한 클래스에 속한 요소들에게 동일한 스타일을 적용하는 용도로 사용된다. 

     

HTML 요소(element)에 클래스(class)를 부여하는 형식은 다음과 같다. 

     

<요소명 class="클래스명1 클래스명2 ...">


실제 사용례는 다음과 같다.

      

<hr class="answer" />

<p class="explaination">내용(content)</p>

<h3 class="urban country">내용(content)</h3>

<li class="urban metro main">내용(content)</li>


클래스(class) 속성아이디(id) 속성처럼 모든 요소에 부가될 수 있는 전역 속성(global attribute)이므로 <p><li><h2> 요소 등 서로 다른 요소들이 동일한 클래스로 묶일 수 있다

     

그런데 이렇게 요소들을 클래스로 묶다 보면 하나의 요소가 여러 클래스에 속할 때가 있기 마련이다. 그런 경우 해당 요소클래스는 여러 개의 클래스명속성값으로 갖는다. 이런 경우에는 순서에 상관없이 클래스명공백으로 띄어서 구분해주기만 하면 된다. 

    


2. CSS에서 클래스(class)


CSS에서 클래스(class)에 따라서 요소를 선택하려면 요소클래스점(.)으로 이어 다음과 같은 형식으로 클래스 선택자를 만들면 된다. 

     

요소명.클래스명 or .클래스명


클래스(class)에 속한 요소 중에서 특정 요소만 선택할 경우에는 요소명.클래스명 형식으로 선택하고, 특정 클래스에 속한 요소들을 모두 선택할 경우에는 앞의 요소명을 생략하여 .클래스명 형식으로 작성하면 된다. 

     

실제 사용례는 다음과 같다.

     

p.urban : urban클래스 p요소

h2.rural : rural클래스 h2요소

.rural : rural클래스 모든 요소

.urban : urban클래스 모든 요소

li.rural : rural클래스 li요소

li.urban : urban클래스 li요소


클래스(class) 속성(attribute)아이디(id) 속성과 마찬가지로 대소문자를 가리므로 선택자를 작성할 때는 대소문자를 정확하게 기입해주어야 한다. 

    


3. 클래스(class)아이디(id)의 차이


아이디(id)클래스(class)는 모두 HTML 요소(element)들을 구분하고 분류하여 특정하는 용도로 사용되는 속성들이지만 두 가지 큰 차이점이 있다는 점을 다시 한번 상기하도록 하자. 

     

첫 번째아이디(id)요소 1개만 고유하게 특정하지만 클래스(class)는 여러 요소들을 묶는다는 것이다.


두 번째요소는 단 한 개의 아이디(id)만 가지지만 여러 개의 클래스(class)를 가질 수 있다는 점이다. 



Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0038 클래스(class) 속성.apkg





0037 HTML 요소의 아이디(id) 속성CSS아이디(id) 선택


앞서, 요소 선택자(element selector)를 이용하여 CSS 규칙을 요소에 적용시켜 보았다. 하지만 이러한 요소 선택자는 해당 요소들을 가리지 않고 일괄적으로 모두 선택하는 문제가 있다. 

    

다음과 같이 0037_1.html 파일을 작성하여 실행해보자.

     

<!DOCTYPE html>

   

<html>

<head>

 <title>아이디 속성 선택자</title>

 <style>

  p

   color: blue;

   border: 3px solid gray;

  }

 </style>

</head>

<body>

 <p>1번 블록</p>

 <p>2번 블록</p>

 <p>3번 블록</p>

 <p>4번 블록</p>

</body>

</html>


이것을 실행하면 다음과 같이 나타난다. 



요소 선택자<p> 요소를 선택하여 스타일을 적용했기 때문에, 4개의 <p> 요소 모두 동일한 스타일의 적용을 받는다.

    


하지만 우리는 동일한 요소들에게 각각 서로 다른 스타일을 적용하고 싶다. 어떻게 해야 하나?

    

이때, 각각의 요소를 고유하게 만들어주는 아이디(id) 속성을 이용하면 된다. 

     

아이디(id) 속성에 대해서는 0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성에서 <a> 요소를 이용하여 특정 아이디(id)를 가진 요소로 이동할 수 있다는 내용으로 다룬바 있다. 

    

아이디(id) 속성(attribute)HTML 요소에 고유한 아이디(id)를 부여하는 속성이다. 따라서 그 속성상 당연히 하나의 웹페이지에서 각각의 아이디(id)는 중복되지 말고 고유해야 한다. 아이디(id)가 하나의 웹페이지에서 중복되면 웹 표준 위반이다. 

   

이러한 아이디(id) 속성을 이용하여 요소(element)가 고유해지면 CSS는 이 고유한 요소(element)를 선택하여 꾸미거나 필요한 작업을 수행할 수 있게 된다.

    

CSS에서는 특정 아이디(id)의 요소를 선택하기 위해서는 해쉬(#) 문자를 아이디(id) 속성값 앞에 붙여 해당 아이디(id)를 가진 요소를 선택하는 선택자를 만들 수 있다.

     

이제 다음과 같이 수정해서 0037_2.html보자. 

    

<!DOCTYPE html>

    

<html>

<head>

 <title>아이디 속성 선택자</title>

 <style>

  #first

   color: red;

   border: 3px solid red;

  }

  #second

   color: green;

   border: 3px solid green;

  }

  #third

   color: blue;

   border: 3px solid blue;

  }

  #fourth

   color: black;

   border: 3px solid black;

  }

 </style>

</head>

<body>

 <p id="first">1번 블록</p>

 <p id="second">2번 블록</p>

 <p id="third">3번 블록</p>

 <p id="fourth">4번 블록</p>

</body>

</html>


처음 작성한 0037.html 파일과 달리 각각의 <p> 블록에 아이디(id) 속성들이 주어졌고, 이러한 아이디(id)를 가진 요소를 선택하기 위하여 CSS에서는 #first, #second, #third, #fourth로 각각의 아이디(id) 속성을 가진 요소들에게 개별적으로 스타일을 적용하고 있다.

     

실행해보면 다음과 같이 동일했던 <p> 블록들이 각자 서로 다른 <p> 블록들로 나타난다.



아이디(id) 속성은 모든 HTML 요소에 사용할 수 있는 전역속성(global attribute)이다. 아이디(id)의 속성값최소 1개의 문자가 있어야 하며 스페이스나 탭 등의 공백(whitespace)은 허용되지 않는다이 때, 아이디(id)의 속성값은 대소문자를 가리므로 선택자를 작성할 때 주의해야 한다. 


2019. 1. 2일 아이디(id) 속성값에 대하여 다음과 같은 내용을 추가함. 

HTML 5 이후로 아이디(id) 속성값은 은 상기와 같은 규칙으로 바뀌었다고 W3C 튜토리얼에서 확인했으나 실제 아이디(id)를 숫자로 시작하거나 하이픈, 밑줄, 콜론, 마침표가 아닌 특수 문자를 쓸 경우 아이디(id) 속성이 작동하지 않는 것을 확인하고 아래와 같은 HTML 4.01 기준이 여전히 작동하고 있는 것을 확인함

아이디(id)의 속성값 항상 문자(A-Z, a-z)로 시작해서 그 뒤로 어떤 숫자(0-9), 하이픈(-), 밑줄(_), 콜론(:), 마침표(.)들이 올 수 있고 공백은 안된다. 숫자로 시작하는 실수가 많다.

    


다음은 아이디(id)의 속성값이 잘못 기입된 사례이다. 

    

id="" 최소 1개의 문자

id="fir st"  공백

id="fir!st" ← 느낌표(!)

id="1st" ← 숫자로 시작

id="Jack Daniel" ←공백


아이디(id)와 비슷한 것으로 클래스(class)가 있다. 아이디(id)는 오직 하나의 고유한(unique) 요소를 식별하기 위하여 부여하는 속성이라면 클래스는 다양한 요소들을 묶어서 특정한 클래스(class)로 만들기 위한 속성이다. 클래스(class)에 대해서는 다음에 알아보도록 하자.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택.apkg



2019/01/02 1:19 AM 아이디(id) 속성값 작성 규칙 수정 및 Ankilog 파일 수정



0020 HyperText 링크를 제공하는 앵커(anchor)의 <a>요소 02 title 추가하기


3. <a> 요소의 title 속성


title 속성은 요소(element)에 대한 추가적인 정보를 보여주기 위하여 사용하는 속성이다.

    

요소(element)title 속성을 부여하면 해당 요소 위에 마우스 포인터를 위치시킬 때 작은 툴팁(tooltip)으로 title 속성에 부여한 문구가 나타난다. 

    

툴팁(tooltip)말풍선이라고도 불리는 그래픽 사용자 인터페이스 중 하나이다. 마우스 포인터라 불리는 커서로 특정 항목을 클릭하지 않고 가리키기만 하면 조그마한 상자가 나타나 보충 설명을 보여준다. 

   

다음과 같이 <a> 요소에 title 속성을 부여해 보자. 

    

<a href="https://deliciouslearning.tistory.com/" title="Ankilog를 제공">책 씹어먹는 즐거움</a>


그러면 아래와 같이 마우스 포인터를 링크에 올렸을 때, 우리가 작성한 title 속성의 문구가 툴팁으로 나오는 것을 확인할 수 있다.

    


위 예제는 0020.html 파일이다.

     

title 속성은 <a> 요소에만 부여되는 속성이 아니라 다른 모든 요소들에도 부여될 수 있는 속성이다. 이러한 속성을 전역 속성(global attribute)이라고 한다. 

    

앞에서 배운 id 속성 lang 속성도 전역 속성(global attribute)이다.

    

title 속성은 위의 <a> 요소에서 사용된 것처럼 아래의 형식(syntax)으로 사용된다. 

    

<요소명(element) title="text">


title 속성은 툴팁으로 간단한 문구를 보여주기 때문에 속성값으로 텍스트 형식을 갖는다.

     

title 속성은 <head> 요소의 <title> 요소가 아니다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0020 a요소 02 title 추가하기.apkg






0019 HyperText 링크를 제공하는 앵커(anchor)의 <a> 요소 01 사용법 및 href 속성



1. <a> 요소의 기본적인 사용법


HTML월드와이드웹(www)에서 웹페이지를 부호화하고 HyperText 링크를 제공하는 언어이다. 이때, HyperText 링크를 제공하는 요소가 바로 앵커(anchor)를 의미하는 <a> 요소이다.

   

<a> 요소는 링크를 눌렀을 때 다른 페이지가 열려야 하므로 기본적으로 열어야할 목적지 주소와 링크로 제시될 내용이 포함되어 다음과 같은 형식으로 작성한다.

    

<a href="URL 또는 상대경로">내용(링크를 제시할 이미지 요소나 텍스트)</a>

    

<a> 요소의 내용(contents)은 이미지 요소나 텍스트 형식으로 링크가 어디로 연결될지 보여주는 라벨의 역할을 수행한다. 라벨은 브라우저에서 클릭할 수 있다는 것을 나타내기 위해 밑줄이 처진 상태로 보이고 그 위에 마우스 커서를 올리면 커서가 작은 손 모양으로 바뀐다.



2. href 속성


href 속성은 hypertext reference의 줄임말로 링크가 연결될 목적지 주소(destination address)<a> 요소에 부여하는 필수적인 속성이다. 웹 브라우저는 바로 이 href의 속성값을 읽어 목적지의 문서를 연결한다. <a> 요소에 href 속성이 없으면 웹 표준 위반이다.

   

다음의 HTML 문서를 작성해서 0019.html로 만들고  sun.jpg파일을 같은 디렉터리에 놓고 실행해보자. 

   

<!DOCTYPE html>

   

<html lang="ko">

 <head><title>0019 a요소의 href 속성</title></head>

 <body>

  <h2 id="first">a요소의 href 속성으로 다양한 링크 걸기</h1>

  <p>

   URL로 링크걸기 : 

    <a href="https://deliciouslearning.tistory.com/">책 씹어먹는 즐거움</a>

   <br /><br />

   이미지에 링크걸기(아래 사진)

   <br /><br />

    <a href="https://deliciouslearning.tistory.com/"><img src="sun.jpg" /></a>

   <br /><br />

   로컬 링크를 상대경로로 링크 :

    <a href="sun.jpg">일출사진</a>

   <br /><br />

   특정 id를 가진 요소로 이동:

    <a href="#first">id가 "first"인 요소로 이동</a>

   <br />

   빈 링크: <a href="#">빈 링크</a>

  </p>

 </body>

</html>


다음은 sun.jpg 파일이다. 




0019.html 파일은 웹 브라우저에 다음과 같이 나타난다. 

    



href 속성으로 제시할 수 있는 목적지의 형식은 URL, 상대경로, id 이동이 있는데 이를 위의 예제 웹페이지는 전부 집어넣어 보았다. 하나하나 살펴보자. 


URL로 링크걸기 : 책 씹어먹는 즐거움

   

이 부분에 해당하는 HTML<p> 요소 내부에 다음과 같이 작성된 부분이다.

    

URL로 링크걸기 : <a href="https://deliciouslearning.tistory.com/">책 씹어먹는 즐거움</a>


가장 흔히 볼 수 있는 URL로 링크 걸기이다. 외부 사이트에 링크를 만들 경우에는 URL을 이용하여 링크한다. URL에 대해서는 0015 URL 간략하게 이해하고 연습하기를 참조하길 바란다.


② 이미지에 링크걸기

   

그 다음은 이미지에 링크를 건 경우이다. 태양 사진이 있고 이를 클릭하면 본 블로그로 이동한다. 이는 <a> 요소 내부에 <img /> 요소를 아래와 같이 중첩시켜 만들었다(0019.html 파일과 sun.jpg 파일이 같은 디렉터리에 있어야 한다.).

    

이미지에 링크걸기(아래 사진)<br />

<a href="https://deliciouslearning.tistory.com/"><img src="sun.jpg" /></a>


로컬 링크상대경로로 링크

    

이 부분에 해당하는 HTML<p> 요소 내부에 다음과 같이 작성된 부분이다.

    

로컬 링크를 상대경로로 링크 : <a href="sun.jpg">일출사진</a>


상대경로에 대해서는 앞의 0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성의 하단부에 정리된 src 속성에서 상대경로 작성법과 동일하다.

   

클릭하면 서버 내에 웹페이지 파일과 같은 디렉터리에 있는 sun.jpg 파일을 브라우저로 열게 된다. 이렇게 같은 사이트 내에서 서버 내부의 파일로 연결하는 링크를 로컬 링크(local links)라고 한다. 

    

로컬 링크의 경우에는 다음과 같은 이유에서 href 속성의 속성값으로 URL이 아닌 상대경로를 사용하도록 권장된다. 

     

html 소스가 상대적으로 짧아 가독성이 좋다

웹 서버를 옮기거나 URL이 변경되어도 디렉터리 구조를 그대로 유지하면 내부의 링크가 여전히 유효


④ 특정 id를 가진 요소로 이동

    

이 부분에 해당하는 HTML<p> 요소 내부에 다음과 같이 작성된 부분이다.

    

특정 id를 가진 요소로 이동: <a href="#first">id가 "first"인 요소로 이동</a>


이를 클릭하면 제목(<h2>요소)으로 되어 있는 “a요소의 href 속성으로 다양한 링크 걸기”로 이동한다. 이는 다음과 같이 제목의 요소(<h2>요소)아이디(id) 속성 "first"가 부여되어 있기 때문이다. 즉, href 속성값으로 "#first"가 부여되어 있으면 같은 페이지에 있는 요소 중에 아이디(id)"first"인 요소로 이동한다. 

   

<h2 id="first">a요소의 href 속성으로 다양한 링크 걸기</h1>


아이디(id) 속성은 원하는 요소(element)를 다른 요소와 구별되어 그 자체로 고유하게 만드는 속성이다. 똑같은 <h1> 요소라고 해도 아이디(id)를 통해서 다른 <h1> 요소와 구별되는 것이다. 나중에는 이 아이디(id) 속성을 이용하여 CSS로 특정 id의 요소만 스타일링 하거나, Javascript로 특정 id의 요소만 조작하는 등으로 응용할 수 있어 가장 많이 사용되는 속성(attribute) 중에 하나이다.

    

HTML 웹페이지의 요소에 필요한 아이디(id) 속성을 부여하고 이제 <a> 요소의 href 속성에 "#아이디" 형태의 문자열을 속성값으로 부여하면 같은 페이지에 있는 해당 아이디(id)를 가진 요소로 바로 이동할 수 있다. 

    

아이디(id)로 이동은 같은 페이지 내부의 이동에만 사용되는 것은 아니다. 앞서 배운 URL 뒤에 "#아이디" 형태의 문자열을 붙이거나, 상대경로의 뒤에 "#아이디" 형태의 문자열을 붙여서 다른 페이지의 해당 아이디(id)를 속성으로 가진 요소로 바로 이동할 수 있다. 가령, 다음과 같다.

    

https://www.ankilog.com/index.html#ankimanual

0019.html#first


아이디(id) 속성은 거의 대부분의 요소에 부여할 수 있고, 하나의 웹페이지에서 아이디(id)는 중복되지 말고 고유해야 한다. 아이디(id) 속성이 단일 웹 페이지에서 중복되어 있는 것은 웹 표준에 어긋난다. 만일 id 속성이 단일 웹페이지에서 중복되어 있으면 가장 먼저 나오는 요소로 이동한다.

    

아이디(id) 속성은 대소문자를 가리므로 외부에서 특정 아이디(id)를 대상으로 조작할 경우 대소문자를 가려 아이디(id)를 지칭해주어야 한다.

    

아이디(id) 속성의 속성값은 항상 문자(A-Z, a-z)로 시작해야 하고 그 뒤는 어떤 문자나, 숫자(0-9), 하이픈, 밑줄, 콜론, 마침표들이 올 수 있고 최소 1개 이상의 문자로 이루어져야 하며 공백은 없어야 한다. 특히, 아이디(id) 속성값을 숫자로 시작하는 실수가 많다.(W3C 튜토리얼에서는 이와 같은 속성값의 규칙을 HTML5 이전의 제약이고 현재는 숫자로 시작하는 id도 가능하다고 언급하고 있지만 현재도 이 규칙이 크롬과 파이어폭스에 규칙이 유효하게 작동하는 것을 확인함)  ← 2019년 1월 2일 수정함

    

⑤ 빈 링크

    

빈 링크는 <a> 요소에 하이퍼링크 기능을 제거하고 사용하는 경우에 사용한다. 웹 표준<a> 요소에 반드시 href 속성을 요구하기 때문에 href의 속성값에 "#"을 입력하여 웹 표준을 준수하는 빈 링크를 만든다.

    

<a href="#">빈 링크</a>


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0019 a요소 01 사용법 및 href 속성.apkg


2019/01/02 am 1:27 본문 및 Ankilog 파일에 id 속성값으로 올 수 있는 문자들 문구 수정




+ Recent posts