Frontend/HTML17 [HTML] <article>과 <section>, <div>는 어떤식으로 써야할까? 시맨틱 태그를 잘 활용하고 싶은데 section과 article이 너무 헷갈려서 정리를 해본다. 왜 시맨틱 태그로 레이아웃을 만들어야 할까? 시맨틱 태그로 작성된 소스를 보면 태그만 보고도 어느 부분이 제목인지 메뉴인지 본문인지 알 수 있다. 그래서 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있어 편리하다. 또한 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편함이 있어서는 안된다"라는 웹접근성 시각에서 볼 때도 중요하다. 시각장애인들은 웹 사이트를 이용할 때 화면 낭독기 같은 보조 기구를 사용하는데 시맨틱 태그를 통해 어느 부분이 제목이고 내용인지 구별할 수 있기 때문에 사이트 내용을 정확히 전달할 수 있다. 또한 태그에 대한 역할이 정확히 정해져 있기 때문에 어떤 장치에서든 문서를 똑같이 .. 2021. 9. 12. [HTML] dl, dt, dd 태그 1 태그 정의 Description List 용어의 정의와 내용 설명이 필요할 때 사용하는 태그 태그는 태그 단독으로 사용될 수 없다. 의 한 쌍으로 이루어진다. 정의 정의에 대한 설명 Description Term 태그의 제목 인라인 요소 -> , , 등과 같은 블록 요소가 내부로 삽입될 수 없다. 처럼 하나 이상 연속으로 사용 가능하다. Description Description 태그의 용어를 설명 기본적으로 들여쓰기(margin-left)가 설정되어있다. 블록 요소 -> 다른 태그들을 자유롭게 삽입할 수 있다. 하나 이상의 를 형제 요소로 가질 수 있다 2 태그 활용 와 태그를 가로 정렬시킬 수 있다. html : 정의: 정의에 대한 설명 정의: 정의에 대한 설명 css : 결과값 : ※ float.. 2021. 9. 12. [HTML] aria-label aria-label 속성은 현재 요소에 레이블을 정의하기 위해서 사용한다. text가 화면 표시되지 않을 때 사용하며, 만약 화면에 텍스트가 보인다면 aria-labelledby를 대신 사용한다. ❌ 위와 같은 버튼이 있을 때 보조기기를 사용하는 사용자에게는 대화상자를 닫는 것임을 알려줄 수 있는 것이 없기 때문에 aria-label="Close"를 적어서 보조기기에 레이블을 제공한다. 2021. 7. 29. [HTML] i 태그 아이콘 요소를 만들기 위해 span태그 보다 i 태그를 많이 사용한다. i 태그는 이탤릭체로 스타일을 만들어주는 태그이지만 잘 쓰이지 않고 icon의 i 와 첫글자가 같아 코드 가독성이 우수하다. 수정을 할 때 i태그만 선택해서 아이콘을 변환할 수도 있다. 2021. 7. 20. [HTML] figure / figcaption HTML5에서 새롭게 추가된 태그와 요소이다. 보통 여러가지 요소들을 묶을 때 div를 많이 사용했으나 figure태그를 통해 웹 접근성을 높일 수 있다. figure가 '형태'라는 뜻으로 여러가지 요소들을 묶어 한 형태로 만들어 놓는 것이라고 볼 수 있다. 태그 - 설명 글을 붙일 대상 지정 - 설명 글을 붙여야 할 대상을 지정하거나 웹 문서에서 오디오나 비디오 같은 멀티미디어 파일을 비롯해 사진이나 표, 소스 코드 등 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용한다. - 만약 이미지 태그만 사용한다면 굳이 태그를 사용하지 않아도 되지만 이미지에 설명 글을 넣으려면 태그로 묶어줘야 한다. 태그 - 설명 글 붙이기 - figure 요소 안에서의 콘텐츠에 대한 제목 출력 See the Pen by.. 2021. 6. 30. 이전 1 2 3 다음 반응형
