<!-- CSS 적용하는 방법 3가지 -->
<!-- 1. inline style : html 시작 태그에 style 속성을 통해 직접 지정 -->
<!-- 2. internal css : head태그 안에 <style> 태그에 스타일을 지정 -->
<!-- 3. external css : 별도의 css 파일을 만들고 <head> 태그 안에 css 파일을 삽입해서 사용 -->
1번과 2번의 적용 방법은 이때까지 해오던 것이다
1번 예시
<a href="" style="text-decoration: none">네이버</a>
inline style로 해당 태그 안에서 style=""속성으로 디자인을 입힘
2번 예시
<!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>
.table {
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
.table tr th,
table tr td {
border: 1px solid black;
border-collapse: collapse;
}
.striped-table tbody tr:nth-child(2n + 1) {
background-color: greenyellow;
}
</style>
</head>
이렇게 <head> 태그 안에 <style> 태그를 만들어 디자인 하는 것
이번에는 3번인 external 방식을 알아 보자
external css 방식
위의 2번의 internal 방식으로 표를 만들어 보자
<!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>
.table {
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
.table tr th,
table tr td {
border: 1px solid black;
border-collapse: collapse;
}
.striped-table tbody tr:nth-child(2n + 1) {
background-color: greenyellow;
}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>ryu@gmail.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-0000-0001</td>
<td>kim@gmail.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-0000-0002</td>
<td>song@gmail.com</td>
</tr>
<tr>
<td>양세찬</td>
<td>010-0000-0003</td>
<td>yang@gmail.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>ryu@gmail.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-0000-0001</td>
<td>kim@gmail.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-0000-0002</td>
<td>song@gmail.com</td>
</tr>
<tr>
<td>양세찬</td>
<td>010-0000-0003</td>
<td>yang@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
이렇게 똑같은 표를 2개 만들었다
일단 이것은 internal 방식이다
이제 external 방식으로 해보자
이때까지는 확장자 형식이 .html 이였다
이제 확장자 형식을 .css로 만들어보자
나는 style.css 이름으로 만들었다
그리고 2번 internal 방식으로 <style>을 지정한 코드들을
그대로 style.css 파일에 가지고 오겠다
그러면 해당 <style> 값을 가진 css파일이 만들어 진 것이다
이 파일을 적용해 보자
<head>태그 안에 link:css 태그를 만든다
<link rel="stylesheet" href="style.css">
해당 태그의 href="" 값에 내가 만든 style.css 파일을 경로를 주자
<link rel="stylesheet" href="./CSS/style.css" />
그러면 내가 style.css 파일에 지정해놓은 <style> 태그안의 속성들이 적용된다
<!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="./CSS/style.css" />
<style>
/* .table {
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
.table tr th,
table tr td {
border: 1px solid black;
border-collapse: collapse;
}
.striped-table tbody tr:nth-child(2n + 1) {
background-color: greenyellow;
} */
</style>
</head>
<body>
<!-- CSS 적용하는 방법 3가지 -->
<!-- 1. inline style : html 시작 태그에 style 속성을 통해 직접 지정 -->
<!-- 2. internal css : head태그 안에 <style> 태그에 스타일을 지정 -->
<!-- 3. external css : 별도의 css 파일을 만들고 <head> 태그 안에 css 파일을 삽입해서 사용 -->
<table class="table">
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>ryu@gmail.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-0000-0001</td>
<td>kim@gmail.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-0000-0002</td>
<td>song@gmail.com</td>
</tr>
<tr>
<td>양세찬</td>
<td>010-0000-0003</td>
<td>yang@gmail.com</td>
</tr>
</tbody>
</table>
<br />
<table class="table striped-table">
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>ryu@gmail.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-0000-0001</td>
<td>kim@gmail.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-0000-0002</td>
<td>song@gmail.com</td>
</tr>
<tr>
<td>양세찬</td>
<td>010-0000-0003</td>
<td>yang@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
internal 방식의 <style> 태그들을 주석처리를 하고 실행하면
동일한 <style> 속성값이 적용된걸 볼 수 있다
이것이 external 방식인 것이다
근데 요기서 우리가 <style> 을 적용할때 순서가 중요하다
style.css 파일 안에 첫번째 드래그한 클래스 선택자를 복사해서 들고와보겠다
이렇게 style.css 파일 경로가 지정된 html파일에
복사한걸 그대로 붙여넣고 width 값을 50% 에서 20%로 바꾸고
border-collapse: collapse; 속성을 주석처리 해보겠다
<!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="./CSS/style.css" />
<style>
/* .table {
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
.table tr th,
table tr td {
border: 1px solid black;
border-collapse: collapse;
}
.striped-table tbody tr:nth-child(2n + 1) {
background-color: greenyellow;
} */
.table {
border: 1px solid black;
/* border-collapse: collapse; */
width: 20%;
}
</style>
이렇게 실행하면 어떻게 될까?
요기서 <style> 을 적용할때 순서가 중요한 이유가 나온다
해당 코드는 동일한 클래스 선택자가 2개이다( .table {} )
그러면 동일한 2개의 선택자는 합쳐지고
만약 동일한 속성이 있으면 속성값은 밑에있는 태그의 속성값이 적용이 된다
위에 있는 태그
.table {
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
밑에 있는 태그
.table {
border: 1px solid black;
/* border-collapse: collapse; */
width: 20%;
}
그러면 border:1px solid black; 값은 둘다 동일 하므로 똑같이 적용이 될 것이고
border-collapse: collapes; 속성은 위에 태그는 활성화 되어있고
밑에 태그는 주석으로 처리되어있지만 위,밑에 있는 태그가 합쳐져서
border-collapse: collapes; 속성이 적용되는 것이다
width: 속성은 위에 태그는 50% 값이고 밑에 태그는 20%값이다
동일한 속성에 값이 다른걸 볼 수 있다
그러면 밑에 있는 태그의 20%라는 값이 적용 된다
실무에서는 external 방식을 대부분 쓴다고 한다
