📌CSS 적용법 📌
1. 인라인 스타일
- html 요소 내부에 Style 속성을 적용하는 방법
EX) <p Style="color:blue" >...</p>
해당 요소에만 스타일이 적용
- 입력 코드-
text-align > 텍스트 위치
font-size > 텍스트 폰트 크기
<!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>인라인 스타일t</title>
</head>
<body>
<h2 style="text-align: center; font-size: 50px; color: purple;">인라인 스타일</h2>
<p style="text-align: center; background-color:chartreuse;"> html 요소 내부에 style 속성을 사용하여 적용하는 방법</p>
</body>
</html>
- 출력 결과-
2. 내부 스타일
- HTML 문서의 <head> 태그 안에 <Style> 태그를 사용해서 적용하는 방법
해당 문서에만 스타일을 적용, 문서에 있는 모든 요소의 스타일을 한번에 관리 가능
- 코드 입력-
<!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>내부 스타일</title>
<style>
h2{
font-size: 50px;
color: red;
}
p{
font-size: 20;
color: blue;
background-color: black;
}
ul{
list-style: none;
color: blueviolet;
}
il{
display:inline-block;
margin-right: 20px;
font-weight: bold;
color: lightpink;
}
</style>> 스타일 태그 안에 각각의 <body> 안에 붙여진 태그를 삽입한다.
- 출력 결과 -
> 여담이지만 ㅋㅋㅋ수업시간때 코드작성하면서 선생님이 학생분들에게 색을 추천받아서 나온 조합... 빵터짐🤣
3. 외부 스타일
- 웹 사이트 전체의 스타일을 하나 혹은 최소한의 파일에서 변경
( 스타일이라는 폴더 만들고 그 안에 - .css 라는 스타일 시트를 하나 만들어 거기에 다가 다 입력을 함)
<head> 태그 안에 <link> 태그를 사용하여 연결하고 적용하는 방법
ex)
<head>
<link rel="stylesheet" href= ./css/ style. css > <-- 해당 경로에 있는 css가 문서적용
< 파일명 입력 / . > 폴더 경로 찾아가기 / 폴더이름 / 폴더 안 파일 이름 >
</head>
- 입력 코드-
<!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>외부스타일</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2> 외부 스타일 </h2>
<p> css 를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
- CSS 코드-
- 출력 결과-
📌CSS 의 선택자 📌
1. 전체 선택자
- 스타일 모든 요소에 적용
디테일 한 스타일은 전체 선택자와 body에 적용된 스타일보다 우선시 됨
ex ) * 하고 입력되는 것들이 = 전체 선택자로 됨
*{
css 문법
}
- 코드 입력-
<!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>전체 선택자</title>
<style>
h2{
color: olive;
font-size: 50px;
font-weight: bold;
}
*{
color: red;
}
</style>
- 출력 결과 -
2. 요소 선택자 , 태그 선택자
- 특정 태그가 쓰인 모든 요소에 스타일을 적용
ex)
태그이름{
CSS 문법
}
- 코드 입력-
<!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>요소 선택자</title>
<style>
p{
color: blue;
}
h2{
text-align: center;
background-color: yellowgreen;
}
</style>> p태그가 들어간 문장은 파란색 글자가 출력이되고 h2 태그가 들어간 문장은 입력한 스타일 대로 출력된다.
- 출력 결과 -
3. ID 선택자
- 웹 문서 안에 특정한 부분에 스타일을 적용
# 기호를 사용해서 ID 속성을 가진 요소에 스타일을 적용
ex)
# 아이디명{
CSS문법
}
- 코드 입력 -
<!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>id 선택자</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h2>id 선택자</h2>
<div id="header"> div 첫번째 영역 </div>
<div id="container"> 일반 영역</div>
<div id="footer"> div 두번째 영역 </div>
</body>
</html>> id 값 에 html 위치의 값을 지정 " 머리 / 몸통 / 발" 이렇게 지정
> css 스타일 시트에서 # 으로 지정을 함 #header / #container 이렇게
- css 스타일 시트 코드 입력-
- 출력 결과-
4. class 선택자 ( 이거 조금 복잡함...)
- 특정 집단의 요소에 한번에 스타일을 적용할 떄 사용
. (쩜) 기호를 사용해 같은 clss 속성을 가진 요소에 스타일을 적용하는
ex)
. 클래스명{
css 문법
}
- 코드 입력 -
<!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>class 선택자</title>
<style>
.redText{
color: red;
}
.blueText{
color: blue;
}
.bigText{
font-size: 50px;
}
</style>
</head>
<body>
<h2> 클래스 선택자 </h2>
<p>
<span class="redText">클래스 선택자</span>는<span class="a">특정 집단의 여러 요소를 한번에 선택</span> 할 때 사용합니다
</p>
<div class="bigText">
<span class="redText">특정 집단을 <span class= "blueText">클래스(class)</span>라고 하며, .기호를 사용하여 같은 클래스 이름을 가지는 요소들을 모두 선택합니다.
</div>
</body>
</html>
- 설명
------------------------------------------
-----------------------------------------------
- 부모 클래스를 big text 라고 입력을 하고
그 밑에 하위 클래스 자식 클래스로 redText / big 을 입력 한후 스타일 시트에서 각각의 스타일 값을 입력해 주면
부모클래스에서의 물려 받은 bigtext 즉, 아래 자식 클래스에도 이 값이 적용이 다된다.
또한. 부모의 클래스가 적용됨과 동시에 각각의 클래스에 준 스타일 값이 적용된다.
- 출력 결과-
- 추가 설명-
자식 클래스가 부모 클래스의 속성을 물려 받아 그대로 폰트 사이즈가 커진 것을 볼수 있다.
만약 이 안에서 내가 " 클래스 이름을" 이라는 폰트의 크기를 줄이고 싶다면?
- 하위 클래스 안에 <span> 으로 감싸주어 다른 클래스를 선언한후, 스타일 시트에 입력 해보자
name 이라는 클래스 임의 입력.
- 코드입력-
<div class="bigText">
<span class="redText">특정 집단을 <span class= "blueText">클래스(class)</span>라고 하며,
.기호를 사용하여 같은 <span class="name"> 클래스 이름을</span> 가지는 요소들을 모두 선택합니다.
</div>
- 스타일 코드 입력-
.name{
font-size: 20px;
}
- 출력 결과 -
- 임의의 클래스 명을 지어 span값ㅇ에 넣어주고 스타일 시트에 원하는 글자의 px 값을 넣었더니 , 작아진 모습을 볼수 있다.
# 태그의 id 와 class 속성
= 태그에 이름을 지어준다 -> why? -> 이름을 불러와 정확히 해당 부분을 선택하여 css와 id 를 사용할수 있다.
= id 선택지는 문서 안에 단 하나의 요소에 스타일을 적용(중복 사용)
class 선택자는 문서 안 복수의 요소에 스타일을 적용하는 경우에 사용 (중복 사용)
= id의 속성이 class의 속성보다 우선순위가 높다.
-> 즉 id 의 속성은 해당 요소에 부여된 clss 속성에 관계없이 적용.
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY04] (1) | 2022.04.26 |
|---|---|
| [프론트 엔드 DAY03- 2] (0) | 2022.04.25 |
| [프론트 엔드 DAY03] (0) | 2022.04.17 |
| [프론트엔드 day02] (0) | 2022.04.16 |
| [프론트엔드 day01-1 ] (0) | 2022.04.16 |
댓글