Box CSS1 CSS2 CSS3 HTML code style.css & result CSS1과 CSS2는 똑같이 tag를 주었지만 style.css로 인해 box의 크기가 다른 것을 알 수 있습니다. CSS1과 비교하기 위해 CSS2를 살펴보면 개발자 검사 page에서 CSS2 box 위에 마우스를 올려두면 해당 box의 영역이 표시되며, 클릭 시 해당 box의 margin, border, padding, content의 입력값이 나타납니다. 오른쪽 이미지는 CSS2에 margin과 padding을 20px씩 주었기에 빨간 줄로 표시한 20px씩 입력되었음을 나타냅니다. 그리고 CSS1 tag는 block level element의 속성을 가지므로 화면의 가로의 크기가 변하더라도 box의 크기가 화면 ..

게임으로 배우는 CSS Selectors (CSS Diner) https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 게임으로 CSS Selectors를 공부할 수 있는 사이트를 발견했습니다. 선택자를 사용하여 화면에서 움직이는 물체를 선택하면 되는 아주 간단한 게임입니다. 총 32단계로 되어 있고, 난이도는 조금 힘들지만 충분히 해낼 수 있을거라 생각됩니다. 문제를 푸는데 많이 막히신다면 선택자를 다시 한 번 복습하고 오시길 권장해 드립니다. [CSS] Selector (pseudo classes) https://ghvhdh321.tistory.com/en..

CSS / Selector 이란? Cascading Style Sheets Selector = 선택자 Cafe Coffee Tea Water HTML code CSS code & Result 위에 코드의 Cafe는 id selector와 Class selector, 그리고 Tag까지 모두 입력을 받았으나 최종적으로는 id 값만 출력되었습니다. Coffee는 Class selector와 Tag를 입력받았으나 최종적으로는 Class 값만 출력되었습니다. Summary (요약) 위의 결과로 인해 Selector의 우선순위를 알게 되었습니다. !important > style attribute > id selector > class selector > tag 순으로 적용됩니다. 선택자의 우선순위를 알아보는 시간..