1.웹프로그래밍, CSS, 선택자에 대한 개념을 잡아 보아요 !! ^^

CSS에서 말하는 선택자에 대해서...

• CSS 에서 가장 중요한 부분이 바로 선택자임.
• 그럼, 선택자(selector) 란 무엇일까요?
  • 말그대로, HTML 요소를 선택하는 부분을 말해요.. ^^;
  • W3C 참고 문서
    • http://www.w3.org/TR/css3-selectors/
• 왜 선택자가 필요할까요?
  • 변경하고자 원하는 요소를 선택할 수 있어야 하기 때문에..
  • 보통, 모든 요소에 동일한 스타일을 적용하는 일은 드문케이스..
    • 즉, 변경하고자 하는 요소를 선택 후 원하는 스타일을 적용하는게 대부분임.
• 예시

 

• 선택자의 종류는?
  • 주로 사용하는 선택자
    • 타입 선택자(type selector)
    • 아아디 선택자(ID selector)
    • 클래스 선택자(class selector)
  • 이외의 알아두면 좋을 선택자
    • 전체 선택자(universal selector)
    • 속성 선택자(attribute selector)
    • 의사 선택자(pseudo-class)
    • 기타등등.

타입 선택자

• HTML 요소 이름을 사용하는 가장 기본적인 선택자.
  • ex) h1요소를 선택 하려면 아래와 같이 h1 라고 적어주면됨

아이디 선택자

• ID를 사용하는 CSS 에서 가장 많이 사용되는 선택자.
  • ex) test라는 ID를 선택하려면 아래와 같이 #test 라고 적어주면됨

​​​​​​​​​​​​​​클래스 선택자

• 요소를 정의할때 클래스 이름을 부여 할 수 있음.
  • ex) 클래스가 source 인 요소를 선택 하는 예시

• 클래스 선택자는 몇 개의 요소를 하나의 클래스로 묶어서 스타일을 지정하려고 할 때 사용됨.
  • 보통 위에서 알아본 id 선택자는 하나의 요소만을 선택할 수 있는 반면에, 클래스 선택자는 여러개의 요소를 한꺼번에 선택할 수 있는 장점이 있음.

전체 선택자

• * 기호로 표시 되며 페이지 안 모든 요소 선택 할 때 사용함
  • ex) 모든 요소 선택하는 예시

선택자 그룹

• 선택자를 콤마(,)로 분리하여 나열하면, 각 선택자에 의하여 선택된 요소의 합을 의미함
  • 이것을, 선택자 그룹이라고 함.
    • 선택자
      • s1,s2
        • s1로 선택된 요소와 s2로 선택된 요소를 합침.
  • ex)  선택자 그룹을 사용한 예시

자손, 자식, 형제 결합자

• 선택자를 결합해서 특정한 요소를 선택함.
• 특정한 요소의 후손을 선택할 수 도 있음.
  • 선택자
    • s1 s2 
      • s1 요소에 포함된 s2 요소를 선택함 (후손관계)
    • s1 > s2
      • s1 요소의 직계 자식 요소인 s2를 선택함 (자식관계)
  • ex) 후손 및 자식관계 예시

의사 클래스

• 클래스가 정의 된 것 처럼 간주한다는 의미
  • 콜론(:)을 사용하여 표기함.
• ex) a 요소를 선택및 의사 클래스 예시

속성 선택자

• ex) 특정 속성을 가지는 요소를 선택하는 예시

그럼 위에서 배운 선택자을 한번 사용해 볼까요 ? ^^

• 샘플코드

• ​​​​​​​웹브라우저에서 실행화면

  • 

  • 

결론

• CSS 에서 선택자를 사용하면, 편리하게 원하는 요소에 대해서 스타일을 적용할 수 있음
• 선택자의 문법은 복잡하기도 하고, 전부 외울 필요하는 없음. 
  • 위에서 설명한 가장 중요한 3가지 만 선택자만 철저하게 알아두자^^; 거의 90% 이상은 아래 선택자에서 끝남.
    • 타입, 아이디, 클래스 선택자.
• 오늘도 CSS의 선택자라는 마술(?)을 획득 하게되었음 ^^; 감사합니다.

---

• 오늘의 명언 한마디
  • 협상에 대한 인식을 바꿔야 한다. 상대를 나의 "적" 이 아닌, 함께 문제를 풀어갈 "파트너"로 인식하는 것이다.
  • "적"과 협상하는 건 당연히 어렵다. 하지만, 상대를 파트너로 인식한다면, 그 관계에 있는 다른 많은 것들도 보이기 시작한다. 이 모든 맥락을 고려하는게 고수의 협상이다.
  • 협상의 고수들은 나와 이해관계가 얽혀 있는 사람들을 만나 대화하는 과정 전체를 협상으로 이해한다.
  • 거래처 담당자를 만나 "주말에 뭘 했는지?", "아이는 잘 크는지?" 묻는 사소한 대화가 모두 협상의 일부라는 의미.
  • 사소한 대화를 통해 서로에 대해 알아가고, 이 과정에서 상대와 "감정적 유대감"을 쌓는 것, 이것이 양측 모두 만족할 만한 협상 결과를 만들어낸 중요한 토대가 될 수 있다. 
  • 협상은 이제 선택이 아니라 필수이다. -최철규,김한솔 지음, "협상은 감정이다." 중에서....

---

• 오늘의 영어 한마디
  • She had to resign on moral grounds.
    • 그녀는 사임해야 했다. / 도덕적인 이유 때문에.
  • 해설
    • 마치, 식물이 쓰러지지 않고 자랄 수 있는 곳이 땅(ground) 인 것 처럼, "ground"가 비유적으로 사용되면, 자신의 생각을 굽히지 않고 세울 수 있는 "근거", "이유"라는 의미.
    • 인간의 행위도 논리적인 "근거","이유"가 있어야 자신의 의지대로 행동하고, 흔들리지 않음.
    • 즉, 위의 예문은 도덕적인이유(근거)때문에 그녀는 사임해야 했네요라고 해석할 수 있음.