Frontend/HTML & CSS 검색 결과
5 개의 검색 결과가 있습니다.
Frontend/HTML & CSS

[Web] 웹 접근성이란 무엇일까?

▶ 연관 포스팅: [Web] 웹 표준이란 무엇일까? 🌈 웹 접근성(Web Accessibility) 이란? 월드 와이드 웹의 창시자 팀 버너스 리(Tim Berners-Lee)는 웹을 아래와 같이 정의하였다 "장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간 " 즉 웹 접근성은 신체적 장애 여부와 상관없이 누구나 웹 사이트를 이용할 수 있어야 한다는 것을 의미한다. 예를 들어 시각장애인의 경우 화면을 눈으로 볼 수 없기 때문에 '스크린 리더'라는 별도의 소프트웨어를 컴퓨터에 설치하여 음성으로 웹페이지에 담긴 정보를 이해한다. 하지만 스크린 리더는 스스로 웹페이지의 내용을 분석하지 못한다. '메뉴'라는 텍스트 대신 메뉴라고 그려진 이미지를 사용할 경우 비 시각 장애인의 눈에는 메뉴라고 인..

2022. 7. 14. 12:56
Frontend/HTML & CSS

[Web] 웹 표준이란 무엇일까?

▶ 연관 포스팅: [Web] 웹 접근성이란 무엇일까? 🌈 웹 표준(Web Standards) 이란? W3C 에서 정의한 웹 표준이란 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 웹에서 표준적으로 사용되는 기술은 특정 브라우저에서만 사용되는 기술을 배제하고 W3C의 권고안을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다. 즉, 웹 표준이란 웹 사이트에 접속한 사용자는 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동해야 함을 의미한다. 따라서 웹 표준의 준수는 웹 접근성 준수를 위한 핵심이라고 할 수 있다. ▪ 웹 표준이란 웹에서 표준적으로 사용되는 기술이나 규칙을 뜻함 ▪ W3C의 표준안에는 HTML, CSS, ..

2022. 7. 13. 12:32
Frontend/HTML & CSS

[CSS] Display와 Visibility 의 차이점 및 속성

📌 CSS 요소 표시 방법 HTML의 요소를 표현하는 방법에는 display와 visibility 두 가지가 있다. 1️⃣ display display는 요소를 표시하는 방법을 결정하며, 요소를 보이지 않게 하는 값으로 none을 사용한다. display: none 일 경우 해당 요소는 보이지 않으며 Layout에 영향을 미치지 않는다. Hidden Show Contents Contents 🌝 속성값 - inline : 인라인 요소로 표현한다. - block : 블럭 요소처럼 표현한다. - inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. - flex : 블록-레벨의 flex 컨테이너처럼 요소를 표현한다. - inline-flex : 인..

2022. 2. 11. 08:34
Frontend/HTML & CSS

[CSS] CSS 전처리기 SCSS, SASS의 차이점

🤔 SCSS, SASS ?? "CSS의 복잡함과 불편한 재사용성을 높혀주고, 가독성과 유지보수의 편의성을 제공해주는 것" 📌 CSS의 단점과 SCSS(SASS)의 장점 CSS의 단점 선택자 생성 시 불필요한 부모요소 선택자를 적어야 한다. 변경사항이 있을 때 관련된 모든 것을 수정해야 한다. nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } SCSS(SASS)의 장점 선택자의 중첩(Nesting)을 통해 반복되는 선택자 사용을 줄일수 있다. 변수를 사용해서 CSS 속성값을 통일해서 ..

2022. 1. 26. 08:55
Frontend/HTML & CSS

[HTML/CSS] 긴 문자열 숨김, 생략(...) 처리 및 자동 줄 바꿈 방지

1. 긴 문자열 숨김 및 생략 (ellipsis, ... ) 긴 문자열을 숨기거나 생략 ('...') 처리할 때 overflow를 사용한다. width에서 지정해준 크기보다 더 크면 overflow의 속성에 따라 처리된다. 문자열 속성 설명 visible 박스를 넘어가면서 표시 (기본값) hidden 벗어난 영역 숨김 scroll 벗어난 영역 스크롤 처리 auto 벗어난 영역 있을 경우 스크롤 처리 text-overflow: ellipsis 벗어난 영역 ... 처리 2. 줄 바꿈 방지 문자열의 줄 바꿈을 방지할 때 white-space의 아래 옵션을 사용한다. white-space 에는 줄바꿈이 일어나는 다른 옵션도 있다(normal, pre-wrap, pre-line, break-spaces). 속성 ..

2021. 9. 27. 21:37