HTML5 [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. [HTML] 유용한 HTML Emmet 정리 🤔 Emmet이란? Emmet은 HTML과 CSS에서 타이핑 몇자를 적으면 자동으로 나머지 코드들을 자동생성해줌으로써, 코드 작성 시간을 아주 빠르게 단축 시켜주는 에디터 확장기능입니다. 📝 자주 쓰는 Emmet 정리 및 예제 1. 자동완성 : tab키 예시) 2. 텍스트 넣기 : {} 예시) 안녕 3. 자식(하위)요소 : > 예시) 4. 형제 요소 : + 예시) 5. 올라가기 : ^ 예시) 6. 반복하기 : * 예시) 7. 그룹화 : () 예시) 8. 클래스 : . 예시) 9. 아이디 : # 예시) 10. 속성 : [attr] 예시) 11. 넘버링 : $ 예시) 2023. 2. 13. [HTML] favicon PNG파비콘 최적화방법(feat.favicon generator) favicon 간략소개 파비콘은 웹페이지에 접속했을때, 상단 탭에 보여지는 작은 아이콘을 말한다. 이 아이콘은 즐겨찾기에 웹페이지를 등록할때도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하며, 사이트의 성격을 드러내기도 한다. 확장자는 ICO가 많이 사용하며 PNG, JPG 이미지 파일도 favicon으로 사용 가능하다. 💡 HTML에서 favicon 적용 방법 태그 안에 태그를 이용하여 적용한다. favicon 은 왜 ICO 확장자를 쓸까? ICO 파비콘은 multiple sizes를 지원해 하나의 ICO 파일에 여러 사이즈의 아이콘을 넣어 두고 활용 할 수 있다 하지만, PNG 파비콘은 불가능하다. 그래서 PNG확장자를 사용해도 되나 여러 브라우저나 기기별 차이가 있을 수 있어 여러 .. 2023. 2. 9. [HTML] HTML 기본 태그 🤔 블록 레벨 요소와 인라인 요소 블록 레벨 요소 마크업을 할 때 줄이 바뀌는 특성이 있다. 인라인 요소 블록레벨 요소와 달리 줄 바꿈 특성이 없다. 즉, 행이 바뀌지 않고 한 줄로 출력 된다. 블록 레벨 요소와 인라인 요소의 특징 요소 유형 특징 블록 레벨 요소 1. 줄 바꿈이 일어난다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 인라인 요소 1. 줄 바꿈이 일어나지 않는다. 2. 텍스트와 인라인 요소를 자식 요소로 포함 할 수 있다. 3. 블록 레벨 요소를 자식 요소로 포함 할 수 없다(예외 : a태그) 📑HTML 기본 태그 P태그 HTML 문서에서 단락(paragraph) 을 정의할 때 사용하는 태그다. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함 할 수 없다... 2023. 2. 8. 이전 1 2 다음
