1. 인라인 스타일 (inline style)
HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식.
여러 요소들에 공통 속성을 재사용하여 부여할 수 없고,
HTML 코드와 CSS 코드가 분리되지 않기 때문에 특별한 경우를 제외하고는 사용되지 않는다.
2. 내부 스타일 시트 (internal style sheet)
head 태그 안에 style 태그를 생성해두고, 그 안에 CSS 코드를 작성하는 방식.
HTML과 CSS 전체 코드량이 많지 않고, CSS가 해당 HTML 문서에서만 적용될 경우, 유용하다.
3. 링킹 스타일 시트 (linking style sheet)
외부의 CSS 파일을 HTML 문서에 연결하는 것. HTML과 CSS의 코드가 분리되고
CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있어서 유용하게 사용되는 방식.
---------------------------------------------------------------------------------------------------------------------------
1. 인라인 스타일 - 각 html 요소안에 직접 사용.
<body>
<p>
<b style="color: tomato;">
인라인 스타일(inline style)
</b>
방식은 HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식입니다.
<br> 여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에 <br> 특별한 경우를 제외하고는 사용되지 않습니다.
</p>
</body>HTML 태그 안, <b> </b> 태그를 만들고 그 안에 CSS 코드를 넣는 방식.
<특징>
A. CSS의 재사용이 어렵기 때문에 잘 쓰이지 않는다.
B. CSS, JS, HTML 코드의 분리가 되어있지 않다.
2. 내부 스타일 시트 (internal style sheet) - <head>에 <style> id를 지정하여 생성 후 <b>에 적용.
<순서>
1. <head> </head> 안에 <style> </style> 을 id를 지정하여 만든다.
2. <body></body>안 <p> <b></b> 에 class 속성으로 해당 <style>의 id를 지정하여 CSS를 적용.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.style-1 {
color: blue;
}
</style>
</head>
<body>
<h1>CSS를 적용하는 세 가지 방법</h1>
<p>
<b class="style-1">내부 스타일 시트(internal style sheet)</b> 방식은 head 태그 안에 style 태그를 두고 그 안에 CSS 코드를 작성하는 방식입니다. <br>
HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 <br>
유용하게 사용될 수 있습니다.
</p>
</body>
</html><특징>
A. <head> 쪽에 <style> 내용이 길어지면 전체 코드가 늘어난다.
B. 다른 파일에 CSS를 적용할 때, 사용이 불가능하다.
3. 링킹 스타일 - CSS 파일을 외부에 별도의 파일로 생성. ex) style.css
분리된 외부 파일로 .css 파일을 생성하고, 원하는 html 파일에서 해당 .css 파일과 연결하여 적용.
<순서>
1. .css 파일을 생성한다.
2. <head> 안에서 link:css 를 선택한다.
3. 선택한 후 자동생성된 link:css에 href 경로를 원하는 css 파일로 수정한다.
href="" 에서 ./ 입력 시 해당 파일과 같은 디렉토리의 모든 파일이 나옴.
4. <p><b> 태그에서 class=".css파일 내 style_Id입력.
==============================html 파일==============================================
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<style>
.style-1 {
color: blue;
}
</style>
</head>
<body>
<h1>CSS를 적용하는 세 가지 방법</h1>
<p>
<b class="style-2">링킹 스타일 시트(linking style sheet)</b> 방식은 외부의 CSS 파일을 HTML 문서에 연결하는 것입니다. <br>
HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있으므로 <br>
가장 널리 사용되는 방식입니다.
</p>
</body>
</html>
=============================.css 파일=================================================
.style-2 {
color: red;
}
링킹스타일_심화.
1. link:css + tab -> href=" " 에 CSS 파일 지정.
2. css 파일안에 요소 선택.
3. * {} : 모든 요소
4. p {} : 모든 p 태그 요소
5. span {} : 모든 span 태그 요소
6. .클래스명 {} : 해당 클래스명을 가진 모든 요소
7. 태그명.클래스명 {} : 해당 태그 중 해당 클래스명을 지닌 모든 요소
8. #아이디명 {} : 해당 아이디를 가진 요소.
7 VS 8 : 클래스는 여러 가지가 있지만, 아이디는 하나만 존재한다.
9. [그룹화] : 태그, 클래스명, 아이디 {} : 해당 태그, 해당 클래스, 해당 아이디를 지닌 요소에 부여
10. 자손 결합자 2:50:49
[HTML 코드]
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<span>
span 요소
</span>
<p>
p 요소
</p>
<p class="blue">
p 요소, class는 blue
</p>
<span class="blue">
span 요소, class는 blue
</span>
<p class="blue dark">
p 요소, class는 blue와 dark
</p>
<p class="blue" id="red">
p 요소, class는 blue, id는 red
</p>
</body>[CSS 파일]
================ style.css 파일==========================================================
/* 모든 요소 선택 */
* {
font-weight: bold;
color: darkorange;
}
/* 같은 선택자의 경우 뒤에 오는 것이 우선순위 높음 */
* {
color: plum;
}
/* 태그 선택자, 최우선 적용이며 적용 원하는 태그를 적음. */
p {
color: olivedrab;
}
span {
color: black;
}
/* class 선택자 */
/* 태그보다 우선순위 높음 */
/* 페이지상의 여러 요소가 같은 class를 가질 수 있음 */
/* .{태그_class명} {
color: 색성명
}
*/
.blue {
color: lightblue;
}
/*
{태그명}.{class 명} {
color: 색상명
}
*/
p.blue {
color:brown
}
span.blue {
color: silver;
}
.blue.dark {
color:aqua
}
p.blue.dark {
color:yellow
}
/* id 선택자 */
/* class보다 우선순위 높음 */
/* id는 페이지상에서 요소마다 고유해야 함 */
/*
# 태그_id {
color: 색상;
}
*/
#red {
color: gold;
}
https://www.youtube.com/watch?v=TrC2x4N0XqY&t=9698s // 2:50:37