CSS

스타일 엔진은 키 선택자(가장 오른쪽에 위치하며,마지막에 작성된 선택자)로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지를 확인한다. 만약 엘리먼트가 이 규칙에 적합하거나 적합하지 않다는 게 확인되면 멈추게 된다. 가장 기본적인 개념은 규칙 필터링으로 엘리먼트와 관계없는 규칙을 매칭하는데 시간을 낭비하지 않게 하는것이다. 성능을 비약적으로 향상시키는 방법은 바로 매칭을 줄이는 것이다. 주어진 엘리먼트가 적합한지 확인하는데 고려해야 할 규칙의 수가 적을수록 성능이 좋아진다. M9에서는 효율적인 선택자활용을 위해서 다음을 참고한다.

공통선택자(전체선택자) * 는 문서안의 모든 요소를 읽어내리기 때문에 로딩속도에 영향을 미치므로 한번만 사용한다.

/* mong9.css */
*, *:before, *:after {
    border-color:#dde6f5;
    border-width:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

HTML요소를 직접 지칭하는 선택자로써 CSS 상단에 위치시킨다.

/* 태그선택자  미완성 20180814 */
html,.normalize,.m9_editor,.m9_editor_box {
    font-family:'Source Sans Pro','Open Sans',sans-serif;
    font-weight:300;
    font-size:14px;
    font-size:.95rem;
    line-height:1.65em;
    letter-spacing:-0.015em;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:none;
    color:inherit
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html{color:#222} /* 전체 글자색 정의 */
p{line-height:1.8em;color:#555;}
fieldset{border:none}
img,embed,object,video{max-width:100%}
h1, h2, h3, h4, h5, h6 {color: #222;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit;text-decoration: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
table {border-collapse: collapse;border-spacing: 0;}

strong,b {font-weight:500 !important;}
hr {background:#dee3eb;height:1px;margin:1em 0;}

a{background:transparent;color:inherit;*color:#333;text-decoration:none}
a:link{text-decoration:none}		
a:visited{text-decoration:none}	
a:active{text-decoration:none}	
a:hover,a:focus{text-decoration:none;}	

blockquote { }

종속 비종속 개념파악

일반적으로 많이 쓰는 방식이므로 헷갈리기 쉬운 부분만 정리한다.

/* CSS */
.class1 {background:yellowgreen;color:darkgreen}
div.class2 {background:darkgreen;color:yellowgreen}
div .class3 {background:darkgreen;color:yellowgreen}

<!-- HTML -->  
<p class="class1">class1 적용</p>  
<p class="class2">class 미적용</p>  
<div class="class2">class2 적용</div>   

<div>
    <ul>
        <li class="class1">클래스1 적용</li>
        <li class="class2">클래스 미적용</li>
        <li class="class3">클래스3 적용</li>
        <li class="class2 class3">클래스3만 적용</li>
    </ul>
    <p class="class3">클래스3적용</p>
</div>

4줄과 5줄의 차이를 유념한다. 4줄의 경우 .class2가 적용되는 조건은 반드시 div에 포함된 경우에만 적용된다.5줄의 경우는 div의 하위구조에서 어떤곳이라도 적용이 된다.

class요소 대신 사용할 수 있는 태그가 있는지 확인한다. class가 구조를 대신할 수 없다는점을 명심한다.

class사용은 최소한으로 최대의 효율을 낼수있도록 한다. 불필요하게 많은 class선택자를 사용하지 않는다.

중복되는 스타일을 공유하는 class나 id가 있는지 확인한다.

h1 {
    font-size: 2.1rem;
    line-height: 1.2em;
    letter-spacing: -0.035em;
	padding-bottom:30px;
}

/* 잘못된 예 (태그스타일과 중복되는 클래스) */
.h1 {font-size:2.1rem;line-height:1.2em;letter-spacing: -0.035em;padding-bottom:30px;}

<div class="h1">잘못된 예</div>
<h1>올바른 예<h1>

단 한번 유일하게 적용될 스타일에만 사용을 한다.

디자인적인 요소를 위해서 생성하지 않고 요소의 배치방법을 지정할때 사용한다.

꼭 필요할때만 사용한다.

두 개 이상의 선택자 요소가 모인 선택자로써

하위선택자와 자식선택자 개념을 확인하고 넘어간다.

/* 하위선택자 */
section ul {border:1px dotted black}

/* 자식선택자 */
section>ul {border:1px dotted black}

하위선택자는 부모요소에 포함된 '모든' 하위요소에 스타일을 적용한다.

자식선택자는 부모의 "바로 아래" 자식요소에만 적용한다.

인접 형제 선택자와 일반 형제 선택자의 개념을 확인하고 넘어간다.

/* 인접 형제 선택자 */
h1+ul {background:yellowgreen;color:darkgreen}
<section>
    <ul></ul>
    <h1>H1</h1>
    <ul></ul>
    <ul></ul>
</section>


/* 일반 형제 선택자 */
h1~ul {background:yellowgreen;color:darkgreen}
<section>
    <ul></ul>
    <h1>H1</h1>
    <ul></ul>
    <ul></ul>
</section>

인접 형제 선택자는 조건을 충족시킨 첫번째 동생요소에만 적용한다.(7줄)

일반 형제 선택자는 조건을 충족하는 모든 동생요소에 적용한다. (17,18줄)

형 요소에는 모두 적용되지 않는다.

위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정한다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높으므로 참고한다.

E[A="V"]형식은 속성과 속성값이 완벽하게 일치하는 경우에 선택되지만 E[A~"V"]선택자는 띄어쓰기를 통해 여러개 올 수 있는 속성값중 하나만 일치해도 선택

/* 속성선택자 패턴 */
[A] 'A' 특성을 가진 모든 요소를 선택
E[A]  'A'속성이 포함된 요소 E를 선택
E[A="V"] 'A'속성값이 정확하게 'V'와 일치하는 요소 E를 선택
E[A~="V"] 'A'속성값에 'V'가 포함되는 요소 선택  ~는 공백을 의미한다
E[A^="V"] 'A'속성값이 'V'로 시작하는 요소를 선택
E[A$="V"] 'A'속성값이 'V'로 끝나는 요소를 선택
E[A*"V"] 'A'속성값에 'V'가 포함되는 요소를 선택
E[A|="V"] 'A'속성값이 정확하게 'V'이거나 'V-'으로 시작되는 요소 E를 선택


/* [A] */
[target] {font-weight:600}

/* E[A] */
a[href] {background:#232323;color:#fff}

/* E[A="V"] */
input[type="text"] {width:150px;border:1px solid #e8eef6}
[target=_blank] {color:red} /* target="_blank" 가 있는 모든 요소 선택

/* E[A$="V"] */
a[href$=".xls"] {background:darkgreen}
a[href$=".pdf"] {background:darkgreen}

/* E[A^="V"] */
a[href^"https"] {color:#8f919a}

/* E[A~="V"] */
ul[class~="list-style-1"]>li:before{content:"."}
ul[class~="list-style-2"]>li:before{content:"-"}

[title~flower]  /* flower 가 포함된 제목 특성을 가진 모든 요소 선택 */

/* E[A*="V"] */
a[href*="mong9"] /* href속성값이 하위 문자열 "mong9"를 포함하는 모든 <a> 요소를 선택 */
.small[class*=tab-btn-on], 
.small[class*=tab-btn-off]{min-width:0;padding:0 10px}
.large[class*=select-box] .selectbox{padding:5px}
.small[class*=select-box] .selectbox{padding:1px}

E = elementor (요소)

A = attribute (속성)

V = value (속성값)

구조(웹문서 소스)에는 실제로 존재하지 않지만 임의로 가상의 선택자를 지정하여 사용하는것으로 M9에서는 a태그에서 활용한다.

여러가지가 있지만 M9에서 사용중인 가상선택자만 정리한다

CSS3을 지원하지 않는 IE8의 크로스브라우징을 위해 싱글콜론(:)을 사용한다.

/* 가상선택자 */
E:link  
E:visited
E:active
E:hover
E:focus

/* 가상 엘리먼트 선택자 */
E:first-line /* E요소의 첫번째 라인 선택 */
E:first-letter /* E요소의 첫번째 문자 선택 */
E:before /* E요소의 시작부분에 콘텐츠를 추가 */
E:after /* E요소의 끝부분에 콘텐츠를 추가 */

/* 마우스 드래그 */
:-moz-selection{background:#f64f59;color:#fff}
:-webkit-selection {background:#f64f59;color:#fff}
:selection{background:#f64f59;color:#fff}

/* ex */
.class ul li:first-child {font-weight:600}
.class ul li:first-letter {font-size:30px;color:blue}

.gnb:after{display:block;clear:both;content:''}
.gnb li {float:left;margin-right:5px}
.gnb li:before {padding-left:5px;content:'|'}
.gnb li:first-child::before {content:''}

:link와 :visited는 문서안의 링크와 관련되서만 쓸수있고 :active,:hover,:focus는 링크뿐만 아니라 다른 요소에도 적용 가능하다.

before,after 사용시 반드시 content 속성과 함께 쓴다.

스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용하게 되면 스타일이 충돌할 수 있다. 그렇기때문에 선택자 간의 우선순위를 파악하도록 한다.

스타일 우선순위가 같거나, 계산방법이 없는 경우 마지막에 지정된 스타일이 우선적용된다.

일반적인 우선순위는 자동으로 이 순서로 지정이 된다. 하지만 M9에디터에서는 중복사용을 하지않는것을 원칙으로 한다. 최소한의 코드로 최대의 효과를 내야한다는것을 항상 염두해 둔다.

/* 선택자 우선순위 예시 */
ul+ol li.num {}
li#selector1 {}

<ul>  
....
</ul>  
<ol>  
    <li class="num" id="selector1"></li>  
</ol>  

4번의 스타일이 적용된다.

M9에디터에서 사용하고 있는 선택자 예제

/* 공통선택자 */
*,*:before,*:after {
    border-color:#dde6f5;
    border-width:0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* 타입선택자 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,
figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
h1,h2,h3,h4,h5,h6{color: #222;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table{border-collapse:collapse;border-spacing:0}
strong,b{font-weight:600 !important}
p{line-height:1.8}
hr{background:#dee3eb;height:1px;margin:1em 0}

a{background:transparent;color:inherit;*color:#333;text-decoration:none}
a:link{text-decoration:none}		
a:visited{text-decoration:none}	
a:active{text-decoration:none}	
a:hover,a:focus{text-decoration:none}	

/* ID선택자는 정의된 레이아웃에서 사용 */
#wrapper{max-width:2000px;margin:0 auto}
header,div,.container,.content,footer,section,article 
<div id="contentWrap">
<div id="cssContentBox">

/* 교차속성 */
input[type="submit"].line.icon:before,
input[type="reset"].line.icon:before,
input[type="button"].line.icon:before,
button.line.icon:before,
.button.line.icon:before {
color: #bbb;
}

<a class="button line icon" href="#"><버튼>