doeunn.log

▶우선순위와 명시도(Specificity) 한 요소를 가리키는 여러 선택자의 스타일이 한 번에 적용되어 적절한 스타일을 적용하는 데에 어려움을 겪은 적이 있을 것입니다. 선택자가 여러 개이고, CSS를 여러 파일에 작성했다면 이런 문제는 더 자주 발생합니다. 이제부터 각 스타일이 한 요소에 중첩되는 상황에서 어떤 스타일이 우선순위로 적용되는지 살펴보겠습니다 :) ▷마지막에 작성된 스타일이 적용된다 div { color: blue; color: red; } 위의 코드처럼 한 선택자에 같은 스타일 프로퍼티를 지정하면 상단에 작성된 스타일은 상쇄되어 제일 마지막에 작성된 스타일이 우선순위로 적용됩니다. 즉 여기서는 color가 red로 적용됩니다. 혼란을 야기하지 않도록 위의 코드처럼 불필요한 스타일 프로퍼티..

▶상속 스타일을 작성하다 보면 요소에 직접 부여하지 않은 스타일이 적용되어 당황스러울 때가 있습니다. 대부분 이런 상황은 상속에 의해 발생합니다. CSS의 프로퍼티 중에서 상위요소(부모, 조상)에서 적용되었지만, 자식 요소까지 상속되는 프로퍼티들이 있습니다. 대표적으로 font 관련 프로퍼티나 색상, 정렬 방식의 프로퍼티가 상속됩니다. parent child 이 코드의 실행 결과는 다음과 같습니다. 반대로 width, height, margin, display, border처럼 상속되지 않는 프로퍼티 또한 존재합니다. parent child 코드 실행 결과는 다음과 같습니다. border(테두리)가 상속되는 프로퍼티라면 child가 작성된 p 영역 또한 테두리 선이 나타나야 하지만 아무런 변호가 없습니다..

▶ CSS란? CSS는 Cascading Style Sheets의 약자로 문서를 표시하는 방법(스타일이나 레이아웃)을 지정합니다. CSS를 사용해 사이트를 레이아웃을 만들고 텍스트의 색상을 변경하며 애니메이션을 넣어 시각적으로 아름답게 표현합니다. 당분간 CSS 작성 방법과 작성 시에 주의할 점, flex를 사용한 레이아웃 작성법 등 기본적인 내용을 살펴봅시다. CSS에서 반드시 알아야 할 작성 방법과 특징, 레이아웃 작성법 등에 대해서 알아봅시다 :) ▶작성 방법 스타일링을 작성하는 방법은 매우 간단합니다. '"A"의 "B"를 "C"로 하겠다.' 이 문장에 맞춰 스타일을 작성합니다. 여기서 A는 대상을 가리키는 선택자 그리고 B는 그 대상의 프로퍼티를 의미하며 C는 그 프로퍼티를 어떻게 바꿀지를 의미하..