본문 바로가기

언어46

[IT] HTML5 시멘틱 태그와 웹 표준에 대하여 ! (+ 웹 접근성) ㅇ HTML5 에서 시멘틱 태그를 사용하는 이유에 대해 알아보자 1. 먼저 시멘틱 태그란 무엇인가 ? ㅡ 웹 페이지의 구조를 쉽게 알 수 있도록 정의된 태그를 의미한다 2. 웹페이지의 구조를 쉽게 안다는 것은 무엇인가 ? ㅡ 웹페이지의 구조를 이해하는데 사람 뿐만 아니라, 기계도 이해하기 쉽게 태그의 구조를 배치한다. 3. 기계가 웹페이지의 구조를 알면 어떻게 되는가 ? 장점이 잇다 !! ㅡ 장점 1) SEO( Search Engine Optimization: 검색엔진 최적화 )에 유리하다 2) 유지보수에 유리하다. (의미 있는 태그명을 사용해서 가독성이 좋아진다 ) 3) 웹접근성이 좋아진다 ( 스크린리더와 같은 환경에서는 웹 접근성과 사용상을 향상 시켜준다.) 4. 시멘틴 태그의 종류 : 콘텐츠 작성자.. 2024. 1. 24.
[HTML] WAI-ARIA 이란 ?? ( aria hidden 사용법) ㅇ WAI-ARIA 이란 ?? ㅡ 마우스나 모니터를 사용 할 수 없는 사람들에게 스크린 리더를 통해 웹 컨텐츠와 웹 애플리케이션에 더욱 편리하게 접근할 수 있도록 하는 방법이다. ㅡ 특히 HTML , JavaScript 등의 기술을 이용해서 동적 컨텐츠와 고급 사용자 인터페이스 컨트롤이 가능하게 한다. ㅡ ARIA를 사용하기 전에 태그를 그 용도에 맞게 사용해야 한다 . (주로 시맨틱 태그 ) ㅇ aria hidden (숨김) ㅡ aria-hidden이 "true"로 설정되면, 스크린 리더로 해당 콘텐츠를 가상 커서로 탐색할 수 없다. 작성자는 중복 되거나 관련 없는 콘텐츠를 제거하여 보조 기술 사용자의 경험을 개선하기 위한 목적으로 이 콘텐츠를 숨기는 행위인 경우 에만 aria-hidden을 사용하여 .. 2024. 1. 24.
[입문] HTML - 목록 태그 ( ol , ul, li ) HTML 의 목록태그에 대해 알아보자 . 목록 태그 ( ol , ul, li ) orderd list : 순서가 있는 목록을 생성할 때 사용한다. ㅡ 를 자식으로 세부항목을 나타낸다. ㅡ type : 숫자 ( 아라비아숫자, 로마 숫자, 알파벳 ) ㅡ start : 시작 순서 지정 ㅡ reversed : 반대로 새기 unorderd list : 순서가 없는 목록을 생성할 때 사용한다. (주로 네비게이션이나 메뉴 등..) ㅡ 를 자식으로 세부항목을 나타낸다. list : ol 과 ul 의 자식 요소이다. 세부 리스트를 나타낸다. ( 단독 사용 불가함 ) ㅡ 속성값 value 에 시작할 순서를 지정할 수 있다. 2024. 1. 20.
[입문] HTML CSS - flexbox , grid , 반응형 디자인의 모든 것 ! 먼저 에 대해 알아보자 ㅇ container : 부모에 쓰는 속성 display : flex ; 1) flex-direction : 주축을 바꾼다. ㅡ colume 세로, row 가로 , reverse 거꾸로 ! 2) flex-wrap : 묶음 , 한줄에 할지 여러 줄로 나눌지 선택한다 ㅡ nowrap 한줄 , wrap 여러줄 , wrap-reverse 여러줄 기준 반대로 배치 3) flex-flow (shorthand) : 단축 속성 ㅡ flex-flow : row wrap; flex-flow: column wrap; 4) justify-content : 줄의 간격 자동맞춤 ( 줄에 컨텐츠 간격) ㅡ flex-start : 출발 하는 .. 2024. 1. 16.

티스토리툴바