CSS에서 태그선택 관련 질문입니다.

와~ 이렇게 자세히 답변을 달아 주시다니.  강사님 정말 감동입니다. 덕분에 정말 쉽게 이해할 수 있었습니다. 많은 도움 되었습니다. 감사합니다. 답변에 힘입어 다시 강의 들으러 가겠습니다. ^^

안녕하세요 이지훈님 kindtiger입니다 :)

Q1. 태그를 선택할 때 굳이 이렇게 길게 쓰는 이유가 있나요? 그냥 아이디 설정해서 "#아이디" 이런식으로 한 번에 접근 할 수 있지 않나요?

A1.  앞단 작업을 하다보면 고유적으로 가지고있어야 하는 선택자들과  공통적으로 사용이 되어야 하는 부분이 많습니다.  물론 모든 부분을 

#아이디 하나로 가져와도 되긴하나 나중에 네이밍을 지으시는데 어려움을 많이겪으실겁니다 ( 네이밍고갈) 그래서  보통 클래스를 많이 사용하며 선택자를 길게 작성한 이유는 중복되는 클래스 선택자일 경우 css가 오염이 될 경우가 있습니다. 오염을 좋게 사용하는 경우도 있습니다만. (.profile_img 등등) 보통은 오염을 막아 적중률을 높여 내가 원하는 대상에게만 속성을 부여해서 사용합니다.

Q2. 여기에서 ">" 이것의 의미를 알고 싶습니다. 있을 때랑 없을 때랑 차이를 모르겠습니다.

A2.  > 기호는  내  바로 밑에있는 자식들을 선택하겠다 친자식 선택자 입니다. 가령

<ul class="wrap">

       <li>

             <ul>

                   <li></li>

               </ul>

       </li>

</ul>

이런 구조상 .wrap li 를 하게될 경우 랩안에있는 모든 li 자식들이 선택이 되며  이럴경우 .wrap > li 를쓰면 바로 밑에있는 친자식 에게만 스타일링이 들어가게 됩니다.  a태그는 생각보다 많은곳에서 사용이 됩니다. 지금 코드에선 별로 문제없는데? 라고 생각한것들이 나중에 프로젝트를 했을경우 큰문제로 (css오염) 다가오는 경우가 있습니다. 그래서 보통 뒤에 태그명으로 선택자를 잡을경우 앞에 친자식 선택자를 붙여서 작성을합니다.

Q3. div 태그 안에 하나의 자식 태그만 있는 경우 굳이 div 태그로 감싸지 않아도 결과는 같게 나오는데 어떠한 태그를 배치할 때마다 항상 div 태그로 감싸는 이유를 알고 싶습니다.

A3. 웹은 누구나 다 만들 수 있습니다. 메모장에 글자만 쓰고 html확장자로 저장하면 웹에서 열 수 있죠, 하지만 웹의 아버지 '팀버너스리'는 웹에대한 가이드를 지켜 작성하라는 가이드문서를 제시합니다. 그게바로 웹표준 이죠, 웹표즌엔 여러가지 가이드안이 있지만 그중 가장 기본적인게  엘리먼트를 태그로 감싸서 표기하는 방법을 제시하고있습니다.  그리고 태그를 감싸서 표시할 경우 seo (검색엔진최적화)에도 도움이 되어 우리 사이트가 웹사이트 검색엔진에 노출될 확률또한 올려줍니다. 이런 여러가지 이유들로 인해 보통 글자를 쓰거나 뭔가를 넣을땐 태그를 만들고 그 안에 넣어서 표시를 합니다.  html5부터는 시멘틱 태그사용을 권장하고 있습니다.,  그래서 div뿐만아니라 section, article, header, footer, aside, nav등등 의미가 있는 태그들로 작성하는게 조금 더 바람직합니다 ^^