Appia의 IT세상

[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div) 본문

Programming/HTML&CSS

[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)

Appia 2020. 7. 27. 07:08
반응형

[초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)

 

이번 포스팅에서는 태그 항목을 그룹화 하는 방법에 대해서 살펴보고자 합니다. 먼저 그전에 각 태그 항목들을 크게 2가지 형태로 알아보도록 하겠습니다.

 

Block level

화면에는 전후 줄 바꿈이 있는 것처럼 보이는 블록 요소

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>

 

Inline level

문장내에서 표현 가능한 요소

<b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd> <var>

 

 

<그룹화>

이와 더불어 각 태그들을 기반으로 그룹화 하는 방법에 대해서 함꼐 살펴보겠습니다. 그룹화를 사용하는 목적은 크게 각 스타일들을 동일하게 적용하기 위함입니다. 즉, 그룹으로 설정된 부분들에 대해서 글자색들은 한번만 설정해도 작동으로 적용되게 할 수 있습니다. 

그룹화에 사용되는 2가지 태그가 사용이 됩니다. Html 에서는 크게 2가지 태그를 사용합니다.

  1. <div>
  2. <span>

그럼 간단한 예시를 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: red;">
        <h1>첫번째 항목</h1>
        <ul>
            <li>Appia</li>
            <li>Appia1</li>
            <li>Appia2</li>
            <li>Appia3</li>
        </ul>
    </div>
    <div style="color: blue;">
        <h1>두번째 항목</h1>
        <ul>
            <li>Appia</li>
            <li>Appia1</li>
            <li>Appia2</li>
            <li>Appia3</li>
        </ul>
    </div>
</body>
</html>
cs

위의 부분을 작성하시면 다음과 같은 결과가 나타납니다. 

div를 이용한 그룹화한 결과 

그럼 이번에는 span을 이용해보도록 하겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>오늘 <span style = "color:red">빨간색</span> 옷이 업청 입고 싶었지만, 
        <span style = "color:blue">파란색</span> 옷을 입었다. </p>
</body>
</html>
cs

위에 결과는 다음과 같이 나타납니다. 

span 태그 활용한 결과 

위의 부분을 바탕으로 다양한 부분에 여러곳에 적용이 가능할 것으로 보입니다.

이번 포스팅은 [초보HTML배우기 10]HTML - 태그 항목 그룹화 하기(span, div)라는 주제로 간단히 포스팅을 해봤습니다. 혹 궁금하신 점이 있으시면 언제든지 댓글 및 방명록에 글남겨주시길 바랍니다. 감사합니다. 

 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 12]HTML - Form - Text Input 생성하기 (input, textarea)  (0) 2020.07.31
[초보HTML배우기 11]HTML - 이미지를 배경 설정하기  (0) 2020.07.29
[초보HTML배우기 09]HTML - HTML에 하이퍼 링크(hyper-link)연결하기  (0) 2020.07.25
[초보HTML배우기 08]HTML - HTML에 리스트(List) 나열하기  (0) 2020.07.23
[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기  (0) 2020.07.21
'Programming/HTML&CSS' Related Articles more
Comments