안녕하세요~!
CSS 파일에서 style을 주는 과정에서 class, id, div 태그, link 태그 사용 방법들이 있습니다.
기본적인 HTML 코드의 요소 선언 방법으로
html body 영역에서 추가한 요소들을 css 영역에서 style을 적용할 때 원하는 요소들에게 style을 적용시켜주기 위해
class, id를 선언해주거나 div 태그 등으로 그룹을 줘서 알맞게 style을 적용시켜줄 수 있습니다.
1> 클래스 (Class)
- body 에서 선언할 때 class 명을 주고, <head>에 있는 <style>에서 해당 class 를 참조하여 해당 class에만 스타일을 적용할 수 있다.
- 클래스명 중복 가능 O : 여러 개를 동일하게 스타일을 주고 싶으면 클래스 사용이 유리
- 클래스는 .클래스명 { ~ } 으로 호출
<style>
.classA {
font-size : 50px;
color: red;
}
</style>
<p class="classA"> 클래스 A 선언</p>
<p> 클래스 B 선언</p>
2> 아이디 (id)
- body 에서 선언할 때 id를 주고, <head>에 있는 <style>에서 해당 id를 선언하여 해당 id에만 스타일 적용한다.
- class 는 중복하여 쓸 수 있으나, id는 각각 다르게 선언되어야 한다. (중복 불가 X)
- id는 #id명 { ~ } 으로 호출
<style>
.class_test {
font-size : 40px;
color: red;
}
#id_test {
font-size : 20px;
color: green;
}
</style>
<p class="class_test"> 클래스 A 선언</p>
<p> 클래스 B 선언</p>
<p class="class_test"> 클래스 C 선언</p>
<p id = "id_test"> 클래스 D 선언</p>
3> div 태그
- body에서 각각 생성한 요소들한테 그룹을 묶어 줄때 div로 묶어주고, 해당 div에 클래스명을 주어서
css에서 해당 클래스명을 호출하여 꾸며줄 수 있다.
<style>
.div_test {
font-size : 40px;
color: red;
}
.div_B_test {
font-size : 20px;
color: green;
}
</style>
<div class = "div_test">
<p class="class_test"> 클래스 A 선언</p>
<p> 클래스 B 선언</p>
</div>
<div class = "div_B_test">
<p class="class_test"> 클래스 C 선언</p>
<p id = "id_test"> 클래스 D 선언</p>
</div>
4> link 태그
- html 파일에서 <head> 영역에 <style> 태그를 같이 작성하지 않고 별도로 css 파일은 선언하여
html 파일에서는 <link> 태그를 통해 해당 css 파일을 호출하여 사용할 수 있다.
- link 태그 사용하는 이유는 html 파일과 따로 관리하여 코드도 복잡하지 않고 각각 관리가 편함
<link href="css/style_TEST.css" rel="stylesheet">
아래는 기본적인 html 태그와 CSS 개념 참고하시기 바랍니다.!!
HTML 태그, CSS
[Web] 웹 어플리케이션, HTML 정리 (a 태그, ul 태그)
[Web] 웹 어플리케이션, HTML 정리 (a 태그, ul 태그)
* WEB 개념 정리 - 클라이언트 : HTML, CSS, JAVASCRIPT, 웹브라우저 - 서버 : 미들웨어, 데이터베이스, 웹서버 웹서버가 설치되어있는 것이 서버이고, 웹브라우저는 클라이언트 개념 클라이언트는 서버로 요청하..
lovefor-you.tistory.com
감사합니다.
'IT ▶ > Java & Web' 카테고리의 다른 글
| HTML 숫자기호 ① , < > 괄호 코드 추가하기 (0) | 2020.05.27 |
|---|---|
| CSS, HTML Text 글씨 크기, 색깔, align 정렬 방법 (0) | 2020.04.24 |
| [웹 프로그래밍 개념] 웹 Web 이란? (서블릿, JSP, 컨테이너, HTTP) (0) | 2020.04.04 |
| HTML 태그, CSS <style> 사용 방법 (0) | 2020.03.30 |
| [Web] 웹 어플리케이션, HTML 정리 (a 태그, ul 태그) (2) | 2020.03.25 |