CSS 스타일시트 외부에서 스타일 태그를 사용하는 시기와 이유
게시 됨: 2017-10-29스타일 태그는 웹 개발에서 꽤 흥미로운 부분입니다. 내 말은, 그것들은 현재 웹이 어떻게 작동하는지에 대한 기본적이고 기본적이지만, 대부분의 경우 사이트의 실제 스타일은 테마, 플러그인 및 방문자가 보는 일상적인 모습에 대한 수많은 CSS 스타일시트를 가져오고 사용하는 데서 비롯됩니다.
그러나 옛날 웹사이트 구축으로 돌아가면 웹사이트 본문에 스타일 태그를 사용할 수 있었고 괜찮을 것입니다. 전부는 아니지만 대부분의 페이지용 CSS는 페이지 자체로 이동하고 그 당시에는... 제대로 작동했습니다. 요즘에는 페이지 로드 속도 및 실행 순서와 같은 문제가 있으며 웹 기술이 성숙할수록 스타일 태그를 단독으로 사용하려는 빈도가 줄어듭니다.
그러나 사용하고 싶을 때가 있습니다. 때로는 워크플로를 향상시키는 반면 다른 인스턴스는 예를 들어 모바일 최적화 또는 멋진 스타일링을 통해 특정 요소에 주의를 집중시키는 것과 같이 사용자의 삶을 실제로 더 좋게 만듭니다.
일반적인 스타일시트 사용
오늘날 거의 모든 웹사이트에서 다음과 같이 구현된 스타일을 볼 수 있습니다.
<link rel='stylesheet' id='divi-style-css' href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />
Divi를 사용하는 우아한 테마 회원이라면(꼭 그래야 합니다!), 이 스니펫에서 가져온 전체 스타일시트를 불러옵니다.
/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
이제 이론적으로 작성하는 모든 페이지의 헤더에 있는 스타일 태그에 이를 넣을 수 있습니다. 확실히 작동하지만 그것은 악취나는 코딩이며 스타일 태그가 어떤 용도로 사용되는지는 전혀 아닙니다.
스타일 태그, 현대적인 사용법
물론 귀하의 웹사이트에는 이와 같은 CSS 스타일시트가 있습니다. 당신은 그들을 사용할 것입니다. custom.css 와 stylesheet.css가 있고 아마도 그 이상일 것입니다. 귀하의 사이트가 어떤 모습이어야 하는지 정확히 파악했으며 이에 만족합니다.
그렇다면 왜 스타일 태그가 필요합니까?
스타일시트는 큰 그림을 그리는 솔루션이기 때문입니다. 스타일 태그는 소규모 솔루션입니다.
시트는 핵심적인 개별 요소와 특별한 하이라이트가 아니라 사이트의 더 큰 외관을 처리합니다. 때로는 스타일시트에 일회성 코드를 넣는 것보다 더 많은 작업이 필요합니다.
그럴 때 스타일 태그가 정말 유용해집니다. 또한 때로는 단일 요소를 조정하거나 특정 장치 또는 사용 사례에 대해 특정 스타일을 선택해야 합니다. 스타일 태그가 현대 웹 개발에서 정말 빛날 때입니다.
요소의 단일 인스턴스
사이트에서 스타일 태그를 사용하는 주된 이유는 아마도 페이지에서 일회성 요소를 다루는 경우일 것입니다. 해당 요소의 ID에 첨부된 외부 CSS 파일에 스타일을 포함하는 것은 많은 번거로움이 있을 수 있습니다. 그러나 할 수 있는 일은 요소에 스타일 태그를 던지고 하루를 계속하는 것입니다.
"출"당신은 특별한 글꼴을 필요로하는 사이드 바 위젯이있는 경우 예를 들어, {글꼴 - 가족으로 간단하게 뭔가를 포함하는 스프레드 시트에 다음 머리 사업부에 넣어 사업부에게 CSS ID를주고, 수 , Arial, sans-serif;} 하지만 문제가 많습니다.
더 나은 옵션은 단순히 이것을하는 것입니까?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, 당신은 끝났고 그 위젯은 이제 그 특정 스타일을 얻는 유일한 위젯이기 때문에 두드러집니다. (그리고 예, 새롭고 다른 글꼴을 사용하면 디자인의 나머지 부분과 충돌할 가능성이 높다는 것을 알고 있습니다. 하지만 이것은 예입니다.)
하나의 간단한 페이지
때로는 사이트에 매우 간단한 일회성 페이지가 있습니다. 스플래시 페이지 또는 스퀴즈 페이지일 수 있습니다. 여기에서 스타일에 약간의 수정이 필요할 수 있지만 이 페이지와 이 페이지에만 적용하려면 필요합니다.
따라서 스타일 과 함께 자주 비난받는 !important 태그를 사용하면 새 스타일시트를 만들고 연결하는 것보다 더 빠르고 쉽게 작업을 완료할 수 있습니다. 이 방법은 새 CSS가 많지 않은 경우에 가장 적합합니다. 이와 같이 CSS를 많이 로드하면 페이지 로드가 느려질 수 있기 때문입니다. 그러나 당신은 이미 그것을 알고 있었습니다.
그러나 이와 같은 간단한 것은 사용자 연결에 너무 큰 부담이 되지 않으며 솔직히 스타일시트에 추가할 가치가 없습니다. (그리고 공정하게 말해서 이 CSS는 끔찍하고 어떤 사이트에도 추가할 가치가 없습니다. 히히!)
<style>
h2, h3, h4 {
font-family: "Exo", Arial, sans-serif!important;
text-align: right;
font-size: 2rem;
color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important;
font-size: 1.2rem;
color: red;
background: #000;}
</style>
그러나 여기서 요점은 HTML 5가 웹사이트 헤드에 스타일 태그를 추가하여 기존 스타일시트를 조정할 수 있다는 점입니다. !important 태그는 이 경우에 확실히 필요하지 않지만(거의 필요하지 않음), 아마도 당신처럼 태그 스파게티를 많이 일으키지 않을 것이기 때문에 이것이 한 번만 사용하는 것처럼 느껴집니다. 다른 개발자)는 이 단일 페이지에만 적용되기 때문에 사이트에서 작업을 시작합니다.
다중 뷰포트 크기
미디어 쿼리는 당신의 친구입니다. 그것들에 대해 완전히 익숙하지 않다면, 나는 당신이 그것들에 대해 읽어볼 것을 강력히 제안합니다. 기본적으로 특정 CSS가 적용되기 위해 충족되어야 하는 매개변수를 선언할 수 있습니다. 대부분의 경우 이 기능을 사용하여 사이트가 다른 장치에서 작동하는지 확인합니다. 사이트 전체의 응답성이 필요한 경우 스타일시트에 포함됩니다.
그러나 모바일(또는 더 작거나 더 큰 데스크톱 해상도)에서 다르게 나타나거나 전혀 나타내지 않아야 하는 단일 페이지 또는 요소가 있는 경우 헤더에 스타일 태그를 사용하여 이를 수행할 수 있습니다.
<style>
@media (max-width: 767px) {
.white_text {
color: #ffffff;
}
.blue_text {
color: #cbe1f3;
}
.white_background {
background-color: #ffffff;
}
.blue_background {
background-color: #003663;
}
#email_form_a {
display:none;
}
</style>
스타일링 및 프로파일링
CSS는 이제 거의 모든 사람이 알고 사용해야 하는 웹 개발의 중요한 부분입니다. 당신이 접근 할 수있는 미묘한 도구를 사용할 때 더욱 CSS를 아는 이상은 알고있다.
따라서 스타일시트로 제한되는 것처럼 느끼지 마십시오. 물론, 그것들은 환상적이고 유용하며 전체 웹을 더 멋진 곳으로 만들지만 여전히 간단한 스타일 태그를 사용하고 사이트에 약간의 추가 효과를 줄 수 있습니다.
그렇다면 .css 스타일시트 외부에서 스타일 태그를 어떻게 사용합니까? 사람들에게 어떤 통찰력을 줄 수 있습니까?
Creative Thoughts/Shutterstock.com의 기사 썸네일 이미지