Front-end/html, css3 시맨틱 요소 | div태그 대신 시맨틱 태그 사용 이유? | 시맨틱 태그 종류들 태그는 영역을 구분할 때 쓰는 태그 즉, 레이아웃을 관리할 때 사용하는 태그이다. 그런데, 태그를 쓰는 것보다 시맨틱 태그를 쓰는 것이 오늘날에 더 권장되는 코드 작성 방식이다. 는 아무 의미가 없다. 단지 영"역을 구분한다"의 기능만 하는 것이다. 화면을 구성하는 모든 레이아웃을 div 태그를 이용해 작성했다고 해보자. "화면에서 사이드바를 구현한 코드를 보고 싶어!" 라고 한다면, 많은 div 태그들을 뒤져서 찾아야할것이다. 가독성이 매우 떨어질 것이다. 하지만 시맨틱 태그로 구성한 문서에서는 태그를 찾으면 되는 것이다. 시맨틱 태그를 사용한다면 마크업을 강조하거나 의미를 부여하여 개발자들이 우리 코드를 보기만 해도 무슨 일이 일어나는지 바로 알 수 있고, 스크린 리더 사용자와 SEO 접근성 향상, .. 2024. 1. 18. [CSS] 그림자 효과 text-shadow의 사용 방법 | 여러개의 그림자 적용 | 안쪽으로 그림자 주기 - inset 👾 사용방법 text-shadow: 가로 세로 번짐정도 그림자색; 순서대로 (1)가로 그림자의 위치, (2)세로 그림자의 위치, (3)번짐 정도, (4)그림자 색상 이며, 가로와 세로 그림자의 위치는 필수로 지정해야 합니다. 여기서, 가로: 양수(+)면 오른쪽으로 그림자, 음수(-)면 왼쪽으로 그림자 세로: 양수(+)면 아래쪽으로 그림자, 음수(-)면 위쪽으로 그림자 가 생기게 됩니다. 에서 test-shadow의 세로 요소를 결정하는 픽셀을 0으로 잡아주니 위아래(세로) 그림자는 적용되지 않는 것도 확인할 수 있습니다. 또한 텍스트 내부로 그림자를 표시하고싶다면 다음과 같이 inset 키워드를 넣어주면 됩니다. /* 텍스트의 내부로 그림자를 표시하도록 설정 */ text-shadow: inset 2px.. 2023. 12. 20. [CSS] position의 속성값 relative, absolute position 속성은 요소가 배치되는 방식을 결정한다. 웹 문서 안의 요소를 자유롭게 배치할 수 있다. 아래는 방식을 결정하는 속성값의 종류와 설명이다. 종류 설명 static 문서의 흐름에 맞춰 배치. default값이다. relative 문서의 흐름에 맞게 자연스럽게 배치하나, static과 달리 위치값을 지정 할 수 있음. absolute 위치를 지정해 배치 fixed 특정 위치에 고정 여기서 top, bottom, left, right로 최종 위치를 결정하게 된다. top: 위쪽으로 얼마나 떨어져있는지 bottom:아래쪽으로 얼마나 떨어져있는지 left: 왼쪽으로 얼마나 떨어져있는지 right: 오른쪽으로 얼마나 떨어져있는지 여기서는 relative와 absolute에 대해 조금 더 정리하고자 .. 2023. 12. 20. 이전 1 다음
'Front-end/html, css' 카테고리의 글 목록
