Multi Developer SuHo

HTML <div>, <span> 태그 & class and id 본문

html5+CSS3

HTML <div>, <span> 태그 & class and id

Dreaming Developer Student 2024. 2. 4. 16:48
SMALL

안녕하세요~  오늘은 HTML에서 사용되는  div 태그와 span 태그, class 와 id 에 대해 살펴보겠습니다.
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


div 태그와 span 태그는 웹 페이지의 특정 부분을 그룹화하는데 주로 사용되는 태그들입니다. 먼저 div 태그부터 보겠습니다. 
div 태그 - 블록 태그로 , 주로 레이아웃을 구성하거나 큰 덩어리의 내용을 그룹화하는 데 사용됩니다. div 태그로 묶인 요소는 자동으로 새로운 줄에서 시작하며, 전체 페이지의 가로 너비를 차지합니다. 따라서, div는 주로 섹션, 헤더, 푸터 등 큰 블록을 만드는 데 사용됩니다.

div 태그를 사용한 소스코드 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
<div>
<h1>2024년 값진년</h1>
<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.</br>
  Doloribus in expedita adipisci repellat possimus.</br>
  Qui sed iusto vel possimus aliquam,
  expedita pariatur minima voluptatem nulla eum exercitationem asperiores omnis aspernatur!</br>
 2024년 값진년도 행복한 꽃길만 걸으시길 바랍니다~ html, CSS3, 자바스크립트, 웹 페이지 구현, 아무말이라도 해보겠습니다.</br>
 네모난 티비, 네모난 냉장고, 주위를 둘러보면 모든 것들 다 네모난 것들 뿐인데~</br>
</p>
</div>
</body>
</html>

 

실행해보면 다음과 같이 모양이나 배치는 달라진게 없습니다.  제목과 문단이 하나의 그룹으로 묶여 있는지 확인해보겠습니다.

개발자 도구로 확인하겠습니다.


이렇게 제목과 문단이 하나로 그룹화되어 있습니다.


다음은 span 태그입니다. 
span 태그 - 인라인 태그로, 텍스트 내의 작은 부분을 그룹화하는 데 사용됩니다. span 태그로 감싸진 부분은 새 줄에서 시작하지 않고, 필요한 만큼의 너비만 차지합니다. 따라서, span은 주로 텍스트 내에서 특정 단어나 문장을 스타일링하는 데 사용됩니다. 

span 태그를 이용한 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
<div>
<h1>2024년 값진년</h1>
<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.</br>
  Doloribus in expedita adipisci repellat possimus.</br>
  Qui sed iusto vel possimus aliquam,
  expedita pariatur minima voluptatem nulla eum exercitationem asperiores omnis aspernatur!</br>
 <span>2024년 값진년도 행복한 꽃길만 걸으시길 바랍니다~</span> html, CSS3, 자바스크립트, 웹 페이지 구현, 아무말이라도 해보겠습니다.</br>
 네모난 티비, 네모난 냉장고, 주위를 둘러보면 모든 것들 다 네모난 것들 뿐인데~</br>
</p>
</div>
</body>
</html>



실행하면 <span> 태그로 감싸진 부분만 블록이 잡힙니다.

다음은 class와 id 속성에 대해 설명하겠습니다.
class와 id는 div와 span 태그와 같은 HTML 태그에 속성으로 추가할 수 있습니다. CSS에서 특정 스타일을 적용하거나 자바스크립트에서 특정 동작을 제어할 수 있습니다.
class 속성 -  하나의 HTML 요소에 하나 이상의 클래스를 지정할 수 있습니다. 여러 개의 클래스는 공백으로 구분하여 지정합니다.
id 속성 - 하나의 HTML 요소에 하나의 id만 지정할 수 있습니다. 

쉽게 말하면 class와 id 속성은  "태그에 이름을 붙일 때 사용되는 속성" 이라고 보시면 됩니다.

class 와 id 속성을 부여한 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
</head>
<body>
<div id="smile">
<h1 class="top">2024년 값진년</h1>
<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.</br>
  Doloribus in expedita adipisci repellat possimus.</br>
  Qui sed iusto vel possimus aliquam,
  expedita pariatur minima voluptatem nulla eum exercitationem asperiores omnis aspernatur!</br>
 <span>2024년 값진년도 행복한 꽃길만 걸으시길 바랍니다~</span> html, CSS3, 자바스크립트, 웹 페이지 구현, 아무말이라도 해보겠습니다.</br>
 네모난 티비, 네모난 냉장고, 주위를 둘러보면 모든 것들 다 네모난 것들 뿐인데~</br>
</p>
</div>
</body>
</html>






