컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

문서를 쓰다보면 하나의 요소에 여러 개의 스타일이 적용될 수 있고 그로 인해 충돌한다. 이 경우 CSS 적용 우선 순위에 따라 정해진다. 1순위. 인라인 스타일 p 태그입니다. id나 class로 스타일을 적용해도 태그에 직접 'style' 속성값을 주는 인라인 스타일이 가장 먼저 적용된다. 2순위. id 스타일, class 스타일 안녕하세요! 한 태그에 id값과 class 값이 동시에 부여되고 적용될 경우 id의 스타일을 우선 적용한다. 위 예시 같은 경우는 최종적으로 글자 색상이 'red'가 아니라 'blue'가 적용된다. 3순위. 태그 스타일 p 태그입니다. 위와 같이 일반적으로 태그를 선택자로 지정해서 스타일링 하는 경우 id와 class에 밀린다. 최 후순위로 스타일이 적용된다.

1. 선택자란? 기존 HTML 스타일링은 HTML 문서 내에서 이뤄졌고 태그 내에 일일히 스타일링을 적용해야했다. 하지만 CSS가 등장하면서 태그에 대한 접근법이 달라졌다. CSS 문서를 외부에 만들거나 div 태그입니다. div 태그입니다 - 1 div 태그입니다 - 2 div 태그입니다 - 3 클래스 선택자 스타일 적용하려는 태그에 class 값을 준 뒤 해당 클래스 값을 선택자로 지정할 수 있다. 해당 클래스 값을 선택자로 지정할 땐 앞에 점 ( . )을 찍어줘야 한다. 클래스는 동일한 값을 여러 태그에 적용할 수 있다. 그래서 성격 등이 비슷한 태그는 하나의 클래스로 묶어서 스타일 적용이 가능하다. .class 명 { 속성 : 속성값 } 안녕하세요! id 선택자 스타일을 적용하려는 태그에 id값을..