CSS 폭발 관리
저는 제가 일하고 있는 웹사이트를 위해 CSS에 많이 의존해 왔습니다.현재는 모든 CSS 스타일이 태그별로 적용되고 있기 때문에 향후 변경을 돕기 위해 외부 스타일링으로 전환하려고 합니다.
하지만 이제 문제는 제가 "CSS 폭발"을 받고 있다는 것을 알아차렸다는 것입니다.CSS 파일 내에서 데이터를 가장 잘 정리하고 추상화하는 방법을 결정하는 것이 어려워지고 있습니다.
사용 중인 데이터를 사용하고 있습니다.div테이블 기반 웹 사이트에서 이동하는 웹 사이트 내의 태그입니다.그래서 저는 다음과 같은 CSS 셀렉터를 많이 받고 있습니다.
div.title {
background-color: blue;
color: white;
text-align: center;
}
div.footer {
/* Styles Here */
}
div.body {
/* Styles Here */
}
/* And many more */
아직 많이 나쁘진 않지만, 제가 초보자이기 때문에 CSS 파일의 다양한 부분을 어떻게 구성하는 것이 가장 좋은지 추천해주실 수 있는지 궁금합니다.저는 제 웹사이트의 모든 요소에 대해 별도의 CSS 속성을 갖고 싶지 않으며, 항상 CSS 파일이 상당히 직관적이고 읽기 쉬웠으면 합니다.
저의 궁극적인 목표는 CSS 파일을 쉽게 사용하고 웹 개발 속도를 높이는 힘을 보여주는 것입니다.이런 식으로, 미래에 이 사이트에서 일할 수 있는 다른 사람들도 제가 했던 방식으로 코딩을 선택하는 대신 좋은 코딩 방법을 사용하는 연습을 하게 될 것입니다.
이것은 매우 좋은 질문입니다.제가 보는 모든 곳에서 CSS 파일은 특히 팀에서 작업할 때 시간이 지나면 제어할 수 없게 되는 경향이 있습니다.
다음은 제 자신이 지키려고 하는 규칙입니다(항상 지키려고 하는 규칙은 아닙니다).
일찍 리팩터, 자주 리팩터.CSS 파일을 자주 정리하고 동일한 클래스의 여러 정의를 결합합니다.사용되지 않는 정의를 즉시 제거합니다.
버그 수정 중 CSS 추가 시 변경 사항에 대한 코멘트를 남깁니다("IE < 7"에서 박스가 정렬된 상태로 유지되도록 하기 위함).
를 들어 을복방니다에서 하는 것과 것을 . 예를 들어, 다음에서 동일한 것을 정의합니다.
.classname그리고..classname:hover.사용하기
/** Head **/명확한 구조를 만들기 위해.일정한 스타일을 유지하는 데 도움이 되는 예쁜 도구를 사용합니다.저는 꽤 만족스러운 폴리스타일을 사용합니다(가격은 15달러이지만 돈은 잘 쓰였습니다).무료(예: 오픈 소스 도구인 CSS Tidy 기반 코드 뷰티파이어)도 있습니다.
합리적인 수업을 구축합니다.이에 대한 몇 가지 참고 사항은 아래를 참조하십시오.
하고, 수프를 - 의미을사고하용수프피를함 - 용사론.
<ul>예를 들어, 메뉴의 경우 s.으로 정의합니다( 기본 글꼴 및 ).
body및 use ) 를 사용합니다.inherit한 한만약 당신이 매우 복잡한 CSS를 가지고 있다면, 아마도 CSS 사전 컴파일러가 도움이 될 것입니다.저는 곧 같은 이유로 xCSS를 조사할 계획입니다.주변에 다른 여러 명이 있습니다.
팀에서 작업할 경우 CSS 파일에 대한 품질 및 표준의 필요성도 강조합니다.모든 사람들이 프로그래밍 언어로 코딩 표준을 매우 좋아하지만, 이것이 CSS에도 필요하다는 인식은 거의 없습니다.
팀에서 작업하는 경우 버전 제어 사용을 고려해야 합니다.이렇게 하면 추적하기가 훨씬 쉬워지고 편집 충돌을 해결하기가 훨씬 쉬워집니다.HTML과 CSS에 "그냥" 들어가더라도 정말 가치가 있습니다.
에서 작업하지
!importantIE =< 7이 대처할 수 없기 때문만이 아닙니다. 한구조서에은, 용사잡의 .!important소스를 찾을 수 없는 동작을 변경하려는 경우가 종종 있지만, 장기적인 유지보수에는 독이 됩니다.
합리적인 수업 구축
이것이 제가 합리적인 수업을 만드는 방법입니다.
글로벌 설정을 먼저 적용합니다.
body { font-family: .... font-size ... color ... }
a { text-decoration: none; }
그런 다음 페이지 레이아웃의 기본 섹션(예: 맨 위 영역, 메뉴, 내용 및 바닥글)을 식별합니다.만약 내가 좋은 마크업을 썼다면, 이 부분들은 HTML 구조와 동일할 것입니다.
그런 다음, 저는 CSS 클래스를 구축하기 시작하고, 가능한 한 많은 조상을 지정하고, 관련 클래스를 가능한 한 가깝게 그룹화합니다.
div.content ul.table_of_contents
div.content ul.table_of_contents li
div.content ul.table_of_contents li h1
div.content ul.table_of_contents li h2
div.content ul.table_of_contents li span.pagenumber
전체 CSS 구조를 루트에서 멀어질수록 점점 더 구체적인 정의를 가진 트리로 생각합니다.여러분은 수업 횟수를 가능한 한 낮게 유지하고 싶고, 가능한 한 자주 반복하고 싶지 않습니다.
예를 들어, 세 가지 수준의 탐색 메뉴가 있다고 가정해 보겠습니다.이 세 가지 메뉴는 다르게 보이지만, 특정한 특징도 공유합니다.를 들어, 를예들어, 은모두그입니다.<ul> 동일한 글꼴 크기를 , 은 모두 렌더링 시 은모동기글크가기있지항다모으있목서로옆두니대습으적조로에들은는며과렌링본더이고들두를일한꼴기▁they▁are▁the▁of▁opposed▁to(로as▁size,▁all대▁rendering▁items으▁default▁to▁an적조▁each▁and).ul 기호(. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ?list-style-type).
먼저, 클래스에서 공통적인 특성을 정의합니다.menu:
div.navi ul.menu { display: ...; list-style-type: none; list-style-image: none; }
div.navi ul.menu li { float: left }
그런 다음 세 가지 메뉴의 특정 특성을 정의합니다.레벨 1은 40픽셀, 레벨 2와 3은 20픽셀입니다.
참고: 여러 클래스를 사용할 수도 있지만 Internet Explorer 6에는 여러 클래스가 있으므로 이 예제에서는ids의
div.navi ul.menu#level1 { height: 40px; }
div.navi ul.menu#level2 { height: 20px; }
div.navi ul.menu#level3 { height: 16px; }
메뉴의 마크업은 다음과 같습니다.
<ul id="level1" class="menu"><li> ...... </li></ul>
<ul id="level2" class="menu"><li> ...... </li></ul>
<ul id="level3" class="menu"><li> ...... </li></ul>
페이지에 세 가지 메뉴와 같이 의미론적으로 유사한 요소가 있는 경우 먼저 공통점을 찾아 클래스에 배치한 다음 특정 속성을 찾아 클래스에 적용하거나 Internet Explorer 6을 지원해야 하는 경우 ID를 사용합니다.
기타 HTML 팁
HTML 출력에 이러한 의미론을 추가하면 설계자는 나중에 순수 CSS를 사용하여 웹 사이트 및/또는 앱의 모양을 사용자 지정할 수 있으므로 큰 이점과 시간 절약 효과를 얻을 수 있습니다.
클래스를 하세요: 가한경우모든페본고문지클정다를합니래스유에이능지.
<body class='contactpage'>스타일시트에을 매우 추가할 수 .body.contactpage div.container ul.mainmenu li { color: green }메뉴를 자동으로 작성할 때 CSS 컨텍스트를 최대한 추가하여 나중에 광범위한 스타일을 만들 수 있습니다.예:
<ul class="mainmenu"> <li class="item_first item_active item_1"> First item </li> <li class="item_2"> Second item </li> <li class="item_3"> Third item </li> <li class="item_last item_4"> Fourth item </li> </ul>이러한 방식으로 모든 메뉴 항목에 액세스하여 의미론적 맥락에 따라 스타일을 지정할 수 있습니다.목록의 첫 번째 또는 마지막 항목인지 여부, 현재 활성 항목인지 여부 및 번호별로 표시됩니다.
위의 예에서 설명한 것처럼 여러 클래스를 할당하는 것은 IE6에서 제대로 작동하지 않습니다.IE6가 여러 클래스를 처리할 수 있도록 하는 해결 방법이 있습니다.해결 방법을 선택할 수 없는 경우 가장 중요한 클래스(항목 번호, 활성 또는 첫 번째/마지막)를 설정하거나 ID를 사용해야 합니다.
다음은 4가지 예입니다.
- CSS 규약 / 코드 레이아웃 모델
- 첫 번째 스타일시트를 작성할 때 따라야 할 CSS 표준이 있습니까?
- CSS를 정리하는 가장 좋은 방법은 무엇입니까?
- 모범 사례 - CSS 스타일시트 형식 지정
4번 모두에 대한 답변에는 나탈리 다운의 PDF CSS 시스템을 다운로드하여 읽으라는 조언이 포함되어 있습니다. (PDF에는 슬라이드에 없는 노트가 많이 포함되어 있으므로 PDF를 읽어 보십시오!)그녀가 조직을 위해 제안한 사항을 메모합니다.
EDIT(2014/02/05) 4년 후, 저는 이렇게 말할 것입니다.
- CSS 프리 프로세서를 사용하고 파일을 부분적으로 관리합니다(저는 개인적으로 나침반이 있는 Sass를 선호하지만, Less도 꽤 좋고 다른 것들도 있습니다).
- OOCSS, SMACSS 및 BEM과 같은 개념을 읽어보거나 getbem을 읽으십시오.
- 부트스트랩과 주브 파운데이션과 같은 인기 있는 CSS 프레임워크가 어떻게 구성되어 있는지 살펴보세요.그리고 덜 인기 있는 프레임워크를 할인하지 마세요 - 이누이트는 흥미로운 것이지만 다른 것들도 많이 있습니다.
- 연속 통합 서버의 빌드 단계 및/또는 Grunt 또는 Gulp와 같은 태스크 실행기로 파일을 결합/축소할 수 있습니다.
CSS로 제목을 쓰지 않음
섹션을 파일로 나누기만 하면 됩니다.모든 CSS 댓글은, 그냥 댓글이어야 합니다.
reset.css
base.css
somepage.css
someotherpage.css
some_abstract_component.css
필요한 경우 스크립트를 사용하여 이러한 스크립트를 하나로 결합합니다.에서 "" "" "" "" "" "" "" ""를 하도록 할 ..cssfiles 파일
제목을 작성해야 하는 경우 파일 시작 부분에 TOC가 있어야 합니다.
TOC의 제목은 나중에 작성하는 제목과 완전히 같아야 합니다.제목을 검색하는 것은 힘든 일입니다.문제를 추가하자면, 첫 번째 헤더 뒤에 다른 헤더가 있다는 것을 정확히 누가 알겠습니까? ps. TOC를 쓸 때 각 줄의 시작 부분에 doc와 같은 * (별)을 추가하지 마십시오. 텍스트를 선택하는 것이 더 귀찮을 뿐입니다.
/* Table of Contents
- - - - - - - - -
Header stuff
Body Stuff
Some other junk
- - - - - - - - -
*/
...
/* Header Stuff
*/
...
/* Body Stuff
*/
블록 외부가 아닌 규칙 내 또는 규칙 내에서 주석 작성
먼저 스크립트를 편집할 때 50/50 확률로 규칙 블록 밖에 있는 내용에 주목합니다(특히 텍스트가 큰 경우 ;).둘째, 외부에서 "의견"이 필요한 경우는 거의 없습니다.밖에 있으면 99%가 제목이니 그렇게 유지하세요.
페이지를 구성요소로 분할
구성 요소는 다음과 같아야 합니다.position:relative,아니요.padding 니요는 없습니다.margin대부분의 시간.이를 통해 % 규칙을 훨씬 단순화할 뿐만 아니라 훨씬 단순해집니다.absolute:position요소의 ing, 절대 위치 컨테이너가 있으면 절대 위치 요소는 계산할 때 컨테이너를 사용합니다.top,right,bottom,left특성.
HTML5 문서의 대부분의 DIV는 일반적으로 구성요소입니다.
구성요소는 페이지에서 독립적인 단위로 간주될 수도 있습니다.일반인의 용어로는 블랙박스와 같은 것을 다루는 것이 타당하다면 구성요소와 같은 것을 취급합니다.
QA 페이지 예제로 다시 이동합니다.
#navigation
#question
#answers
#answers .answer
etc.
페이지를 구성요소로 분할하면 작업을 관리 가능한 단위로 분할할 수 있습니다.
누적 효과가 있는 규칙을 같은 줄에 놓습니다.
를 들어 를들면입니다.border,margin그리고.padding(그러나 아닙니다.outline모두 스타일링할 요소의 치수와 크기에 추가합니다.
position: absolute; top: 10px; right: 10px;
한 줄로 읽을 수 없는 경우에는 최소한 가까운 곳에 배치합니다.
padding: 10px; margin: 20px;
border: 1px solid black;
가능한 경우 속기를 사용합니다.
/* the following... */
padding-left: 10px;
padding-right: 10px;
/* can simply be written as */
padding: 0 10px;
선택기 반복 안 함
동일한 선택기의 인스턴스가 더 많은 경우 동일한 규칙의 인스턴스가 여러 개 발생할 가능성이 높습니다.예:
#some .selector {
margin: 0;
font-size: 11px;
}
...
#some .selector {
border: 1px solid #000;
margin: 0;
}
ID/클래스를 사용할 수 있는 경우 선택기로 태그를 사용하지 않도록 합니다.
먼저 DIV 및 SPAN 태그는 예외입니다. 절대로 사용해서는 안 됩니다. ;) 클래스/ID를 첨부할 때만 사용하십시오.
이건...
div#answers div.answer table.statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
div#answers div.answer table.statistics thead {
outline: 3px solid #000;
}
다음과 같이 작성해야 합니다.
#answers .answer .statistics {
border-collapse: collapsed;
color: pink;
border: 1px solid #000;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
왜냐하면 거기에 매달린 추가 DIV들은 선택기에 아무것도 추가하지 않기 때문입니다.그들은 또한 불필요한 태그 규칙을 강요합니다.예를 들어, 당신이 변한다면,.answer에서.divarticle당신의 스타일은 깨질 것입니다.
또는 보다 명확한 설명을 원하는 경우:
#answers .answer .statistics {
color: pink;
border: 1px solid #000;
}
#answers .answer table.statistics {
border-collapse: collapsed;
}
#answers .answer .statistics thead {
outline: 3px solid #000;
}
는 그이는입니다.border-collapse속성은 오직 적용될 때만 의미가 있는 특별한 속성입니다.table.한다면.statistics가 아닙니다.table적용되지 않아야 합니다.
일반적인 규칙은 사악합니다!
- 가능한 경우 일반/일반 규칙 작성을 피합니다.
- CSS 재설정/재설정 해제를 위한 것이 아니라면 모든 일반 마법이 적어도 하나의 루트 구성 요소에 적용되어야 합니다.
시간을 절약하는 것이 아니라 머리가 폭발하도록 만들고 유지보수를 악몽으로 만듭니다.규칙을 작성할 때 규칙이 적용되는 위치를 알 수 있지만 규칙이 나중에 문제가 되지 않는다는 보장은 없습니다.
이 일반 규칙에 추가하는 것은 사용자가 스타일을 지정하는 문서에 대해 어느 정도 알고 있더라도 혼란스럽고 읽기 어렵습니다.그렇다고 해서 일반 규칙을 작성해서는 안 된다는 것은 아닙니다. 일반 규칙을 작성하려면 해당 규칙을 사용하지 마십시오. 규칙이 선택기에 가능한 한 많은 범위 정보를 추가할 수도 마찬가지입니다.
이런 것들...
.badges {
width: 100%;
white-space: nowrap;
}
address {
padding: 5px 10px;
border: 1px solid #ccc;
}
...프로그래밍 언어에서 글로벌 변수를 사용하는 것과 동일한 문제가 있습니다.그들에게 기회를 줘야 해요!
#question .userinfo .badges {
width: 100%;
white-space: nowrap;
}
#answers .answer .userinfo address {
padding: 5px 10px;
border: 1px solid #ccc;
}
기본적으로 다음과 같습니다.
components target
---------------------------- --------
#answers .answer .userinfo address
-------- --------- --------- --------
domain component component selector
저는 제가 알고 있는 구성요소가 페이지의 싱글톤일 때마다 ID를 사용하는 것을 좋아합니다. 여러분의 요구는 다를 수 있습니다.
참고: 이상적으로 충분히 작성해야 합니다.그러나 셀렉터에서 더 많은 구성 요소를 언급하는 것은 더 적은 구성 요소를 언급하는 것과 비교할 때 더 용서적인 실수입니다.
당신이 가지고 있다고 가정해 보겠습니다.pagination.당신은 당신의 사이트 전체의 많은 장소에서 그것을 사용합니다.이는 일반 규칙을 작성하는 경우의 좋은 예입니다.예를 들면,display:block개별 페이지 번호가 연결되고 어두운 회색 배경이 제공됩니다.이러한 규칙을 표시하려면 다음과 같은 규칙이 있어야 합니다.
.pagination .pagelist a {
color: #fff;
}
이제 페이지를 사용하여 답변 목록을 작성한다고 가정해 보겠습니다. 다음과 같은 문제가 발생할 수 있습니다.
#answers .header a {
color: #000;
}
...
.pagination .pagelist a {
color: #fff;
}
이렇게 하면 원하지 않는 흰색 링크가 검은색으로 바뀝니다.
잘못된 해결 방법은 다음과 같습니다.
.pagination .pagelist a {
color: #fff !important;
}
올바른 해결 방법은 다음과 같습니다.
#answers .header .pagination .pagelist a {
color: #fff;
}
복잡한 "논리적" 논평은 작동하지 않습니다 :)
만약 당신이 "이 값은 blah-blah와 blah-blah의 높이를 결합한 blah-blah에 의존한다"와 같은 것을 쓴다면, 당신이 실수를 하는 것은 불가피하고 모든 것이 카드집처럼 무너질 것입니다.
설명을 단순하게 유지합니다. "논리적 작업"이 필요한 경우 SAS 또는 LESS와 같은 CSS 템플릿 언어 중 하나를 고려하십시오.
컬러 팔레트는 어떻게 쓰나요?
이것은 끝을 위해 남겨두세요.전체 색상 팔레트에 대한 파일을 가지고 있습니다.이 파일이 없으면 스타일에 사용 가능한 색상 팔레트가 규칙에 남아 있어야 합니다.색상 팔레트를 덮어씁니다.매우 높은 수준의 상위 구성요소(예:)를 사용하여 선택기를 연결합니다. #page그런 다음 스타일을 자체 규칙 블록으로 작성합니다.그것은 단지 색깔일 수도 있고 그 이상일 수도 있습니다.
예를 들면
#page #header .description,
#page #categories .description,
#page #answers .answer .body
{
color: #222; background: #fff;
border-radius: 10px;
padding: 1em;
}
아이디어는 간단합니다. 색상 팔레트는 기본 스타일과 무관한 스타일시트로, 계단식으로 연결됩니다.
이름이 적고 메모리가 적게 필요하여 코드를 읽기 더 쉽습니다.
이름을 적게 사용하는 것이 좋습니다.텍스트, 본문, 머리글 등 매우 간단한(그리고 짧은!) 단어를 사용하는 것이 이상적입니다.
저는 또한 간단한 단어들의 조합이 우편물, 우편물, 사용자 정보 등의 긴 "적절한" 단어들의 수프를 먹는 것보다 더 이해하기 쉽다는 것을 알게 되었습니다.
이런 식으로 어휘를 작게 유지하세요, 비록 어떤 낯선 사람이 당신의 스타일 수프를 읽으러 와도(몇 주 후에 당신처럼), 모든 선택기가 사용되는 곳보다는 단어가 어디에 사용되는지만 이해하면 됩니다.를 들어 저는 예를들사니다합용어다를 합니다..this요소가 "선택한 항목" 또는 "현재 항목" 등일 때마다.
뒷정리를 하라.
CSS를 쓰는 것은 먹는 것과 같고, 가끔은 뒤죽박죽이 되기도 합니다.그 난장판을 치우지 않으면 쓰레기 코드가 쌓일 거예요.사용하지 않는 클래스/ID를 제거합니다.사용하지 않는 CSS 규칙을 제거합니다.규칙이 충돌하거나 중복되지 않도록 모든 것을 엄격하게 관리해야 합니다.
제가 제안한 것처럼 일부 컨테이너를 스타일에 맞게 블랙박스(구성요소)로 처리하고 이러한 구성요소를 실렉터에 사용하여 모든 것을 하나의 전용 파일에 보관(또는 TOC와 헤더가 있는 파일을 적절히 분할)하면 작업이 상당히 쉬워집니다.
파이어폭스 확장 Dust-Me Selectors(팁: 사이트 맵.xml을 가리킴)와 같은 도구를 사용하여 CSS 핵과 카니에 숨겨진 정크를 찾을 수 있습니다.
를 합니다.unsorted.css
QA 사이트를 스타일링하고 있으며 이미 "응답 페이지"에 대한 스타일시트가 있다고 가정합니다.answers.css지금 , 을 를지많새은로금당만요약운추한 CSS세가면, 하그을것다야해가에 하세요.unsorted.css를 리팩터링하여 당신의 를 리팩터링하세요.answers.css스타일 시트
이에 대한 몇 가지 이유:
- 완료된 후 재팩터링하는 것이 더 빠릅니다. 그러면 규칙(아마도 존재하지 않을 것)을 검색하고 코드를 주입하는 것입니다.
- 당신은 제거할 것을 쓸 것이고, 코드를 주입하면 그 코드를 제거하는 것이 더 어려워집니다.
- 원본 파일에 추가하면 규칙/규칙 중복이 쉽게 발생함
본 은 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠCSSbloat는 객체 지향 CSS 원칙을 사용하고 있습니다.
심지어 OOCSS 프레임워크도 꽤 좋습니다.
일부 이념은 여기에 있는 주요 답변에 언급된 많은 내용과 반대되지만 일단 설계 방법을 알게 되면CSS객체 지향적인 방식으로 코드를 희박하고 평균적으로 유지하는 데 실제로 효과가 있음을 알 수 있습니다.
여기서 중요한 것은 '오브젝트' 또는 빌딩 블록 패턴을 식별하고 이를 사용하여 설계하는 것입니다.
Facebook은 OOOCSS의 제작자인 Nicole Sullivan을 고용하여 프론트 엔드 코드(HTML/CSS)에서 많은 비용을 절감했습니다.네, 실제로 CSS뿐만 아니라 HTML에서도 절약할 수 있습니다. 이는 당신이 변환을 언급한 것처럼 당신에게 매우 가능합니다.table여러 개의 기본 레이아웃div의
또 다른 훌륭한 접근 방식은 OOOCSS와 일부 측면에서 유사하며, 처음부터 확장 가능하고 모듈식으로 CSS를 계획하고 작성하는 것입니다.Jonathan Snook은 SMACSS - CSS를 위한 확장 가능하고 모듈화된 아키텍처에 대한 훌륭한 글과 책/이북을 작성했습니다.
몇 가지 해 드리겠습니다.
CSS의 의 실수 - (는 CSS의 5개의 실수 - (비디오)
대규모 CSS의 5개의 실수 - (슬라이드)
CSS 블롯 - (슬라이드)
당신은 또한 캐스케이드, 무게, 그리고 그것들이 어떻게 작동하는지 이해해야 합니다.
클래스 식별자(div.title)만 사용하고 있습니다.신분증도 사용할 수 있고 신분증이 학급보다 더 많은 무게를 가진다는 것을 알고 있었나요?
예를들면,
#page1 div.title, #page1 ul, #page1 span {
// rules
}
이러한 모든 요소는 글꼴 크기, 예를 들어 색상 또는 규칙이 무엇이든 공유합니다.#page1의 하위 항목인 모든 DIV가 특정 규칙을 받도록 할 수도 있습니다.
무게와 관련하여, CSS 축은 가장 일반적인/가장 가벼운 축에서 가장 구체적인/가장 무거운 축으로 이동합니다.즉, CSS 선택기에서 요소 지정자가 클래스 지정자에 의해 재정의되고 ID 지정자가 재정의됩니다.숫자가 카운트되므로 두 개의 요소 지정자(ulli)가 있는 선택기는 하나의 지정자(li)만 있는 선택기보다 가중치가 더 큽니다.
숫자처럼 생각해보세요.1 열의 9는 여전히 10 열의 1보다 작습니다.ID 지정자, 클래스 지정자 및 두 개의 요소 지정자가 있는 선택자는 ID가 없는 선택자, 500개의 클래스 지정자 및 1,000개의 요소 지정자보다 가중치가 더 큽니다.물론 이것은 터무니없는 예입니다. 하지만 당신은 이해할 수 있습니다.요점은, 이 개념을 적용하면 많은 CSS를 정리하는 데 도움이 된다는 것입니다.
그나저나 class="div.dll"을 가진 다른 요소와 충돌하지 않는 한 요소 지정자를 클래스(div.dll)에 추가할 필요가 없습니다.나중에 그 무게를 사용해야 할 수도 있기 때문에 불필요한 무게를 추가하지 마십시오.
앞서 언급한 것처럼 SASS와 유사합니다.
부모 클래스당 CSS를 유지하는 데 도움이 됩니다.
예.
#parent{
width: 100%;
#child1
{
background: #E1E8F2;
padding: 5px;
}
#child2
{
background: #F1F8E2;
padding: 15px
}
}
기능: 너비: #child1 및 #child2 모두에 100% 적용됩니다.
또한 #child1 특정 CSS는 #parent에 속합니다.
이는 다음과 같습니다.
#parent #child1
{
width: 100%;
background: #E1E8F2;
padding: 5px;
}
#parent #child2
{
width: 100%;
background: #F1F8E2;
padding: 15px;
}
저는 사이트에 필요한 설계를 일련의 규칙으로 변환하는 것이 어렵다고 생각합니다.사이트의 설계가 명확하고 규칙 기반이면 클래스 이름과 CSS 구조가 여기서 흐를 수 있습니다.하지만 사람들이 시간이 지나면서 사이트에 의미가 없는 작은 조각들을 무작위로 추가한다면, CSS에서 할 수 있는 일은 많지 않습니다.
저는 제 CSS 파일을 대략 다음과 같이 정리하는 경향이 있습니다.
Eric Meyer의 CSS 재설정을 기반으로 합니다. (그렇지 않으면 대부분의 요소에 대해 기본 브라우저 스타일을 재설정하는 적어도 하나 또는 두 개의 규칙이 있습니다. 예를 들어 대부분의 목록은 목록에 대한 기본 HTML 스타일처럼 보이지 않습니다.)
사이트에서 요청하는 경우 그리드 시스템 CSS. (저는 960.gs 을 기반으로 합니다.)
모든 페이지에 나타나는 구성요소의 스타일(헤더, 바닥글 등)
사이트의 다양한 위치에서 사용되는 구성요소의 스타일
개별 페이지에서만 관련이 있는 스타일
보시다시피, 대부분은 사이트의 설계에 따라 다릅니다.만약 디자인이 명확하고 체계적이라면, 당신의 CSS는 그럴 수 있습니다.그렇지 않으면, 당신은 망했어요.
질문에 대해 제기하신 높은 수준의 우려를 해결하기 위해 높은 수준의 답변을 드립니다.더 예쁘게 만들기 위해 할 수 있는 낮은 수준의 조직 트릭과 조정이 있을 수 있지만, 그 중 어느 것도 방법론적 결함을 고칠 수 없습니다.CSS 폭발에 영향을 미치는 몇 가지가 있습니다.분명히 사이트의 전반적인 복잡성뿐만 아니라 이름 지정 시맨틱, CSS 성능, CSS 파일 구성, 테스트 가능성/수용성과 같은 것들도 있습니다.
당신은 의미론을 명명하는 것이 옳은 길인 것처럼 보이지만, 그것은 한 걸음 더 나아갈 수 있습니다.구조 수정 없이 사이트에 반복적으로 나타나는 HTML 섹션("모듈"이라고 함)은 선택기 루트로 간주될 수 있으며, 여기서 해당 루트와 관련된 내부 레이아웃의 범위를 지정할 수 있습니다.이것은 객체 지향 CSS의 기본 원칙이며, Yahoo 엔지니어의 이 강연에서 더 많은 것을 읽고 볼 수 있습니다.
이러한 깔끔한 접근 방식은 ID 또는 태그 이름을 기반으로 한 짧은 선택기를 선호하는 성능 문제와는 반대로 실행될 수 있습니다.그 균형을 찾는 것은 여러분에게 달려 있지만, 여러분이 거대한 사이트를 가지고 있지 않는 한, 이것은 여러분의 선택기를 짧게 유지하도록 상기시키는 머리 뒤에 있는 가이드일 뿐입니다.성능에 대한 자세한 내용은 여기를 참조하십시오.
마지막으로, 전체 사이트에 대해 단일 CSS 파일을 사용할 것입니까, 아니면 여러 파일(페이지 단위 또는 섹션 단위 파일과 함께 사용되는 단일 기본 파일)을 사용할 것입니까?단일 파일이 성능 면에서는 더 좋지만 여러 팀 구성원을 사용하여 이해/유지 관리하기가 더 어려울 수 있고 테스트하기가 더 어려울 수 있습니다.테스트를 위해 충돌 및 의도하지 않은 계단식 테스트를 위해 지원되는 모든 CSS 모듈이 포함된 단일 CSS 테스트 페이지를 갖는 것이 좋습니다.
또는 CSS 규칙을 페이지나 섹션으로 범위를 지정하는 다중 파일 접근 방식을 사용할 수 있습니다.이 경우 브라우저에서 성능 문제인 여러 파일을 다운로드해야 합니다.서버 측 프로그래밍을 사용하여 CSS 파일을 동적으로 하나의 파일로 지정하고 통합(및 축소)할 수 있습니다.그러나 이러한 파일은 개별적이고 테스트도 개별적이기 때문에 페이지/섹션에 걸쳐 모양과 느낌이 일관되지 않을 수 있습니다.따라서 테스트가 더 어려워집니다.
고객의 구체적인 요구 사항을 분석하고 그에 따라 이러한 우려 사항의 균형을 맞추는 것은 고객에게 달려 있습니다.
제 앞에서 말했듯이: OOOCSS에 들어가세요.Sass/Less/Compass는 사용하고 싶지만 바닐라 CSS가 올바른 방식으로 사용되기 전까지는 Sass/Less/Compass는 상황을 악화시킬 뿐입니다.
우선, 효율적인 css에 대해 읽어보세요.Google Page Speed를 사용해보고 Souders가 효율적인 css에 대해 쓴 것을 읽어보세요.
그런 다음 OOCSS를 입력합니다.
- 캐스케이드를 사용하는 방법을 배웁니다. (결국 우리는 캐스케이드 스타일시트라고 부릅니다.)
- 세부적인 사항을 정확하게 파악하는 방법 알아보기(상향식이 아닌 상향식
- 구조와 피부를 분리하는 방법에 대해 알아봅니다(특이한 것은 무엇이며, 이러한 물체의 변형은 무엇입니까?).
- 컨테이너와 콘텐츠를 분리하는 방법에 대해 알아봅니다.
- 그리드를 사랑하는 법을 배웁니다.
그것은 CSS 작성에 관한 모든 것에 혁명을 일으킬 것입니다.저는 완전히 새로워졌고 그것을 사랑합니다.
업데이트: SMACSS는 OOCSS와 유사하지만 일반적으로 말하면 적응하기가 더 쉽습니다.
CSS 리팩토링에서 추출한 합리적인 CSS의 핵심 원리는 다음과 같습니다. 추가 전용에서 모듈식 CSS로
SAS로 씁니다.변수, 믹스인 등의 장점을 포기하는 것은 미친 짓입니다.
스타일 지정에 HTML ID를 사용하지 마십시오. 항상 클래스를 사용합니다.HTML ID를 올바르게 사용하면 전체 페이지에 한 번만 나타나는데, 이는 실용적인 엔지니어링에서 가장 기본적인 제품 중 하나인 재사용 가능성과는 완전히 반대입니다.게다가, ID를 포함하는 선택기를 재정의하는 것은 정말 어렵습니다. 그리고 종종 한 HTML ID를 능가하는 유일한 방법은 다른 ID를 만들어 ID가 해충처럼 코드베이스에 전파되도록 하는 것입니다.변경되지 않는 Javascript 또는 통합 테스트 후크를 위해 HTML ID를 남겨두는 것이 좋습니다.
CSS 클래스의 이름을 응용 프로그램별 기능이 아닌 시각적 기능으로 지정합니다.예를 들어 ".bundle-product-discount-box" 대신 ".highlight-box"라고 입력합니다.이러한 방식으로 코딩하면 외부 비즈니스 역할을 수행할 때 기존 스타일시트를 다시 사용할 수 있습니다.예를 들어, 우리는 법학 노트를 판매하기 시작했지만 최근에 법학 교사로 옮겼습니다.우리의 예전 CSS 수업은 디지털 문서에 대해 말할 때 의미가 있지만 개인 튜터의 새로운 도메인에 적용될 때만 혼동할 수 있는 클래스 이름인 ".download_document_box"와 같은 이름을 가지고 있었습니다.기존 서비스와 향후 서비스 모두에 더 적합한 이름은 ".pretty_callout_box"입니다.
특정 그리드 정보 뒤에 CSS 클래스의 이름을 지정하지 마십시오.CSS 커뮤니티에는 CSS 프레임워크(cough Twitter Bootstrap)의 설계자와 작성자가 "span-2" 또는 "cols-8"이 CSS 클래스의 합리적인 이름이라고 믿는 끔찍한 안티 패턴이 있었습니다.CSS의 요점은 마크업에 큰 영향을 미치지 않고 디자인을 수정할 수 있는 가능성을 제공하는 것입니다.HTML의 하드 코딩 그리드 크기는 이 목표를 훼손하므로 주말 이상 지속될 것으로 예상되는 프로젝트에서는 사용하지 않는 것이 좋습니다.나중에 그리드 수업을 피하는 방법에 대해 자세히 알아봅니다.
CSS를 여러 파일로 분할합니다.이상적으로는 모든 항목을 "구성요소"/"위젯"으로 분할한 다음 이러한 설계 원자에서 페이지를 구성합니다.하지만 현실적으로 웹 사이트 페이지 중 일부에 특이점(예: 특수 레이아웃 또는 하나의 기사에만 나타나는 이상한 사진 갤러리)이 있다는 것을 알게 될 것입니다.이러한 경우 해당 요소가 다른 곳에서 재사용될 것이 분명할 때만 해당 특정 페이지와 관련된 파일을 생성하여 전체 위젯으로 리팩터링할 수 있습니다.이것은 실질적인 예산 문제에 의해 동기 부여된 트레이드오프입니다.
중첩을 최소화합니다.선택기를 중첩하는 대신 새 클래스를 도입합니다.SASS가 둥지를 틀 때 반복 선택기의 고통을 제거한다고 해서 5단계 깊이 둥지를 틀어야 하는 것은 아닙니다.선택기를 너무 많이 사용하지 마십시오(예: ".nav"가 동일한 작업을 수행할 수 있는 경우 "ul.nav"를 사용하지 마십시오).사용자 지정 클래스 이름(예: "h2.highlight") 옆에 HTML 요소를 지정하지 마십시오.대신 클래스 이름만 사용하고 기본 선택기를 삭제합니다(예: 이전 예제는 ".highlight"여야 함).과도하게 선별된 선택기는 값을 추가하지 않습니다.
전체 응용프로그램에서 일관성이 있어야 하는 기본 구성요소를 스타일화할 때만 HTML 요소(예: "h1")에 대한 스타일을 만듭니다.일부 위치에서는 "헤더룰"과 같은 광범위한 선택기를 사용하지 마십시오.우리가 계속해서 말하지만, 대부분의 경우 특정 스타일을 원할 때마다 특정하고 이름이 잘 붙은 클래스를 사용하고 싶어합니다.
블록-요소-수정자의 기본 사항을 수용합니다.예를 들어 여기에서 그것에 대해 읽을 수 있습니다.우리는 그것을 꽤 가볍게 사용했지만, 여전히 CSS 스타일을 구성하는 데 많은 도움이 되었습니다.
저는 개인들이 파일을 섹션으로 나누고 섹션 사이에 표제 주석을 다는 것을 자주 볼 것입니다.
비슷한 것
/* Headings and General Text */
.... stuff here for H1, etc..
/* Main page layout */
.... stuff here for layout page setup etc.
이 기능은 매우 잘 작동하며 나중에 돌아가서 작업 중인 작업을 쉽게 찾을 수 있습니다.
BEM을 봐야 합니다.
이론.
BEM은 더 재사용 가능하고 모듈식으로 만들고 스파게티 코드와 특수성 문제로 이어지는 종류의 선택기 간의 충돌을 피하기 위해 CSS 선택기를 구성하고 이름을 지정하는 일련의 지침을 제공하려는 시도입니다.
그것이 올바르게 사용되면 실제로 매우 긍정적인 영향을 미칩니다.
- 스타일은 요소에 추가될 때 기대한 대로 수행됩니다.
- 스타일은 누출되지 않고 추가된 것에만 영향을 미칩니다.
- 스타일이 문서 구조와 완전히 분리됩니다.
- 스타일은 서로를 오버라이드하도록 강요할 필요가 없습니다.
BEM은 SASS와 잘 작동하여 CSS에 거의 객체 지향 스타일을 가져옵니다.단일 UI 요소의 표시를 처리하고 색상과 내부 요소의 처리 방법과 같은 '방법'과 같은 변수를 포함하는 모듈식 파일을 작성할 수 있습니다.하드 코어 OOO 프로그래머는 이 아이디어에 대해 주저할 수 있지만, 실제로 적용된 개념은 모듈화, 느슨한 결합, 긴밀한 응집력 및 컨텍스트 자유 재사용과 같은 OOO 구조의 많은 더 좋은 부분을 가져옵니다.Sass와 연산자를 사용하여 캡슐화된 객체처럼 보이는 방식으로 빌드할 수도 있습니다.
스매싱 매거진의 더 자세한 기사는 여기에서 찾을 수 있습니다. CCS Wizardry의 해리 로버츠(css와 관련된 사람이라면 누구나 읽었을 것)의 기사가 여기 있습니다.
연습 중
저는 이것을 SMACSS와 OOCSS를 사용하면서 여러 번 사용했습니다. 즉, 저도 비교할 수 있는 무언가가 있다는 뜻입니다.저는 또한 종종 제 자신의 경험이 부족한 창작물들로 인해 큰 혼란 속에서 일했습니다.
실제 환경에서 BEM을 사용할 때는 몇 가지 추가적인 원칙으로 기술을 보완합니다.유틸리티 클래스를 사용합니다. 좋은 예는 래퍼 클래스입니다.
.page-section {
width: 100%;
}
@media screen and (min-width: 1200px) {
margin: 0 auto;
width: 1200px;
}
그리고 저는 또한 캐스케이드와 특수성에 다소 의존합니다.은 "BEM"입니다..primary-box 리고그고..header가 될 것입니다.
.header {
.primary-box {
color: #000;
}
}
(저는 가능한 한 모든 것을 일반적이고 문맥이 자유롭게 만들기 위해 최선을 다합니다. 즉, 좋은 프로젝트는 거의 모든 것이 재사용 가능한 모듈에 있습니다.)
마지막으로 말씀드리고 싶은 것은 프로젝트가 아무리 작고 복잡하지 않은 것처럼 보이더라도 처음부터 이 작업을 수행해야 하는 이유는 두 가지입니다.
- 프로젝트는 복잡성이 증가하므로 좋은 기반을 마련하는 것이 중요합니다.
- 워드프레스에 구축되어 자바스크립트가 거의 없기 때문에 단순해 보이는 프로젝트도 CSS에서 여전히 매우 복잡할 수 있습니다 - 좋아요, 서버 사이드 코딩을 할 필요가 없기 때문에 그 부분은 간단하지만 브로셔 웨어 프론트 엔드는 20개의 모듈과 각각의 3가지 변형이 있습니다: 당신은 그곳에 매우 복잡한 CSS를 가지고 있습니다!
웹 구성요소
2015년에는 웹 구성요소에 대해 알아보기 시작했습니다.이것들에 대해서는 아직 많이 알지 못하지만, 그들은 모든 프론트 엔드 기능을 자체 포함 모듈에 통합하려고 합니다. 이는 BEM에서 프론트 엔드에 이르기까지 다양한 종류의 원칙을 효과적으로 적용하기 위해 노력하고, DOM fragment, Js(MVC) 및 CSS와 같이 모두 동일한 UI 위젯을 구축하는 분산되지만 완전히 결합된 요소를 구성합니다.
이렇게 함으로써, 그들은 우리가 BEM과 같은 것들로 해결하려고 했던 CSS와 함께 존재하는 원래의 문제들 중 일부를 해결하는 동시에 다른 프런트 엔드 아키텍처의 일부를 더 제정신으로 만들 것입니다.
여기에 몇 가지 더 읽을 것이 있고 또한 여기에 볼 가치가 있는 프레임워크 폴리머가 있습니다.
마침내.
저는 또한 이것이 대규모 CSS 프로젝트가 지저분해지는 것을 막기 위해 특별히 설계된 우수하고 현대적인 베스트 프랙티스 CSS 가이드라고 생각합니다.저는 이것들의 대부분을 따르려고 노력합니다.
저는 당신이 "컴퍼스 스타일" CSS 프레임워크를 보는 것을 추천합니다.
여기에 몇 가지 훌륭한 자료가 있고 일부는 이 질문에 대답하는 데 시간을 할애했지만, 개별 스타일시트 또는 개별 스타일시트에 관해서는 개발을 위해 별도의 파일로 이동한 다음 배포 시 사이트에서 사용되는 모든 일반 CSS가 단일 파일로 병합되도록 할 것입니다.
이렇게 하면 두 가지 장점을 모두 누릴 수 있고, 성능이 향상되며(브라우저에서 요청하는 HTTP 요청 수가 적음), 개발하는 동안 코드 문제가 분리됩니다.
저는 20년 넘게 캐스케이드 스타일 시트(CSS)를 사용해 왔습니다.다음은 귀사를 지원하기 위한 솔루션입니다.
- 항상 a를 통해 외부 CSS 사용
<link>태그. 외부 CSS가 "내장"보다 훨씬 우수합니다.<style>스타일 소타확을 "장할니" 수있다 습inline일스▁and니다할.<span style="color:blue;">my text</span>브라우저에 다운로드된 외부 스타일이 웹 사이트의 모든 페이지에 대해 캐시되고 하나가 아닌 모든 웹 페이지에 영향을 미치기 때문입니다.당신의 웹사이트 전체에 뿌려진 모든 스타일을 당신의 시트에 있는 CSS 클래스로 옮기는 것을 고려해보세요.이전에 상속된 스타일에 계단식으로 연결된 경우에는 셀렉터를 추가하여 가중치를 높여야 합니다.참고: Angular와 같은 많은 JavaScript API 및 기타 API는 내장된 CSS를 사용하므로 속도가 느리고 사이트를 새로 고치거나 다시 방문할 때마다 CSS를 다시 로드해야 합니다.나쁜 디자인! - 모든 기본 HTML 요소에 대해 항상 "재설정" 스타일시트를 사용합니다.부트스트랩과 같은 대부분의 CSS 패키지는 재설정 또는 재부팅 시트와 함께 제공됩니다.이렇게 하면 모든 HTML 요소 선택기의 스타일이 변경되어 모든 브라우저와 사용자 에이전트에서 보기에 적합합니다.따라서 양식 제어, 레이아웃, 텍스트 등과 같은 기본 요소에 걸쳐 디자인을 재구성하고 사용자 지정해야 하는 번거로움을 덜 수 있습니다.저는 몇 년 전에 "재설정" 시트를 직접 작성했습니다.만약 당신이 내 것을 좋아한다면 나는 곧 "유니버설 CSS 프레임워크"로 깃허브에 게시할 것입니다.모든 이전 브라우저와 새 브라우저에서 작동합니다.
- 모든 텍스트 기반 스타일은 사이트 요소를 통해 캐스케이드되고 자연스럽게 상속됩니다!따라서 글꼴 스타일, 선 높이 등을 반복할 필요가 거의 없습니다.대부분의 젊은 개발자들은 이것을 잊고 있습니다.텍스트 기반 스타일은 HTML 트리 아래로 상속되므로 부모에 한 번만 작성하면 됩니다.종종 그
<body>요소는 기본 글꼴 스타일 등을 설정하기에 가장 적합합니다. - #3 때문에 스타일 시트를 재구성하거나 관리하기 위해 SAS와 같은 CSS 프리프로세서가 필요하지 않습니다.이러한 타사 종속성으로부터 멀리 떨어져 있습니다.CSS는 사이트를 통해 스타일을 상속하거나 캐스케이드하기 위해 작성될 수 있으므로 CSS 클래스 등에서 동일한 글꼴 스타일이나 속성을 반복할 필요가 없습니다.
- 설계를 제어하는 블럭 수준/레이아웃 스타일을 그룹화합니다.최상위 HTML 블록의 ID 선택기(#myid)를 사용하여 섹션을 구분하고 CSS 선택기의 항목을 사용하여 해당 페이지 또는 웹 사이트 섹션의 특정 항목을 관리합니다.
#main .someclass {...}). , 이나 가중치가 높습니다 이들은 추적이 쉽고 분리가 쉽다는 장점이 있지만, ID 선택기는 선택성이나 비중이 매우 높습니다.ID 선택기의 가중치는 1-0-0 또는 0-1-0 또는 10인 클래스의 가중치보다 100입니다.이렇게 하면 이후의 스타일 이동으로 인해 특정 보호 섹션의 이전 사용자 정의 스타일이 손상되는 것을 방지할 수 있습니다. - 재사용 가능한 단일 CSS 클래스를 중심으로 모든 CSS를 설계합니다.공통 공유 클래스를 사용자 지정 클래스로 재정의해야 할 때까지 CSS 선택기에 더 많은 요소와 클래스 체인을 연결하지 마십시오.예:
.articlelink{...}모두가 접근할 수 있는 공유 유니버설 스타일이 될 것입니다..block1 .area2 .articlelink{...}새 클래스를 만들거나 HTML을 변경하지 않고 섹션 전체에 사용자 정의 버전을 만들 수 있습니다. - CSS 주석 사용!
/* My New Styles */...관련 CSS 블록 뒤에 따라오거나 코드에서 직관적이지 않은 것을 설명하기 위해 주석을 사용합니다. - 큰 프로젝트가 있는 경우 각 개발자가 섹션에 대한 사용자 지정 CSS 시트를 작성하되 주 사이트 스타일 시트는 상속하도록 합니다.먼저 웹 사이트의 모든 섹션이 먼저 기본 재설정 및 기본 사이트 시트에 연결되어 있는지 확인합니다.이를 통해 기본 요소 스타일, 글꼴 설정, 레이아웃, 페이지 디자인, 양식 및 색상을 먼저 기본 시트에 의해 적용할 수 있으므로 개발자는 동일한 휠을 재창조하는 것이 아니라 필요한 새로운 스타일만 추가할 수 있습니다.모든 개발자가 상속하는 기본 시트를 업데이트하면 프로젝트의 모든 섹션에서 해당 시트가 자연스럽게 나타나고 팀은 즉시 이러한 시트를 볼 수 있습니다.
스타일시트가 아니라 계단식 스타일시트로 작업하고 있다는 것을 기억하십시오!즉, 대부분의 텍스트 기반 스타일은 모든 상위 요소에서 상속되도록 설계된 다음 추가 코드 없이 수천 페이지에 걸쳐 동일한 스타일을 HTML의 트리로 캐스케이드합니다.대부분의 새로운 웹 개발자들은 CSS의 단순성을 이해하지 못하므로, 이를 수정하기 위해 SASS 및 기타 도구와 씨름합니다.그것은 단지 필요하지 않습니다.CSS는 20년 전에 여러분을 위해 이 모든 문제를 해결해준 매우 똑똑한 사람들에 의해 이런 방식으로 설계되었습니다.
만약 당신이 정말로 CSS를 올바른 방법으로 사용하기 시작한다면, 당신은 당신의 웹사이트가 사용했던 대부분의 스타일, SAS, 최소화, 그리고 다른 외부 루틴과 추가 코드를 지울 수 있고 오래 전에 최소한의 코딩을 가능하게 하도록 설계된 CSS의 계단식 효과를 즐길 수 있다는 것을 알게 될 것입니다.
<html>
<body style="color:blue;">
<main>
<section>
<div>
<div>
<div>
<p>hello blue world</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
평화.
언급URL : https://stackoverflow.com/questions/2253110/managing-css-explosion
'source' 카테고리의 다른 글
| PostgreSQL LIKE 쿼리 성능 변동 (0) | 2023.06.25 |
|---|---|
| 데이터 테이블의 셀 값 액세스 (0) | 2023.06.25 |
| SpringCloud 2020.0.2 업그레이드에서 테스트 오류가 발생함 (0) | 2023.06.25 |
| Firebase 클라우드 메시징은 무료입니까? (0) | 2023.06.25 |
| 각진 재료 날짜에 대한 기본값 설정 각진 5가 있는 피커 (0) | 2023.06.25 |