H_Develop

WAI-ARIA 웹 접근성을 준수하기 위해 장착해야 할 도구. Web Accessibility Initiative's Accessible Rich Internet Applicatioins 스크린리더가 브라우저를 읽을 때, 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술. 자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어준다. 스크린 리더란 브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면을 낭독해주는 소프트웨어. aria-label 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할 aria-label과 role을 쓰기 위한 규칙 첫 번째 규칙 만약 HTML에 개발자들이 쓰..

FrontEnd/HTML 2022. 12. 6. 10:07

input 태그에는 data-value 라는 데이터 속성을 임의로 만들 수 있다. 속성 명은 data-value 이지만, HTML 표준속성인 value 속성과는 상관이 없다. 임의로 만든 속성이기 때문이다. 장점 DOM 객체를 통해 데이터 속성 조작이 가능하다. 데이터 속성은 DOM 객체의 dataset 속성을 참조하여 얻을 수 있다. var input = document.querySelector('#userName'); console.log(input.dataset); 위 코드와 같이 userName input을 셀럭터로 잡고 해당 DOM객체의 dataset을 출력해보면 DOMStringMap으로 데이터 속성들을 가지고 있음을 확인할 수 있다. 그러나 속성 key 값을 보면 'data-'가 빠진 채로 ..

FrontEnd/HTML 2022. 11. 25. 12:37

새소식 더보기 > [공지] 인터넷 뱅킹 점검 안내 2022.09.03 [공지] 인터넷 뱅킹 점검 안내 2022.09.03 [공지] 인터넷 뱅킹 점검 안내 2022.09.03 이벤트 더보기 > 오픈 뱅킹 신청하고 시원한 혜택 받으세요! 오픈 뱅킹 신청하고 시원한 혜택 받으세요! 오픈 뱅킹 신청하고 시원한 혜택 받으세요!

FrontEnd/HTML 2022. 6. 24. 08:26

div 에 padding 을 주면 총 사이즈가 커져, main 박스에 밀리거나 하는 현상을 막아줌 (main width : 300px; / div1 width : 150px; / div2 width : 150px; border : solid 1px black; main 길이를 넘어서기에 모양이 망가지지만, box-sizing을 사용하면 border가 안쪽으로 들어와서 겉 모양이 유지된다.) Vertical-align 인라인 블록 등, 모든 인라인 요소의 수직 정렬을 위해 사용. 블록 레벨요소의 수직 정령에서는 영향이 없음. 속성값 baseline, sub, super, top, text-top, middle, bottom, text-bottom, , , inherit 속성값설명예시 Baseline (li..

FrontEnd/HTML 2022. 6. 22. 19:14

float, clear, position 등 이용하여, 사이트 맵과 배너 목록을 작성해보자, - 사이트 맵은 네비게이션 메뉴의 모음이다. - 각 메뉴를 클릭하면 해당 웹 페이지로 이동이 가능하다. 병원 소개 인사말 병원 네트워크 조직도 찾아오시는 길 감기 클리닉 기침 감기 코 감기 목 감기 몸살 감기 비염 클리닉 알레르기 비염 축농증 코막힘 비염 온라인 상담 공지사항 자주하는 질문 질문과 답변 자료실 수제 초콜릿 전문점 수제 초콜릿 전문점 초콜릿 스타일링 간식용 수제 초콜릿 2023.03.10 좋아요 3 · 추천 5 초콜릿 스타일링 간식용 수제 초콜릿 2023.03.10 좋아요 3 · 추천 5 초콜릿 스타일링 간식용 수제 초콜릿 2023.03.10 좋아요 3 · 추천 5 초콜릿 스타일링 간식용 수제 초콜..

FrontEnd/HTML 2022. 6. 22. 18:42

Float 속성은 좌측 또는 우측에 배치 Position 속성은 HTML 요소의 위치 지정 - relaive 상대위치 - absolute 절대위치 - fixed 위치고정 relative 상대위치 / 원 위치 유지하며 기준을 잡고 원하는 위치로 요소를 이동 상대 위치 지정(position : relative) 요소 A 요소 B 요소 C ------------------------------------------------------------------------------------------------------------------------------------------------- 프로그래밍 강좌 HTML 강좌 파이썬 강좌 자바 강좌 PHP 강좌 C# 강좌 CSS 강좌 absolute 절대위치 ..

FrontEnd/HTML 2022. 6. 22. 16:58

Header 페이지 상단 로고, 상단 메뉴, 메인 메뉴 등 헤더 정의 Sidebar 메인 콘텐츠 좌측 또는 우측, 사이트 링크, 공지 글 목록 등 Section 메인 콘텐츠와 같이 독립적인 구획(section), 독립적인 영역에 사용 Footer 하단 끝에 위치, 하단 메뉴, 회사나 기관의 주소, 연락처, 저작권 표시 등 의미 요소설명 상단 헤더(태그) 사이드 바 (태그) 메인 콘텐츠(태그) 하단 푸터(태그)

FrontEnd/HTML 2022. 6. 22. 16:20

박스 중앙 배치 좌측에서 우측 방향으로 진행 margin : 0 auto; float 요소 A 요소 B 요소 C clear float 영향을 받지 않고, 새로운 줄에 배치하려면 clear를 사용 (block 값을 갖는다.) Orange OOOOOO 웹 페이지 레이아웃 (Layout) 전체 윤곽을 잡는 작업 div 요소를 이용한 레이아웃 상단 헤더 사이드 바 메인 섹션 하단 푸터

FrontEnd/HTML 2022. 6. 21. 17:45