html에 css 스타일을 적용할 때 내부 스타일 정의를 사용할 수 있다. style 태그를 이용하여 html 태그에 적용할 스타일을 적용하고 html 태그에는 선택자인 id 와 class 명을 지정하면 된다. 인라인 스타일을 이용하는 것보다 코드를 줄이고 가독성을 높일 수 있지만, 단점으로 하나의 html 파일에서만 사용할 수 있다.
html css 적용 내부 스타일 정의 사용 방법
using html css internal style
html 태그에 css 스타일을 적용하는 방법 중 인터널 방식이 있다.
인터널 방식은 영어로 internal 이라 하며, css 내부 스타일 정의라고도 한다.
내부 스타일 정의 방식은 head 태그에 style 태그를 두고 css 스타일을 정의하여 사용하는 방법으로 html 태그의 id 또는 class 등의 선택자를 통해 접근하여 css 스타일을 적용하는 방식을 말한다.
html 태그에 직접 css 스타일을 지정하는 inline 방식보다 가독성있는 코드를 만들 수 있다.
단점이라면 하나의 html 파일 내에서만 사용할 수 있기 때문에 css 스타일 코드를 정규화 했을 경우 나중에 외부로 분리하는 작업을 해 주어야 할 필요가 있다.
css internal style 내부 스타일 정의 방법
내부 스타일 정의인 internal 정의 방식은 선택자를 사용하여 지정할 수 있다.
이 때 선택자는 html 태그의 id 또는 class 를 지정하면 된다.
id 와 class 의 차이를 잠깐 언급한다면 하나의 html 문서에서 유일무이한 단 하나의 요소는 id 로 지정하며 반복되는 공통의 요소들은 class 로 지정하면 된다.
- id
html 문서 내에 단 하나의 요소 지정
선택자는 샵( # ) 으로 시작한다. - class
html 문서 내에 여러 개의 요소 지정
선택자는 점( . ) 으로 지정한다.
방법은 아래
<head>
<style>
선택자 {
css 요소 : 속성 ;
}
html_태그명 {
css 요소 : 속성 ;
}
#html_태그_id {
css 요소 : 속성 ;
}
.html_태그_class {
css 요소 : 속성 ;
}
</style>
</head>
<body>
<p id="선택자" class="선택자">~~</p>
</body>샘플코드
위의 내용을 이용하여 css 스타일을 지정해 보도록 한다.
internal 내부 정의 방식은 style 태그를 이용하여 html 태그에 css 스타일을 지정하는 것을 의미한다.
아래의 코드는 각 선택자마다 다르게 스타일을 적용하고 있다.
태그를 지정하는 방법 id 를 이용하는 방법, class 를 이용하는 방법으로 스타일을 지정하고 있다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
p {
background-color:#ff0000;
color:#000000;
font-weight: bold;
}
#tagid {
background-color:#00ff00;
color:#000000;
font-weight: bold;
}
.tagclass {
background-color:#0000ff;
color:#ffffff;
font-weight: bold;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<!-- 제목입니다 -->
<h2>
html css 표현<br/>
</h2>
<!-- // -->
<!-- 문서 내용 -->
<p>
태그명으로 지정
</p>
<p id="tagid">
id 선택자 지정
</p>
<p class="tagclass">
class 선택자 지정
</p>
<!-- // -->
</div>
</body>
<!-- // -->
</html>
<!-- // -->선택자를 이용해 html 태그에 스타일을 적용한 결과를 보자.
중복이 되면 덮어쓰기가 되는 것을 볼 수 있으며 태그명, id, class 의 선택자를 이용한 html 태그에 스타일을 적용한 것을 볼 수 있다.
'programming > web' 카테고리의 다른 글
| html css 글자 폰트 스타일 지정 방법 using html font style (0) | 2022.04.23 |
|---|---|
| html css 외부 스타일 적용 사용 방법 using html css external style (0) | 2022.04.21 |
| HTML CSS inline 스타일 적용 태그에 직접 스타일 지정하는 방법 using html css inline style (0) | 2022.04.16 |
| html에 css 적용하는 3가지 방법 adding css style to html (0) | 2022.04.13 |
| html hsl 사용하여 색 지정하기 using html hsl color (0) | 2022.04.09 |
댓글