본문 바로가기

LEARN190

[부스트코스] 웹 접근성 지침 정리 2 2. 웹 점근성 지침 7) 콘텐츠 간의 구분 이웃한 콘텐츠는 구별될 수 있어야 함 테두리 이용하여 구분 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분 서로 다른 무늬를 이용하여 구분 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분 줄 간격 및 글자 간격을 조절하여 구분 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분 8) 키보드 사용 보장 모든 기능은 키보드만으로도 사용할 수 있어야 함 태그 사용시 href 속성 9) 초점 이동 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 함 아래 사용 시 초점이 안 보임. 주의해야 함 hideFocus outline: none onfocus="this.blur();" 10) 조작 가능 사용자 입력 및 컨트롤은 조작 가능하도.. 2023. 1. 2.
[CSS] selector 문법으로 css 코드 양 줄임 💾 Editor: VSCode 👉 참고 이름 날짜 블로그 글 가성비 맛집 발견 float 준 다음에 margin-top이 안 먹힐 경우에는 float 준 요소 다음에 clear:both 넣은 추가함 👉 navbar 만들기 layout1.html (1) 영화 맛집 IT 컴퓨터 대신에 사용. 기능은 똑같음 style.css .navbar li { display: inline-block; } selector 문법 공백: '~안에 있는' 모든 자식 selector 문법 > : '~안에 있는' 직계 자식 layout.html (2) 영화 맛집 IT 컴퓨터 태그 추가. 경로가 지정되지 않았을 경우에는 "#" 이런 형태로 우선 작성 style.css /* 내비게이션 */ .navbar li { display: inl.. 2023. 1. 1.
[CSS] layout 레이아웃 2 - display : inline-block 💾 Editor: VSCode 👉 display block: 한 행을 전부 차지 inline-block: 내 크기만큼 차지 (어울림) index.html 와 사이에 공백이 있으면 안 됨... 와 사이에 주석을 주는 것도 방법 중 하나임 부모 태그에 font-size: 0px; 주는 것도 또 다른 방법임 => 상속 style.css .left-menu { width: 20%; height: 400px; background: cornflowerblue; /* float: left; 추가 */ display: inline-block; /* 추가 */ } .right { width: 80%; height: 400px; background: coral; /* float: left; 추가 */ display: in.. 2022. 12. 31.
[CSS] layout 레이아웃 1 - float 💾 Editor: VSCode 위와 같은 레이아웃을 배치하는 실습 진행. 오른쪽처럼 전체 레이아웃을 감싸는 wrapper(or container) 박스를 만들어두면 좋음. layout1.html .container .container { width: 800px; /* 최대 width를 설정 */ } 전체 레이아웃을 감싸는 wrapper box .header .header { width: 100%; /* 부모 태그의 width의 100% */ height: 100px; background: aquamarine; } width를 100% 주면 부모 태그의 width의 100%를 사용한다는 의미 .left-menu && .right (수정전) .left-menu { width: 20%; height: 400p.. 2022. 12. 30.
[HTML] div 박스 css design (box-shadow) 💾 Editor: VSCode 🔎 div 네모 박스를 넣고 싶다면 'div' 사용 index.html style.css .box { width: 100px; height: 100px; background-color: aqua; } 네모 박스가 하나 추가됨 style.css .box { width: 100px; background-color: cadetblue; margin: 30px; /* 상하좌우 여백 */ padding: 40px; /* 상하좌우 안쪽 여백 */ /* border: 4px solid black; 테두리 */ border-radius: 15px; /* 테두리 둥글게 */ /* 가운데 정렬 */ /* display: block; 생략 가능, div가 박스 특징 */ margin-left:.. 2022. 12. 29.
[부스트코스] 웹 접근성 지침 정리 1 2. 웹 접근성 지침 0) 웹 접근성 지침 소개 WCAG (Web Content Accessibility Guidelines) - W3C KWCAG (Korea) 해외 웹표준기술 동향을 토대로 국내 실정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침 원칙 4개, 지침 13개, 검사항목 24개 인식의 용이성 대체텍스트 멀티미디어 대체 수단 명료성 운용의 용이성 입력장치 접근성 충분한 시간 제공 광과민성 발작 예방 쉬운 내비게이션 이해의 용이성 가독성 예측 가능성 콘텐츠의 논리성 입력 도움 견고성 문법 준수 웹 애플리케이션 접근성 1) 적절한 대체 텍스트 제공 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 함 텍스트 아닌 콘텐츠 = 이미지 alt로 대체 텍스트 제공 input.. 2022. 12. 28.

티스토리툴바