이렇게 지정한 이름으로 클래스와 아이디가 부여된 결과를 도출할 수 있습니다.
클래스와 아이디 속성은 HTML 요소에 스타일을 적용하거나 자바스크립트를 이용하여 동작을 제어하는 등의 작업을 수행할 때 많이 사용됩니다. 
클래스와 아이디 속성을 이용한 스타일 적용 소스코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style>
        #smile { background-color:violet}
        .top { color: rgb(174, 249, 11);}
    </style>
</head>
<body>
<div id="smile">
<h1 class="top">2024년 값진년</h1>
<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.</br>
  Doloribus in expedita adipisci repellat possimus.</br>
  Qui sed iusto vel possimus aliquam,
  expedita pariatur minima voluptatem nulla eum exercitationem asperiores omnis aspernatur!</br>
 <span>2024년 값진년도 행복한 꽃길만 걸으시길 바랍니다~</span> html, CSS3, 자바스크립트, 웹 페이지 구현, 아무말이라도 해보겠습니다.</br>
 네모난 티비, 네모난 냉장고, 주위를 둘러보면 모든 것들 다 네모난 것들 뿐인데~</br>
</p>
</div>
</body>
</html>


class 를 불러올 때는  .(점)을 붙이고 불러옵니다.
id 를 불러올 때는 "#"을 사용하여 불러옵니다.


스타일 적용한 실행결과 입니다.
클래스 속성은 "다른 태그에 중복적으로 사용할 수 있다"는 특징이 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style>
        .top { 
            color: rgb(50, 2, 155);
           
        }
        .lighter {
            font-weight: lighter;
            font-size: 3em;
        }
        
    </style>
</head>
<body>
<div id="smile">
<h1 class="top">2024년 값진년</h1>
<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.</br>
  Doloribus in expedita adipisci repellat possimus.</br>
  Qui sed iusto vel possimus aliquam,
  expedita pariatur minima voluptatem nulla eum exercitationem asperiores omnis aspernatur!</br>
 <span class="top lighter">2024년 값진년도 행복한 꽃길만 걸으시길 바랍니다~</span> html, CSS3, 자바스크립트, 웹 페이지 구현, 아무말이라도 해보겠습니다.</br>
 네모난 티비, 네모난 냉장고, 주위를 둘러보면 모든 것들 다 네모난 것들 뿐인데~</br>
</p>
</div>
</body>
</html>

 


다음과 같이 컬러를 지정한 top 클래스가 적용이 되었고, 폰트 크기를 lighter 크기만큼 적용한 lighter 클래스도 적용된 것을 보실 수 있습니다.

아이디(id) 는 클래스랑은 다르게 문서 전체에서  한 번만 선언되고 사용할 수 없고,  이미 사용하고 있는 아이디를 다른 태그의 중복으로 사용할 수 없고, 태그당 하나의 아이디만 적용시킬 수 있습니다.  다만  하나의 태그에 아이디와 클래스를 각각 적용시키는 것은 가능합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 실습</title>
    <style>
        .top { 
            color: rgb(50, 2, 155);
           
        }
        .lighter {
            font-weight: lighter;
            font-size: 3em;
        }
        
    </style>
</head>
<body>
<div id="smile"  class="top lighter">
<h1 class="top">2024년 값진년</h1>
<p>
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.</br>
  Doloribus in expedita adipisci repellat possimus.</br>
  Qui sed iusto vel possimus aliquam,
  expedita pariatur minima voluptatem nulla eum exercitationem asperiores omnis aspernatur!</br>
 <span class="top lighter">2024년 값진년도 행복한 꽃길만 걸으시길 바랍니다~</span> html, CSS3, 자바스크립트, 웹 페이지 구현, 아무말이라도 해보겠습니다.</br>
 네모난 티비, 네모난 냉장고, 주위를 둘러보면 모든 것들 다 네모난 것들 뿐인데~</br>
</p>
</div>
</body>
</html>



이런 방법으로 하나의 태그에  id와 클래스 속성을 적용할 수 있습니다.

이렇게 div 태그와 span 태그, class와 id 속성에 대해 알아보았습니다.
이상입니다!!

LIST
저작자표시 (새창열림)

'html5+CSS3' 카테고리의 다른 글

HTML 레이블 태그(<label>), 라디오 버튼(radio), 체크박스(checkbox) 활용  (0) 2024.02.09
HTML 폼(form) 태그 , <input>(위젯)  (0) 2024.02.05
HTML 이미지<img>, 비디오<video>, 오디오 태그<audio>  (0) 2024.02.03
HTML 링크 태그, 리스트 태그  (2) 2024.02.01
HTML 주석 처리, 인라인 태그, 블록 태그  (2) 2024.01.29
'html5+CSS3' Related Articles more