본문 바로가기

취업까지달린다3

시맨틱 태그를 쓰면 좋은 점 sematic은 의미의, 의미론적인 이라는 의미를 가지고 있는 단어입니다. 시맨틱 태그(semantic tag)란 단어에서 그 의미를 유추할 수 있듯이, 의미가 담겨있는 태그입니다. 기능은 태그와 동일하며, 정확한 사용법이 있다기보다는, 작성하는 사람의 의도가 중요합니다. 그렇다면 이런 시맨틱 태그를 왜 써야 할까요? 시맨틱 태그의 종류 : 하나의 완성된, 독립적인 내용을 나타내는 영역 : 문서의 주요 내용과 간접적으로만 연관된 부분 (사이드바, 콜아웃 박스) : 토글과 같은 기능으로 정보를 제공하는 disclosure 위젯을 만들 때 사용 : 이미지에 대한 캡션 : 이미지 및 이미지 설명을 담고 있는 영역 : 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 : 영역 위쪽에서 로고나 제목, 메.. 2024. 1. 5.

position의 속성 및 특징 (실제 사이트 예시) CSS 코드를 작성할 때 자주 사용하는 속성들 중 `position`이라는 속성이 있습니다. position은 문서 상에 요소를 배치하는 방법을 설정할 때 사용하며, 매우 다양한 속성값을 가지고 있습니다. static static은 position 속성의 기본 값으로, 요소를 일반적인 문서의 흐름에 따라 배치합니다. 이 때 일반적인 문서의 흐름이란, 우리가 문서를 읽고 작성할 때의 순서인 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이는 것을 의미합니다. position이 static인 상태에서는 아무리 offset 값을 줘도 변화가 일어나지 않고, z-index 값 또한 적용되지 않습니다. relative position이 relative인 상태에서는 static과 자기 자신을 기준으로 top, right, .. 2024. 1. 5.

CSS는 왜 이름이 CSS일까? 기술 면접 공부를 하던 중, 어떤 개발자 분이 남기신 글이 인상 깊었습니다. CSS를 활용하는 법에 대해 알고 있는 것도 중요하지만, CSS가 왜 CSS인지도 알고 있는 개발자였으면 좋겠다는 글이었습니다. 프론트엔드 개발을 하면서 필수적으로 사용하는 기술이 CSS이고, CSS를 정말 많이 다루고 있지만 정작 CSS의 이름이 왜 CSS인지에 대해서는 한 번도 생각해 본 적이 없었기에 찾아서 공부해보았습니다. CSS는 뭘까? CSS는 웹 페이지를 꾸미려고 작성하는 코드이며, 프로그래밍 언어나 마크업 언어가 아닌 Style sheet 언어입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 것인데, 예를 들면 HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍.. 2024. 1. 2.

이전 1 다음

티스토리툴바