HTML5 시멘틱 태그를 사용하는 이유, 웹 표준을 지키는 이유 👁🗨 일반적으로 시멘틱 태그사용 시 장점으로 자주 언급되는 3가지 1. HTML 문서의 가독성과 유지보수가 쉽다. 만약 모든 태그들을 div로 만들었다고 가정했을 때, HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어진다. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워진다. 2. HTML만 봐도 영역 구분이 쉽다. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용된다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용.. 2023. 3. 5. [HTML] Select option의 value와 required 사용 시 주의할 점 Mdn의 Select에 대한 예시를 보았을 때 의문이 생겼다. Mdn 예시) Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish 제일 앞 옵션에 있는 --Please choose an option-- 의 value가 없는데 '빈값으로 준 이유가 뭘까? 아예 없어도 되지 않을까?'라는 의문이었다. 그래서 바로 테스트 예시를 만들어 보았다. test1 예시) Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish 테스트 예시에는 required 속성을 추가하고 option 속성의 value값을 빼고 진행해 보았다. 결과는, va.. 2023. 2. 23. [CSS] CSS Box Model 🤔 Box Model 이란? 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML 요소를 padding, border, margin, 그리고 content으로 구분한다. CSS에서의 기본적인 Box Model에서는 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다. 하나 하나 계산하며 맞추기 어려움을 해결하기 위해선 box-sizing이란 속성을 사용하면 됩니다. 📖 box-sizing 속성 content-box content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 .. 2023. 2. 13. [HTML] 유용한 HTML Emmet 정리 🤔 Emmet이란? Emmet은 HTML과 CSS에서 타이핑 몇자를 적으면 자동으로 나머지 코드들을 자동생성해줌으로써, 코드 작성 시간을 아주 빠르게 단축 시켜주는 에디터 확장기능입니다. 📝 자주 쓰는 Emmet 정리 및 예제 1. 자동완성 : tab키 예시) 2. 텍스트 넣기 : {} 예시) 안녕 3. 자식(하위)요소 : > 예시) 4. 형제 요소 : + 예시) 5. 올라가기 : ^ 예시) 6. 반복하기 : * 예시) 7. 그룹화 : () 예시) 8. 클래스 : . 예시) 9. 아이디 : # 예시) 10. 속성 : [attr] 예시) 11. 넘버링 : $ 예시) 2023. 2. 13. 이전 1 2 다음
