강사님이 HTML, CSS는 최대한 빠르게 진행한다고 하셨습니다. JS에 힘을 쏟아야 한다며 앞부분은 최대한 간략하고 핵심만 짚고 넘어가신다고 하시더군요. 저는 HTML과 CSS를 한두번 빠르게 본게 전부라 걱정이 되었고 아무래도 JS만 선행하는것보다는 앞부분도 인강으로 같이 채워나가야 할것 같았습니다. 그 중에서도 제가 가장 어려워한 CSS 선택자와, 속성(특히 flex와 position)들을 위주로 보기로했습니다.
CSS 선택자
옛날에 한번 들은적이 있는 CSS수업이지만... 선택자에 대해서 이해한바가 거의 없었습니다. 그당시에는 "저 많은걸 다외워야해? 그냥 태그 선택자나 클래스 마구써서 만들면 되지않나?" 라고만 생각해서 나머지 선택자를 소홀히했었어요. 그렇지만 이제는 외우고 익혀야 할 때인것 같습니다. 나머지 선택자도 모두 쓰임새가 있더라구요. 마침 강사님 특강때 수많은 선택자들을 전부 이해해야하냐고 질문을 했었는데 돌아오는 대답은 "거의 다 알긴 해야한다" 였습니다. 어쩔수없네요. 저에게 중요한건 실무입니다.
Ch7. CSS 개요
선택자
수많은 HTML요소중 어떠한 것을 골라서 CSS를 부여해야합니다. 이때 "어떤 html코드를 어떻게" 선택하는지를 정하는것이 바로 선택자입니다. 저희는 손짓이나 "이거, 저거, 저기"와 같은 표현으로 페이지의 특정한 부분을 지정할 수 있지만 컴퓨터는 알 수 없겠죠. 따라서 CSS파일과 소통하기 위해서 가장 필수적인 문법이라고 알면 될것 같습니다.
기본 선택자
전체 선택자
기호: *
HTML의 모든 요소를 선택합니다. 모든 요소를 선택하는 만큼 큰 프로젝트에서는 거의 쓸일이 없겠네요. 그렇지만 뒤에 나올 복합 선택자와 연결되어 가끔 쓰인다고 합니다.
지금부터 임의의 태그를 전부 ABC 로 지칭하겠습니다.
태그 선택자
기호: ABC
특정한 태그 요소를 선택하는 선택자입니다. 역시 마찬가지로 프로젝트가 커지게 된다면 너무 넓은 태그 범위 전체를 선택해버리기 때문에 복합선택자와 연결시켜 서 범위를 좁혀 사용해야할것 같습니다.
클래스 선택자
기호: .class
앞서 언급한 태그 선택자는 고유의 선택자가 아니기 때문에 불편함이 따릅니다. 따라서 html의 class 속성을 부여한후, 해당 class만 따로 선택할수 있게 하는것이 클래스 선택자 입니다. 그러나, 중요한점은 다른 태그 요소들이더라도 같은 class이기만 하면 모두 적용이 된다는 것입니다. 즉, class 자체는 중복되서 선언이 가능합니다. 또한, 아래와 같이
<div class="banana apple"></div>클래스 자체를 여러개 넣어둘수가 있습니다.
ID 선택자
기호: #id
역시나 고유의 선택자로 지칭할 수 있는 ID 선택자입니다. Class와 사용법은 거의 동일하며, 대신 id는 고유의 값이기 때문에 class와 같이 여러 요소에 중복해서 사용할수는 없습니다. 또한 class는 한번에 여러개를 선언 가능하지만 id는 하나만 가능하다는 차이점이 존재합니다. 이 차이점을 아는것도 중요하겠습니다.
복합선택자
앞서 배운 기본선택자들을 함께 사용하는 선택자입니다. 더욱더 자세하게 요소를 선택할수 있어질것 같습니다
일치 선택자
기본선택자 2종류(2개이상?)를 동시에 만족하는 요소를 선택할수있게합니다. 예를들어
span.orange
해당 선택자 구문은 span태그 선택자 + orange 클래스 선택자가 동시에 사용된 것입니다. 그러나, 이것도 순서가 있습니다
.orangespan
위와 같이 된다면 컴퓨터는 이것을 orangespan클래스로 인식할 것입니다. 따라서 순서에 유의해서 사용해야 합니다.
자식 선택자
기호: A>B
A의 자식요소 B를 선택하는것입니다. 이때, 자식과 후손의 차이를 명확하게 해야하는데 자식은 바로 한단계의 차이를 의미하며 후손이란 아래에 속한 전체를 의미합니다(조상과 부모관계도 똑같습니다). 이때 A에는 아무런 CSS가 적용되지 않고 B만 적용된다는것을 유념해야합니다.
하위(후손) 선택자
기호: A B
아무런 기호가 안보이네요. 사실은 띄어쓰기 한칸이 후손 선택자 입니다. 어떻게 보면 자식선택자와 비슷하지만 앞서 말했듯이 자식과 후손은 차이가 있습니다. 그러므로 직접적인 자식이 아니라 후손이기만 하면 적용이 됩니다.
div .orange
위의 코드는 div요소의 하위요소인 orange 클래스를 선택하는 것입니다. 일반적으로 자식선택자보다도 훨씬 자주 씁니다.
인접 형태 선택자
기호: A+B
선택자 A의 다음 형제 요소 B 하나를 선택합니다.
형제란 부모가 같으면(같은 레벨단) 형제라고 부릅니다.
.orange+li
orange 클래스를 찾아서 다음 번에 있는 li 형제 요소를 선택합니다.
일반 형태 선택자
기호: A~B
인접 형태 선택자의 확장 버전입니다. 즉 다음 형제 요소중에 해당하는 모든것을 선택합니다. 보통 일반 형태 선택자보다는 인접형태 선택자를 자주 사용합니다.
개인적인 생각으로는 일치선택자, 후손선택자, 인접형태선택자가 자주 사용될듯 합니다.
가상 선택자
말그대로 저희가 만든 선택자가 아닌 가상으로 만들어져있는 선택자들입니다.
가상 클래스 선택자
기호::
선택자뒤에 : 를 붙여 사용합니다. 특정한 조건이 만족되면 동작을 하게 되어있습니다. 몇가지의 가상 클래스 선택자를 설명해보겠습니다.
A:hover
선택자 A라는 요소에 마우스 커서가 올라가 있는 동안 선택합니다.
A:active
선택자 A라는 요소에 마우스 클릭을 하는동안 선택합니다.
A:focus
선택자 A라는 요소가 포커스 되면 선택합니다. 이때 포커스라는것은 특정한 html요소에만 가능합니다: Input, a, button, label, select... 즉, 주로 사용자한테 입력을 받는 요소들이 가능합니다. 그렇지만 나머지 요소에도 강제로 focus를 부여할수가 있는데 바로 해당 html속성에 tabindex="-1"을 주면 됩니다.
이 선택자들은 모두 동작에 관련한 거라면 이번엔 특정한 요소들을 선택할수있는 가상 클래스 선택자입니다.
A:first-child
선택자 A가 형제 요소중 첫번째이면 선택합니다. 예시를 들어 설명해보겠습니다.
<div class="fruits">
<p>오렌지</p>
<div class="summer">
<span>딸기</span>
<span>사과</span>
</div>
</div>.fruits span:first-child {
color: red;
}다음과 같은 코드가 있다하면, 우선 fruits class와 span태그 복합선택자를 통하여 span을 찾고(이때는 딸기가 되겠네요) 해당 요소의 부모(summer class)의 첫번째 자식인지를 보는겁니다. 이때는 딸기 span이 첫자식이므로 맞게 찾았네요.
이때 중요한것은, 해당 선택자는 일치 선택자이므로 first-child도 성립하고, .fruits span도 성립해야한다는 것입니다. 다른 예시를 보겠습니다.
<div class="fruits">
<p>오렌지</p>
<p>딸기</p>
<span>사과</span>
</div>이러면 .fruits span의 첫번째 자식이 p이기 때문에 선택되지 않는다가 중요한것입니다. 이런경우엔 아무것도 선택이 되지 않네요. 이렇게 보니 가상 클래스 선택자는 전체적으로 if문 느낌이 있는것 같습니다. if 마우스로 클릭할때, if 마우스가 위에 있을때, if 첫번째 자식일때와 같이 말이죠...
A:last-child
반대로 막내 자식이면 선택이 되는것입니다. first-child와 거의 동일하다고 볼수있습니다.
A:nth-child(n)
첫째와 막내뿐만이 아닌 몇번째 형제인지까지 선택이 가능해졌습니다.
.fruits *:nth-child(2)
드디어 처음본 전체 선택자가 혼합되었습니다. 이러면 fruits 클래스의 전체 하위요소중 두번째 형제 요소를 선택한다는 것입니다. 이렇게 nth-child와 전체선택자는 같이 자주 쓰입니다.
.fruits *:nth-child(2n)
숫자뿐만이 아니라 위와 같이 모든 짝수번째 요소들을 선택도 가능합니다(홀수는 2n+1이겠죠). 이때 인덱싱은 0부터 시작합니다.
A:not(B)
A를 만족하는 선택자중 B가 아닌 모든 요소를 선택합니다.
가상 요소 선택자
기호: ::
가상 클래스 선택자가 ":"였다면 가상 요소 선택자는 "::"입니다. 존재하지 않는 가상의 요소를 선택합니다. 즉 없는 요소를 만들어서 실제로 삽입합니다. 이때 모두 인라인(글자) 특성일 가집니다. 자주 쓰이는 선택자.
A::before
선택자 A요소의 내부 앞에다가 내용(content)을 삽입합니다.
<div class="box">content!</div>.box::before {
content: "JYROH";
}이러면 JYROHcontent! 가 출력이 되겠네요. 앞에다가 JYROH를 넣기때문입니다.
A::after
선택자 A요소의 뒤에다가 내용(content)을 삽입합니다. 그러면 content!JYROH가 되겠네요.
before와 after는 모두 내용을 인라인으로 넣어주기 때문에 속성값으로 content가 필수적입니다(설사 비워두더라도).
속성 선택자
특정한 html 속성(attribute)를 포함한 요소를 선택합니다. [disabled]처럼 써주게 되면 disabled된 속성들만 선택하게 됩니다. 특이한 속성들을 찾을때 쓰이지만 실무에서는 많이 쓰이진 않습니다. 이때, [type="password"]와 같이 속성과 속성값까지 일치하게 찾을수도 있습니다.
스타일 상속
css 스타일이 부모요소로부터 자식에 상속되는것을 말합니다
<div class="solar-system">
태양계
<div class="planet">행성
<div class="mercury">수성</div>
<div class="venus">금성</div>
<div class="earth">지구</div>
</div>
<div class="satellite">
<div class="moon">달</div>
</div>
</div>.planet{color:red;}
저는 planet 클래스에만 색상값을 줬는데 하위 자식에까지 색칠이 되었습니다.
부모로부터 상속되는 CSS속성들: 모두 글자/문자 관련속성들이다(물론 전체는 아님)
이외의 속성들을 상속하고싶으면 inherit 속성을 통해 강제상속을해주면 된다.
선택자 우선순위
우선순위란 같은 요소가 여러 선언의 대상이 된경우 어떤 선언의 css속성을 우선 적용할지 결정하는 방법입니다. 우선순위를 모르면 덮어쓸수가 없기때문에 굉장히 중요합니다. 우선순위는 다음과같은 규칙을 따릅니다.
1. 점수가 높은 선언이 우선이다.
2. 점수가 같으면 가장 마지막에 해석된 선언이 우선이다.
<div id="color_yellow" class="color_green" style="color: orange">
Hello world!
</div>div {
color: red !important;
}
#color_yellow {
color: yellow;
}
.color_green {
color: green;
}
div {
color: blue;
}
* {
color: darkblue;
}
body {
color: violet;
}점수계산을 그러면 어떻게할까요? 일반적으로 위와같은 순서의 우선순위를 가집니다.
!important 속성: 99999999999점. 즉 무수히 큰 점수입니다.
id 선택자: 100점
class 선택자(가상 클래스 선택자도 포함됩니다): 10점
태그 선택자, 가상 요소 선택자(not은 제외): 1점
전체선택자: 0점
상속(위의 예시에서 body): 점수 별도로 계산하지 않습니다.
style 인라인 선언: 1000점 (점수가 굉장히 높습니다. 따라서 일반적으로 사용을 자제해야합니다).
개인적인 궁금증
우선순위를 나눌때, 만약 attribute가 겹치지 않는다면 어떻게 될까요?
#color_yellow {
color: yellow;
}
.color_green {
color: green;
font-size: 70px;
}이때 우선순위 계산에 의해서 색깔은 yellow가 적용되는게 명백합니다. 그러면 font-size 속성은 작동을 안할까요?
당연히 작동을 합니다. 겹치는 attribute에 대해서만 우선순위가 나누어지기 때문입니다. 즉 기준은 항상 attribute 기준입니다. 결국 해당 코드는 노랑색 70px의 글이 작성될 것입니다.
마치며
css는 선택자와 속성만 알면 사실은 끝입니다. 이번시간 선택자에 익숙해졌으니 속성값들을 제대로 배운후 자유자제로 원하는 요소에 적용시킬수만 있다면 될것 같습니다.
