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 영역 또한 테두리 선이 나타나야 하지만 아무런 변호가 없습니다..

HTML 요소를 어떻게 작성하는 것이 중요할까요? 여러 가지가 있겠지만 제일 중요한 것은 시맨틱(Semantic)하게 작성해야 한다는 것입니다. "Semantic"이라는 단어는 '의미의', '의미론적인'으로 해석됩니다. 즉 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말합니다. 예를 들어 특별한 의미가 없는 태그를 대신해 , , , , 처럼 의미 있는 태그를 상황에 따라 사용하는 것입니다. 시맨틱하게 HTML을 작성하면 요소에 쉽게 의미를 부여할 수 있습니다. 각 요소가 자체적인 의미를 가지기 때문에 개발자 입장에서 가독성이 높아지고 유지 보수가 쉬워집니다. 또한 장치에서 콘텐츠의 계층 구조를 더 쉽게 이해할 수 있습니다. 검색 엔진은 HTML의 계층 구조에 따라 키워드들의 중요도를 파악하기 때문에 ..