반응형
0. 클래스 이해하기
1. head -> style -> class
2. span에 class 속성넣기
...
0. 클래스 이해하기
html 클래스는 꼬리표같은 느낌인거같다.
자바 클래스 같은건가/..? 했는데 전혀 달랐고,
차라리 꼬리표랑 비슷했다.
먼저 위에서 정의해주고, 밑에서 땡겨쓰는 느낌
그리고 클래스를 공부하면서
CSS를 얼른 공부해야겠다고 생각했다.
결국 CSS와 Java Script를 배워야 html을 완벽하게 공부하게 되는 걸 이제 깨달았다.
html 맛만 보려고 했는데 망했다.
...
1. head -> style -> class
<!DOCTYPE html>
<html>
<head>
<style>
.meat {
background-color: rgb(236, 171, 110);
color: white;
padding: 10px;
}
.vegetable {
background-color: rgb(162, 241, 155);
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>클래스 속성</h2>
<h2 class="meat">스테이크</h2>
<p>스테이크는 고기입니다.</p>
<h2 class="meat">삼겹살</h2>
<p>삼겹살은 맛있습니다.</p>
<h2 class="vegetable">아보카도</h2>
<p>아보카도는 극혐입니다.</p>
</body>
</html>
- <head>에 <style>태그로 class를 정의해준다.
- 여러 개 정의해줄 수 있다.
- <body>에서 정의한 class를 속성으로 사용해준다.
- class를 적용해주고 싶은 태그의 속성으로 적용해주면 된다.
...
2. span에 class 속성넣기
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 200%;
color: rgb(248, 229, 178);
}
</style>
</head>
<body>
<h1>나는 <span class="note">배가고파</span> 요</h1>
<p>핑계가 아니구요 <span class="note">배가 고파서</span> 공부하기 실헝</p>
</body>
</html>
- span 태그를 이용하면 이렇게 단락 사이에 강조문구를 넣을 수 있다.
반응형
'컴퓨터 > Front (Html, JS)' 카테고리의 다른 글
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (2) HTML 꾸미기(CSS없이 꾸미기) (0) | 2021.11.16 |
|---|---|
| [html] 코딩애플 HTML/CSS All-in-one 강의노트 : (1) brackets, HTML 기본 (0) | 2021.11.15 |
| [html] html 기본 문법 익히기_8. html 리스트 생성, 번호 지정, 정렬 (0) | 2021.10.16 |
| [html] html 기본 문법 익히기_7. html div와 span (0) | 2021.10.15 |
| [html] html 기본 문법 익히기_6. html 에 데이터 테이블 (표) 셀 병합 (0) | 2021.10.14 |
댓글