9일. HTML(8) - 셀렉터를 이용한 엘리먼트 선택

CSS 시작 :) 

 

CSS로 스타일을 익히는 방식

- Cascading 방식 (=계단식. 덧칠하기)

- tag는 본래 스타일을 가지고 있는데, 원래 스타일에서 Cascading 하면서 스타일을 입히는 것

 

CSS 속성을 알아야 함

- 스타일 입힐 수 있는 가지?속성? 수

  폰트, 배경, 경계선, 색상, 마진, 패딩, 박스 등등

  처음이니까 많아보이는 것뿐~~ 

- 대상 선별 방법

   1) 인라인태그 사용 <- 이건 동일한 스타일 주기 위해서는 반복해야 함 

   2) 선택자 사용 - 이게 더 바람직하다. 

       ID, Class, Element (=tag) 

       ex) a라는 아이디를 가지는 엘리먼트에 색상을 적용하려면 : #a

       ex) a라는 그룹에 포함된 엘리먼트에 색상을 적용하려면 : .a

            - class는 '같은 그룹'으로 묶어줄 수 있는

            a라는 태그에 포함된 엘리먼트에 색상을 적용하려면 : a 

---

.h라면 -> 3개

aside.h1은 -> 1개? 3개? (난 3개..) 1개다. 

a - <a>

.a - <*class="a">

#a - <*id="a">

 

* 의미 = 모든

 

aside.a 의 의미는 <aside class="a">

 

* 생각보다 많이 쓰는거

• ltr 왼쪽에서 오른쪽으로 써지는
• rtl 오른쪽에서 왼쪽 ex) 계산기 만들때도 그렇고. 
• dir='rtl' 이런식으로 써줌
• h1[dir ='rtl'] 이런식으로 해주면 h1 중에서! 그 속성을 가진 것에만 스타일 넣어주는 것

저 위에 코드가 맞나...ㅋㅋㅋㅋ (아래 선생님거랑 비교해보기) 결과는 나왔찌만

선생님 코드는 *[dir='rtl']{

                             color:green;

                     } 임

 

- dir를 설정한 값만 css 적용 가능 (그래서 ltr이 다 있을거라고 생각하고 위에서 적용하면 안 먹힘)

 

 

 

developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS reference - CSS: Cascading Style Sheets | MDN

* 선생님의 공부 방법

- "저는 책을 보지 않아요. 저자가 설명하고 싶은거만 쓰는 것도 문제인데, 설명하고 싶은대로만 써요."

- "저는 레퍼런스를 봐요. 그리고 커뮤니티에서 같이 의견을 나눌 사람들이 쌓여있어요. 그렇게 공통 분모가 커지고 커질수록 시야가 커지고, 새로운 내용이 등장해도 새롭게 느껴지지 않고 '왜 이제야 나왔지' 싶고 그래요. 이렇게 길을 찾아서 공부합니다. 여러분도 언젠가 이렇게 되지 않을까요."

- "기본 개념 잡을 때는 책을 볼 수 있지만, 이걸 왜이렇게 써야하는지는 입문서에서 볼 수 없어서 입문서 의미가 없어요. 필요성이 묻어나야 하는데..."

 

developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Attribute selectors - CSS: Cascading Style Sheets | MDN

* 나중에 잊어먹더라도 이런게 있었지~ 하는 정도는 기억해두는게 좋다~

Internal links, beginning with "#" */ a[href^="#"] { background-color: gold; }

샵으로 시작하는 것을 의미

