HTML, CSS
attribute와 property의 차이
HTML에서 attribute와 property라는 단어를 자주 접하게 된다. 최근 면접에서 관련 질문을 받기 전까지는 이 둘의 개념을 혼용하거나, attribute는 주로 html 태그에 들어가는 속성으로, property는 자바스크립트 객체에 들어가는 속성으로 생각해왔다. 제대로 된 답변을 못하고 검색을 해보니 둘 사이에는 명확한 차이가 존재했다. 출처 링크를 따라가면 더 자세한 설명을 볼 수 있다. 차이 attribute는 html 문서의 태그에 포함된 속성을 일컫는 말이고, property는 DOM 요소에 포함된 속성을 일컫는다. html 문서 내 attribute는 정적이고, 렌더링 엔진에 의해 생성된 DOM에 포함된 property는 그 값이 변할 수 있다.
인라인 요소에 padding, margin이 적용될까?
인라인 요소에는 박스 모델에 적용되는 width나 height과 같은 CSS 속성을 적용할 수 없다. 그래서 padding, margin 같은 속성도 붙일 수 없다고 생각했었는데 알고 보니 사실이 아니었다. padding과 margin을 좌우에만 적용할 수 있다는 글을 보았다. 과연 팩트일지 테스트를 해보려 한다. 인라인 요소에 패딩 적용하기 예상과 달리, 좌우뿐만 아니라 상하로도 잘 적용된다. 인라인 요소에 마진 적용하기 그렇다면 마진은 어떨까? 그러나 자세히 보면, 인라인 요소에서 margin은 좌우로만 적용된다. 결론 인라인 요소에 패딩을 적용할 수 있다. 마진은 좌우로만 적용된다.
의미있는 마크업이란 무엇일까?
, 과 같은 요소는 특정한 의미를 나타내지 않는다. MDN은 을 다음과 같이 기술한다. HTML 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 또한 마찬가지로 통용 컨테이너로서 별다른 의미를 갖고 있지 않다. 이러한 태그들은 목적 또는 의도에 국한되지 않고 사용하기 편리하다는 장점이 있다. 하지만 코딩을 배우다 보면 의미있는 마크업을 해야 한다는 말을 자주 들었을 것이다. 왜 그럴까? 예를 들어, 은 '최상위 제목'이라는 의미가 담긴 태그 요소이다. 대신에 을 사용한다면 그 요소가 어떤 목적을 갖고 있는지 파악하기 어려울 것이다. 또는 페이지의 ..