본문 바로가기
programming/web

HTML CSS inline 스타일 적용 태그에 직접 스타일 지정하는 방법 using html css inline style

by 개코 - 개발과 코딩 2022. 4. 16.

html 태그에 css 스타일을 직접 적용하는 방법을 인라인 inline 방법이라고 한다. 인라인 방법으로 html 태그에 css 스타일을 적용하면 코드가 길어지는 단점은 있지만 직관적으로 바로바로 화면을 테스트해 볼 수 있다. 당연히 인라인으로 스타일을 적용한 후에는 별도로 외부로 분리하는 것이 좋다.

HTML CSS inline 스타일 적용 태그에 직접 스타일 지정하는 방법
using html css inline style

css 스타일은 밋밋한 웹페이지를 화려하게 꾸밀수도 정갈하게 꾸밀수도 있다.

웹페이지 꾸미기를 위한 css 스타일을 적용하는 방법이 3가지가 있지만 직관적인 방법은 태그에 직접 style 속성으로 지정하는 방법이다.

이 방법은 html 코드가 지저분해 질 수 있지만 직관적인 테스트를 하기에는 적합하다.

html 웹사이트에 css 스타일을 지정하는 방법 3가지에 대한 개략적인 내용은 아래 내용을 참고한다.

css inline 인라인 스타일

html 태그에 직접 css 스타일을 적용하는 방법은 인라인 inline 방법이다.

태그에 직접 style 속성을 지정하고 style 에 css 스타일에 사용하는 요소와 속성을 지정하면 된다.

html 에 사용되는 모든 태그에 거의 모든 css요소를 사용할 수 있다.

문법은 아래와 같이 단순하다.

스타일 속성과 요소가 길어질 수록 style 속성에 들어가는 css 스타일 코드 또한 길어진다.

<태그명 style="css요소 : 속성; css요소 : 속성; css요소 : 속성; ....."/></태그명>

샘플코드

위의 문법을 이용하여 html 태그에 직접 css 스타일을 적용해 본다.

html 태그에 직접 css 스타일을 적용하는 방법은 인라인 inline 방법이며 예제 코드를 보면 알겠지만, css 스타일 요소가 추가될수록 코드는 길어진다.

여기서는 인라인 스타일을 적용하는 방법에 대한 예제를 설명한다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html><!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <!-- 제목입니다 -->
            <h2>
                html css 표현<br/>
            </h2>
            <!-- // -->
            <!-- 문서 내용 -->
            <p id="inlineStyle" style="background-color:#ff0000; color:#ffffff; font-weight:bold;">
                태그에 직접 연결 inline 방식
            </p>
            <!-- // -->
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

코드를 보면 알겠지만 문단 태그인 p 에 style 요소를 추가하였다.

css 적용을 위한 style 에는 배경색과 글자색 폰트를 위한 css 요소와 속성을 추가했다.

당연히 코드가 길어지는 단점이 있지만 직관적으로 스타일을 검사할 수 있다.

결과 화면을 보자.

반응형

댓글