Links with "example" anywhere in the URL */ a[href*="example"] { background-color: silver;

example이 포함되는 것을 의미

Links with "insensitive" anywhere in the URL, regardless of capitalization */ a[href*="insensitive" i] { color: cyan;

여기서 i는 대소문자 무시하라는 것 (ignore)

Links with "cAsE" anywhere in the URL, with matching capitalization */ a[href*="cAsE" s] { color: pink; }

이건 대소문자 가리라는 것

Links that end in ".org" */ a[href$=".org"] { color: red; }

이거로 끝나는 것

Links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green;

2가지 동시에 만족하는 것도 표현 가능

 

빈 공백도 의미가 있다.

자식 - 바로 밑에 포함

자손 - 밑에 포함된 것의 밑에 (공백은 자손이다) 

 

nav 안의 li만 찾는 

여기 1.2.3 li는 색이 안 먹힌 이유가 저건 nav로 안 묶어줬기때문!!

 

"이거 유용합니다" 

li a{

<span>으로 본문을 묶어서 특별하게 해주는 경우가 있다.

바로 밑에 <a>를 선택하고 싶지 <span><a>인거 선택하고 싶지 않은데 선택됨

-> 자식 연산자 활용 

 

-> li>a {

 

A+B

Adjacent sibling selector

- 바로 밑 동생이 B여야 하는 것

 

A~B

- 동생들 중에~ B를 찾는 것 (동생이 한 명일수도, 두 명일수도)

 

실습) id로 aa 주고 section 찾게 해주는거

       aa~section

       aa+section : 바로 밑동생이 section일 경우만 선택이 됨

                        바로 밑동생이 nav면 선택 안 됨. (=배경 안 먹힘)

       Q. 섹션 2개인데, 그 중에서 위에 section 선택하려면? 

           (내 답) aa~+ ... ㅠㅠ ㅋㅋㅋㅋ 

            -> #aa+nav+section (동생의 동생을 절대경로로 써준 느낌이랄까...)

section h1

- section 중에서 h1을 자손으로 가진 갯수

자식!은 direct로

a.first는 맨 밑에 저거 + span 

-> +span은 바로 '밑에 동생'으로 붙어있는거니까 여기서는 없음

 

만약 물결로 바뀌어버리면 1개 있음

 

 

2가지가 다 포함된 애 

- <h1 class="h1"/>

id > class > tag 순으로 우선순위

먼저 #h2가 색깔이 바뀜 (그린)

그 다음에 h1이 바뀜 (오렌지) -> 그린이었다가 오렌지로 바뀌어야 하는데... 

- 나중에 칠한 애가 무조건 이긴다 (cascading이니까) 

  -> 그런데 안 바뀜 ㅠㅠ  

  -> id가 선택이 좁은데, 좁을수록 힘이 세다. 

다시 또 .h1 (빨간색) -> 빨간색 (애가 더 힘이 세니까) 

 

class명으로 아무리 설정해봤자 id를 덮어씌울 수가 없다.

 

우선순위가 같으면 나중에 덮에씌운게 이긴다.

세번째는 태그니까 나가리

1.2.4 class 중 비교인데 ... 나도 빨간색으로 풀었는데

-> 1번 빼고 사실 앞에 다들 *이 있는게 

    1번보다 근데 범위가 더 좋은게 '복합 연산자'

- 사실 문제에서 section (복합연산자) 보고 2, 3만 비교하면 됐던거 

 

- 3은 클래스 아니니 나가리

- 1, 2 중 비교인데 '속성' 가질 경우 win 

 

- h1은 앞에 태그 쓰기 되어 있어있음

  class의 속성이 "" 로 표현 (lang 관련) vs *.h1 

  애가 한정사가 들어가서 더 정밀도

- .a의 의미 = <*class="a">

  [lang="ko"] = <*lang="ko"> lang 태그 안에 ko 들어간 걸 찾는 것

  .a = <*class="a">

  h1.a = <h1 class="a">  위에보다 이게 좁다

- [lang="ko"] 모든 태그에서 

  h1[lang="ko"] h1 태그에서 lang 중 ko를 가지고 있는 것

- class나 lang이나 속성이다.

 

css html 

 

---

이력서 : 포트폴리오, 경력, 학력, 나이, 자격증, 자소서 등

-> 가장 중요한 건 '정성' 

- 정성이 있는 이력서가 있고 정성이 없는 이력서가 있다. (자세하고 친절하고, 보기 좋게)  

  내용을 보지 않아도! 묻어나는 정성이 있다. (정성이 없는 건 소개팅에 추리닝 입고 온 것과도 같다.)

- 가독성이 떨어지면 보고 싶지 않아진다. 

- 첫인상 : 열정있어 보이는 눈빛. 

- 포트폴리오 : 내가 만든 거 침튀기며 얘기하는 사람이라면 호감 up. 

 

p.s 프로젝트 지금 '유스 케이스'도 하나하나 정성을 넣기. 

    "그렇게 생각하면 더 정성스럽게 만들 수 있을거예요"

 

 

 

 

*책을 가지고 공부한다고 했을 때, 이 정도 아는 거면 책 다 뗐다고도 보면 됩니다. 활용이 문제죠.