인라인 스타일
지금까지 사용한
<h1 style="font-family: sans-serif; text-align: center; color: red">
sol's challenge for Friday, May 6th
</h1>과 같은 방법은 인라인 스타일이라고 한다.
웹페이지가 복잡해질수록 단락은 늘어나고, 이에 따라 여러 단락에 일괄적으로 스타일을 적용해야할 필요가 생긴다. 유지보수 측면에서 인라인 스타일은 지양해야 할 방식이다.
외부 스타일 시트
이는 CSS를 작성하는 가장 기본적인 방법으로, 별도의 파일에 CSS 문서를 작성하고 해당 CSS를 필요로 하는 html 문서에서 불러와 사용하는 형식이라고 한다. 이때 CSS는 동일한 서버에 있어도 되고 url을 통해 다른 서버의 CSS를 불러오는 것도 가능하다.
출처 - https://dinfree.com/lecture/frontend/122_css_1.html
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">왠지는 모르겠지만 강의에서 아직까지 이 방식이 나오지는 않았다.
내부 스타일 시트
CSS 규칙
출처 - 100일 코딩 챌린지 - 2022 Web Development 부트캠프
지금까지 사용한 CSS 속성과 값에 더해 CSS 선택자와 중괄호가 추가되었다. 선택자는 브라우저에게 페이지의 어떤 요소에 스타일을 설정해야 하는지 알려준다. 여기서는 p로 되어 있는데, 이는 모든 단락 element를 의미한다. 각 CSS 속성은 반드시 세미콜론으로 끝나야 한다!!
- 원래의 코드
<h1 style="font-family: sans-serif; text-align: center; color: red">
sol's challenge for Friday, May 6th
</h1>
<p style="font-family: sans-serif; text-align: center; color: #c94949">
Learn about the basics of web development - sepcifically dive into HTML & CSS.- 내부 스타일 시트를 적용한 코드
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: rgb(205, 40, 40);
}
p {
font-family: sans-serif;
text-align: center;
color: rgb(205, 40, 40);
}
</style>
<h1>
sol's challenge for Friday, May 6th
</h1>
<p>
Learn about the basics of web development - sepcifically dive into HTML & CSS.
hi
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources.</a>
</p>중복되는 스타일 코드가 없어져서 매우 보기 좋아졌으며, 중복되는 스타일을 하나하나 고칠 필요가 없기 때문에 유지보수 측면에서도 유리해졌다.
+h1과 p의 스타일에 중복되는 부분이 있는데, 이를 줄이는 방법 또한 존재한다고 한다. 나중에 찾아봐야겠다.
++코드가 약간 다른데, 이는 그냥 넘어가자. 학습하면서 정리하다 보니 인라인 스타일의 코드가 어디로 갔는지 모르겠다.
