전체 글 21

HTML - picture, source 요소

이전에 HTML에서 이미지를 다루는 요소 에 관해 알아봤었다. 는 여러 이미지를 그룹화하고 브라우저가 조건에 따라 적절한 이미지를 선택할 수 있도록 하는 컨테이너 요소이다.요소와 함께 사용하며 는 요소 내부에서 다양한 미디어 소스를 제공하기 위해 사용된다. 외에도 태그 내에서도 소스제공을 하기 위한 요소로 사용된다.    태그를 사용하면 HTML로도 반응형 이미지를 구현할 수 있다. 해당 예제에는 기본적으로 해변사진을 보여주고 있다.하지만 태그의 media 속성에 따라 브라우저 크기가 달라지게 되면 srcset 속성에 명시된 이미지로 교체하게 된다.

Coding/HTML & CSS 2025.02.27

HTML - address 요소

몇몇 홈페이지를 보면 홈페이지 최하단에 회사 정보가 적혀있는 것을 볼 수 있다.  요소는 이런 정보들을 기입하는 데 사용하는 요소이다.MDN을 살펴보면 요소 안에는 작성 규칙이 정해진 것은 아니고 실제주소, URL, 이메일, 전화번호, SNS, 좌표 등등 다양한 정보와 이 정보를 제공하는 주체가 반드시 포함되어야 한다고 되어있다. 작성 위치 또한 정해지지 않았으며 다른 섹션에서도 사용될 수 있다고 한다.  (주) 여기어때컴퍼니 주소:서울특별시 강남구 봉은사로 479, 479타워 11층 | 대표이사:정명훈 | 사업자등록번호: 742-86-00224 사업자정보확인 전자우편주소:help@yeogi.com ..

Coding/HTML & CSS 2025.02.27

HTML - 텍스트 레벨 요소

텍스트 레벨 요소는 텍스트 정보를 명확하게 표현하기 위해 사용하는 요소들이다.   / : 요소는 위 / 아래 첨자를 표현한다. 수학식, 화학식, 각주, 단위 표시 등에 사용된다.  : abbreviation 요소는 축약어나 약칭을 나타내는 데 사용한다. 이때 title 속성을 사용하여 약어의 내용을 이해할 수 있는 추가정보를 제공할 수 있다. 실제화면에서는 텍스트 아래 점선줄이 표현되며 마우스를 올려놓게 되면 title속성에 작성한 내용을 확인할 수 있다.  : 요소는 날짜와 시간 정보를 표현하는 데 사용된다. 이 요소는 날짜 및 시간의 의미를 명확히 하기 위해 datetime 속성을 사용할 수 있다. time 요소를 사용하면 검색엔진이나 스크린리더가 날짜 시간데이터를 읽을 수 있도록 한다.  : 요소..

Coding/HTML & CSS 2025.02.26