development/html javascript CSS

[HTML] inline Element

Happyoon ~ 2021. 10. 6. 23:28
728x90
반응형

앞서 말했듯이 inline Element는 한 줄 안에서 좌에서 우측으로 쌓아가는 요소 이고, 각각의 필요한 만큼의 공간을 차지한다.

 

1) span의 필요성에 대한 예시

Step04_inlineElement.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>인라인 요소에 대해 알아보기</h1>
    <span>하나</span>
    <span style ="color:red">두울</span>
    <span style = "font-weight:bold">세엣</span>
    <span>span요소는 인라인 요소입니다.</span>
    <!-- 인라인 요소: 필요한 만큼의 폭을 갖고 왼쪽에서 우측으로 쌓이는 요소들
    -->
    <p>
        하나 두울 세엣 span요소는 인라인 요소입니다.
    </p>
    <!-- span이 필요한 이유: 문장 내의 단어 요소 개별로 돋보이게 할 수 있다. -->
</body>
</html>

 

실행 결과

span을 사용하면 문장 내의 요소 개별로 돋보이게 할 수 있음!! 

2) id attribute  / <b> vs <strong> / <i> vs <em>

Step04_inlineElement2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step04_inlineElement.html</title>
    <style>
        #one{
            color: red;
            font-weight: bold;
            font-style: italic;
        }     
    </style>
</head>
<body>
    <h1>인라인(inline) 요소에 대해 알아보기</h1>
    <span>하나</span>
    <span>두울</span>
    <span>세엣</span>
    <span>span 요소는 인라인 요소 입니다.</span>

    <p>하나 두울 세엣 span 요소는 인라인 요소 입니다.</p>
    <p>하나 두울 세엣 span 요소는 <span id="one">인라인</span> 요소 입니다.</p>

    <h2>기본 스타일을 가지고 있는 인라인 요소</h2>
    <!-- b 요소는 단순히 굵은 글씨 -->
    <p> 천리길도 <b>한걸음</b> 부터</p>
    <!-- strong 요소는 굵은 글씨 + 강조 의 의미도 가지고 있다. -->
    <p> 천리길도 <strong>한걸음</strong> 부터</p>

    <!-- i 요소는 단순히 이텔릭체 -->
    <p> 여러분 <i>즐거운</i> 코딩이 시작 되었어요</p>
    <!-- em 요소는 이텍릭체 + 강조 의 의미도 가지고 있다. -->
    <p> 여러분 <em>즐거운</em> 코딩이 시작 되었어요</p>
</body>
</html>

style을 위에서 지정하고 id 속성을 사용하여 빠르게 활용할 수 있다. 

반응형