css에서 가장 귀찮았던건 flex로 box 와리가리 시키는 거였다.
왜 저기로 안가는지 왜 저건 저기 붙어 있는지, 도저히 알 수가 없었다. 후...
일단 선택자를 잠깐 공부해보면
태그 선택자
태그 선택시엔
태그이름 {속성1 : 속성값1; 속성2: 속성값2;}라는 방식으로 선택할 수 있다.
html
<div>시퍼런색</div>
css
div { background-color: blue; color: white; }
이러면 div태그 전체 배경색이 파란색이 된다. 글씨는 흰색이 되고 ㅎ
codepen이나 기타 html css를 적용할 수 있는 테스트 환경에서 시험해 보자.
결과
id, class 선택자
id는 #을 class는 .을 붙인다.
#id이름 {속성1: 값; 속성2: 값;}
.class이름 {속성1: 값; 속성2: 값;}html이 아래와 같이 있다고 하자
html
<div class="blue"> 퍼런색 </div> <div id="hello"> 안녕 </div>
css
.blue { background-color: blue; } #hello { color: red; }
로 선택할 수 있다.
결과
부모자식 선택자
부모 태그 하위에 있는 태그를 선택하는 방법이다. id와 class로도 된다.
상위태그이름 하위태그이름 {속성1: 값; 속성2: 값;}html
<div class="parents"> <span class="child"> 응애 </span> </div> <span class="child">응애아님</span>
상기 코드에서 응애 span은 div의 하위(자식)이다.
응애아님은 독립적인 친구임 저기서 div 아래 span만 잡고 싶다면 아래 css를 보면 된다.
css1
div span { border: 1px solid black; }
이러면 div 아래 span에만 테두리가 생긴다.
css2
.parents .child { border: 1px solid black; }
클래스나 아이디로도 가능하다. 띄어쓰기가 매우 중요함.
결과
다중 조건 선택자
AND나 OR같은 방식이 되기는 한다. 근데 이거 쓸 정도면 얼마나 복잡한건지??
OR부터 확인해보자
OR은 콤마를 붙여주면 된다.
태그이름1, 태그이름2 {속성1: 값; 속성2: 값;}AND의 경우
태그이름1태그이름2 {속성1: 값; 속성2: 값;}이렇게 띄어쓰기 없이 쓰면 AND가 된다. 동시에 만족해야함.
html
<div class="this">이거랑</div> <span class="that">저거도</span> <div class="that">이건뭐</div>
css
span, .this { background-color: red; } div.that { border: 1px solid black; }
span, .this는 OR이다. span인 "저거도"랑 "this"클래스의 배경을 빨간색으로 정해준다.
띄어쓰기 없이 붙인 div.that는 div면서 that클래스를 지칭하기 때문에, "이건뭐"에 테두리선만 만들어준다.
결과
프론트엔드, 목업이나 css는 아주 잠깐 공부하고 말아서 복잡한 선택자시 헷갈리긴 함.
이거 외에도 몇가지 더 있다.
- 인접 형제 셀렉터 (태그명 + 태그명)
- 형제 셀렉터 (태그명 ~ 태그명)
후... 이거까지 써야 하나 싶기도 하고 그래도 정리를 해보자면
인접 형제 선택자
같은 부모를 가진 형제 태그중에 인접한 태그(바로뒤)에만 적용이 된다.
태그명 + 태그명 {속성1: 값}html
<div class="mom"> <p class="first"> 첫째</p> <p class="third"> 원래 있던 셋째</p> <p class="second"> 둘째</p> <p class="third"> 셋째</p> <p class="third"> 두번째 셋째</p> </div>
css
.second + .third { border: 2px solid black; }
.second + .third 이므로 .mom 아래 형제중 .third가 선택 된다.
third가 3개임에도 second 바로 뒤에 오는 third만을 선택한다.
만약 .first + .third를 선언하게 되면 "원래 있던 셋째"만 선택된다.
결과
형제 선택자
위 인접 형제 선택자와 헷갈릴 수 있겠다.
태그명 ~ 태그명 {속성1:값;}html
<div class="mom"> <p class="first"> 첫째</p> <p class="third"> 원래 있던 셋째</p> <p class="second"> 둘째</p> <p class="third"> 셋째</p> <p class="third"> 두번째 셋째</p> </div>
css
.second ~ .third { border: 2px solid black; }
형제 선택자는 같은 부모를 가진 애들중에 앞태그명 뒤에 오는 모든걸 선택해준다.
당연히 앞에 있는 "원래 있던 셋째"는 여기서도 선택되지 않는다.
딱 보면 알 수 있게 쉬움 ㅎ
결과
