본문 바로가기

분류 전체보기54

[웹 접근성] 버튼과 링크 그리고 접근성 이번 포스트에서는 버튼과 링크, 그리고 접근성에 대해서 이야기해 볼까 합니다. 웹사이트나 웹어플에서 버튼과 링크는 없어서는 안 되는 존재입니다. 버튼 없이는 아무런 상호작용도 못하고, 링크 없이는 어느 곳으로도 갈 수 없습니다. '버튼이 버튼이고, 링크가 링크지 접근성이랑 무슨 상관?'이라고 생각하시나요? 그렇다면 당신은 아직 HTML을 제대로 이해하지 못했습니다. 웹접근성에서 자주 언급되는 중요사항 중 하나가 시맨틱 HTML을 사용하는 것입니다. 그럼 이제 버튼이랑 링크를 제대로 파헤쳐볼까요? 좋은 버튼 만드는 방법 좋은 버튼을 만들려면 먼저 버튼의 사용 용도를 알아야 합니다. 버튼은 무언가를 할 때(액션) 사용하는 요소입니다. 그러면 어떤 버튼이 좋은 버튼일까요? 일단 좋은 버튼은 그 목적과 결과가 .. 2023. 10. 23.
[웹 접근성] 웹 접근성을 위한 올바른 이미지 활용법 요새는 이미지 없는 사이트를 찾아보기 힘들 정도로 이미지는 텍스트 다음으로 많이 사용됩니다. 이렇게 이미지를 많이 사용하는 이유 중 하나를 꼽으라면 편리함 이겠죠. 장문의 글 없이도 많은 양의 정보를 전달할 수 있다는 편리함. 그런데 이미지에도 웹 접근성이 적용된다는 거 알고 있나요? 이미지에는 대체 텍스트라는 정보를 추가할 수 있는데요, 이 대체 텍스트를 어떻게 작성하는지가 핵심입니다. 이미지의 대체 텍스트는 HTML 이미지 요소에 ‘alt’ 속성을 사용합니다. alt 속성은 스크린 리더와 같은 보조 프로그램 사용자도 이미지의 정보를 접할 수 있도록 도와주는 역할을 합니다. 대체 텍스트를 작성할 때는 최대한 정확하고 간결하게 작성하는 게 중요합니다. 대체 텍스트의 길이는 주로 120~125자 이내로 하.. 2023. 6. 22.
[웹 접근성] 웹 접근성을 위한 랜드마크 사용 방법 6가지 웹 접근성은 개개인의 능력에 관계없이 모든 사람이 디지털 세상에 접근하고 탐색할 수 있도록 하는 데 핵심적인 역할을 합니다. 웹 접근성을 향상하는 중요한 요소 중 하나는 랜드마크를 효과적으로 사용하는 것 이죠. 이 글에서는 랜드마크를 효과적으로 사용할 수 있는 7가지 방법을 살펴보려고 합니다. 이 방법들을 알아두면 웹 디자이너와 개발자들이 포괄적인 온라인 경험을 만들 수 있는 능력을 얻는데 도움이 될 것입니다. 랜드마크의 목적 이해하기: 랜드마크를 효과적으로 사용하기 위해서는 그 목적을 먼저 이해하는 것이 중요합니다. 랜드마크는 웹 페이지의 구조를 안내하는 탐색 지점으로서 역할합니다. 랜드마크는 스크린 리더와 상호작용 하며, 랜드마크로 만들어진 웹 페이지의 구조적인 정보들이 스크린 리더를 통해 사용자에게.. 2023. 5. 25.
[HTML] 첫발 내딛기 <4. input 유형의 모든것> 1000의 얼굴을 가진 . 어디까지 사용해 봤니? 어느 정도 HTML에 익숙해져서 웹사이트를 만들어 보았다면 분명 을 사용해 봤을 것이다. 은 생각 외로 자주 사용되는 요소다. 우리가 흔하게 볼 수 있는 로그인 페이지에서, 날짜를 선택할 때, 여러 옵션을 선택할, 등등 사용되는 요소가 이다. 그럼 은 대체 어디까지 사용 가능할까? 지금부터 하나하나씩 의 다양한 유형들을 알아보자. 텍스트 유형 요소의 기본 유형은 텍스트이다. 하지만 텍스트도 다 같은 텍스트는 아니다. 일반 텍스트도 있고, 이메일도 있고, 비번도 있고. 텍스트 유형들은 다음과 같이 사용할 수 있다. 일반 텍스트 유형은 말 그대로 텍스트를 입력할 때 사용하는 유형이다. 이메일 유형은 이메일 주소를 입력할 때 사용하는 유형이다. 이 유형은 이메.. 2023. 2. 26.
[CSS] 이런것도 가능했냐? CSS로 Button 보통 Button 이렇게 display를 바꿔주면 페이지에 Button 이렇게 white-space를 바꿔주면 텍스트가 에디터처럼 바뀐다 이제 에디터처럼 페이지에서 CSS코드를 직접 작성할 수 있게 해줘야 한다. 이건 CSS가 아니라 HTML에서 contenteditable 속성으로 해결할 수 있다. 이 속성에 true 값만 주면 끝이다. Button 이렇게 에디터(?)가 만들어졌다. 2023. 2. 15.
[HTML] 첫발 내딛기 <3. 시멘틱 요소> HTML의 시멘틱 요소 소개와 사용 방법 시멘틱 요소는 특정한 의미를 가지고 있는 요소를 말한다. 기본적으로 HTML의 거의 모든 요소는 시멘틱 요소라고 볼 수 있다. 시멘틱 요소가 중요한 이유는 접근성이다. 시멘틱 요소를 사용하면 쉽게 페이지의 접근성을 좋게 만들 수 있다. 페이지의 접근성이 좋으면 뭐가 좋을까? 당연히 장애를 가진 사용자들이 웹 사이트/어플을 사용하는데 도움이 된다. 둘째로는 SEO에 도움이 된다. 접근성과 SEO가 무슨 상관이 있을까? 이렇게 생각해 보자, 인터넷을 사용할 때 없으면 제일 불편한 것은 무엇일까? 시력이다. 시력이 없으면 웹 페이지에 있는 정보를 습득하고 이해하는데 많은 노력과 시간이 필요하다. 검색엔진을 다르게 보면 앞을 못 보는 정말 똑똑한 사용자다. 검색엔진이 페.. 2023. 2. 13.
[HTML] 첫발 내딛기 <2. 요소와 속성> HTML 요소와 속성의 관계 HTML의 요소는 요소만 사용할 수도 있지만 속성을 같이 사용하면 요소를 사용할 수 있는 범위가 확 넓어진다. 수많은 요소들 중 속성 없이 사용할 수 있는 요소들도 있지만, 속성이 꼭 있어야 사용할 수 있는 요소들이 있다. 요소 타입 HTML에 있는 수많은 요소들은 크게 두 가지 타입으로 나눌 수 있다: 유저 상호작용 요소 그룹화 요소 유저 상호작용 요소 이 타입의 요소는 말 그대로 유저와 상호작용하는 요소다. HTML의 , , 등이 유저 상호작용 요소에 속한다. 그룹화 요소 그룹화 요소는 여러 요소들을 한 군데에 모아 그룹화 할 수 있는 요소다. 좀 더 쉽게 말하자면 여러 개의 요소들을 하나의 요소 안에 넣고 정리할 수 있는 요소다. HTML의 , , 등이 그룹화 요소에 속.. 2023. 1. 29.
[HTML] 첫발 내딛기 <1. 구조 와 요소> HTML 구조 HTML은 우리가 브라우저에서 보는 내용들을 작성할 수 있는 웹 언어로 HTML 문서를 작성해서 정보들을 브라우저에 표시할 수 있다. HTML의 기초 구조는 4개로 나뉘어 있다. 문서 타입 문서의 시작 문서의 머리 문서의 몸 문서 타입 HTML에서 문서타입은 브라우저가 페이지를 열기 전에 필요로 한다. 이 문서 타입으로 브라우저는 이 HTML 문서를 어떻게 해석해야 하는지 알 수 있다. HTML5에서는 만 사용하면 된다. 문서의 시작 HTML문서는 시작점이 필요하다. 태그로 문서를 시작할 수 있다. 여기서 중요한 포인트! 시작이 있으면 끝도 있는 법. HTML문서의 끝은 으로 끝낼 수 있다. 문서의 머리 HTML문서의 머리에는 페이에 관한 정보들이 들어간다. 머리에는 대체로 페이지 제목, .. 2023. 1. 27.
[CSS] Flexbox을 사용해서 정말 예뻐지는 웹 레이아웃 만들기! CSS flexbox는 웹 페이지의 항목들을 유연하게 배치할 수 있는 방법을 제공한다. 플렉스 컨테이너를 사용하여 항목들을 수평적이거나 수직적으로 정렬할 수 있고, 정렬 순서도 바꿀 수 있다. CSS flexbox를 사용하면 웹 페이지의 레이아웃을 유연하게 제어할 수 있게 된다. flexbox를 사용하면 좋은점 코드가 간결해지고 쉽게 작성할 수 있다. 항목들을 수평적이거나 수직적으로 정렬할 수 있어서 레이아웃 제어가 용이해진다. 정렬 순서도 쉽게 바꿀 수 있어서 유연한 레이아웃 제어가 가능하다. 가로 정렬과 세로 정렬을 쉽게 제어할 수 있어서 웹 페이지의 레이아웃을 유연하게 제어할 수 있다. flexbox를 사용하는 방법 아래 HTML 샘플을 사용해서 flexbox의 여러 속성들과 그 값들로 레이아웃을 .. 2022. 12. 24.
반응형

티스토리툴바