[CSS] 자손 선택자

CSS 적용을 할 때 처음 codepedn에서 가져온 .css파일을 적용했다. 혼자 작업을 봤을때 잘 적용이 되었지만 다른 팀원이 작업을 시작하면서 문제가 발생하였다. .css 파일이 전체적으로 적용되면서 듣기만 했던 각 id와 class 이름을 신경써서 작성해야한다는 말을 이해하였다.

적용 전

• 위와 같이 태그를 자체를 그대로 사용한 css 였다 기존에는 class에 접근하면서 문제가 발생하지 않았지만 html태그를 그대로 사용하면서 문제가 발생하였다.
• 그래서 떠올랐던 생각이 해당 태그들을 클래스나 id를 만드는 것이 아니라 자식선택사, 자손 선택자를 사용하면 되겠다. 라는 생각이 떠올랐다.

자식 선택자? 자손 선택자?

1. 전체 선택자

/*HTML페이지 내부의 모든 요소에 적용한다*/
* {margin:0}

2. 태그 선택자

/* 지정한 태그에 대한 스타일이 적용된다.*/
p { backgrount: red } 

3. ID 선택자

#div1 {background : yellow }

4. 클래스 선택자

.div1 { color : red }

적용 후

• .account-body 라는 제일 최상위 클래스를 만들고 그 밑에 태그들에만 적용하게 만들었다.