새로운 코더로서 우리는 먼저 CSS를 인라인 스타일로 웹 페이지에 통합하기 시작합니다. style 속성을 사용하여 CSS를 HTML 요소에 직접 삽입합니다.
<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>
더 복잡한 사이트로 이동함에 따라 CSS를 내부 CSS로 통합하는 방향으로 이동합니다. 여기에서 <style> 사이에 모든 CSS를 작성합니다. <head> 의 태그 HTML 문서 섹션:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1, h4 {
text-align: center;
}
h1 {
color: blue;
}
h4 {
color: red;
}
</style>
</head>
<body>
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html> 이것은 HTML을 멋지게 정리합니다. 그러나 500줄의 CSS가 있다면 어떻게 될까요? 이 파일은 꽤 빨리 읽기 어려울 것입니다. 그러나 우리는 외부 스타일시트를 만든 다음 HTML 파일에 연결할 수 있습니다!
설정:
- index.html이 있는 기본 프로젝트 폴더 파일은 index.css라는 새 파일을 만드는 것입니다. index.css 파일은 index.html 파일에 대한 모든 CSS를 보유할 것입니다. 나는 스타일을 유지하기 위해 스타일을 지정하는 HTML 파일의 이름을 CSS 파일에 지정하고 싶지만, 스타일을 지정하는 파일을 알고 있는 한 원하는 대로 이름을 지정할 수 있습니다.
<style>사이에 CSS가 있는 경우<head>의 태그 HTML 파일의 CSS 코드만 잘라내어 해당 CSS 파일에 붙여넣습니다(태그 없음).<head>에서 HTML 파일에서 CSS 파일을 가리키는 태그를 만들 것입니다.
<link rel="stylesheet" type="text/css" href="./index.css">
링크는 세 부분으로 구성됩니다.
- rel 속성: 이것은 우리에게 이 파일과 다른 파일 사이에 관계가 있다는 것을 말해주고, 이 링크는 우리에게 그 관계가 무엇인지 알려줄 것입니다.
- 유형 속성: 링크된 파일과 HTML 파일의 관계 유형을 설명합니다.
- href 속성: HTML 파일이 있는 파일의 상대 경로 - 파일의 위치입니다.
CSS 파일을 HTML 파일에서 분리하더라도 CSS의 계단식 속성은 여전히 최고를 지배한다는 것을 기억하십시오. 즉, CSS 파일이 여러 개인 경우 다음을 수행해야 합니다.
1. 각각의 개별 CSS 파일을 가리키는 가 있어야 합니다.
2. 적절한 스타일이 표시되도록 해당 파일이 필요한 순서대로 있는지 확인하십시오. 순서가 맞지 않으면 스타일링이 되지 않을 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
그게 전부입니다. 이제 프로젝트에 대한 외부 스타일시트를 만드는 과정이 순조롭게 진행됩니다!