HTML13 HTML 포지셔닝 정리하기 position 속성 글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성입니다. position에 따라서 위치를 정하는 기준이 달라집니다. 기본 값은 static이고, static인 경우 원래 있어야 할 위치에 배치됩니다. 위치 정하기 위치를 정하는 기준에 대해서 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 값이 모두 똑같은 경우 inset 속성을 씁니다. relative 포지션 요소의 원래 위치를 기준으로 배치합니다. 이때 요소의 원래 자리는 그대로 차지하고 있습니다. .green { position: relative; top: 15px; left: 10px; } absolute 포지션 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 배치됩니다. 이때 포지셔.. 2023. 10. 20. z-index에 오류가 있을 때 실제로 z-index를 쓰다 보면 종종 마음대로 동작하지 않을 때가 있는데요. 이럴 때 도움이 되는 쌓임 맥락(Stacking Context)이라는 개념에 대해 알아보겠습니다. 처음에는 조금 복잡하게 느껴질 수도 있으니까, 일단 쌓임 맥락의 큰 개념만이라도 잡고 넘어가는 걸 목표로 해 봅시다. z-index: 9999로도 해결이 안 되는 이유 빨강, 초록, 파랑 사각형 세 개를 배치했는데, 원하는 대로 배치가 안 되는 경우를 한번 예를 들어 보겠습니다. 아래 코드를 천천히 읽어 보고 어떤 게 앞에 보이고 어떤게 뒤에 보일지 한번 예상해 보세요. 일부러 여백을 좀 두었으니 스크롤을 천천히 내리면서 생각해 봅시다. 종이랑 펜을 가지고 생각한 모습을 그려 보셔도 좋습니다. .red { background-co.. 2023. 10. 20. 메타 태그 소개 메타 태그란 메타 태그란 로 작성하는 HTML 태그로 메타데이터를 나타냅니다. 메타데이터는 데이터를 설명하는 데이터를 말합니다. 즉, 는 HTML 데이터를 설명하는 데이터를 갖는 태그입니다. 이미 우리는 메타 태그가 적용된 것들을 많이 봐왔는데요. 구글 검색 페이지에 사이트 설명에 사용하기도 하고, 페이스북, 카카오, 트위터 등의 SNS 공유할 때 링크 미리 보기에도 사용됩니다. 위와 같은 미리 보기를 위한 설정뿐 아니라 어떤 종류의 메타 태그 설정들이 있고, 어떻게 사용하면 될지 알아봅시다. 웹 페이지에 설정하는 메타 태그 살펴보기 살펴볼 메타 태그들은 한 번 설정하면 변경할 일이 거의 없는 것들이에요. 지금 단계에서는 가볍게 이런 설정도 필요하구나 하고 넘어가도 좋습니다. HTML 문서의 문자 인코딩.. 2023. 10. 20. HTML head 와 시맨틱 태그 시맨틱 태그 와 기능은 똑같지만, 의미가 담겨있는 태그들을 '시맨틱 태그'라고 합니다. 엄격한 사용법이 있는 건 아니고, 작성하는 사람의 의도가 중요합니다. 시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 됩니다. 태그 이름 용도 영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부 사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능 영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음 하나의 완성된, 독립적인 내용을 나타내는 영역 어떤 것의 일부분을 나타내는 영역 이미지와, 이미지 설명을 담고 있는 영역 2023. 10. 20. 이전 1 2 3 4 다음
