JudithHopps JudithHopps

와 은 HTML에서 사용되는 두 가지 중요한 태그입니다. 이들의 주요 차이점과 언제 어떻게 사용해야 하는지에 대해 설명하겠습니다. 태그: 는 "division"의 줄임말로, 웹 페이지 내에서 구획을 나누는 역할을 합니다. 태그는 블록 레벨 요소로, 즉 한 줄 전체의 너비를 차지하며 다음 줄로 넘어가는 특성을 가지고 있습니다. 주로 아래와 같은 상황에서 사용됩니다: 레이아웃 구성: 웹 페이지의 다양한 영역을 나누고 배치하는 데 사용됩니다. 예를 들어, 헤더, 사이드바, 본문, 푸터 등의 섹션을 나눌 때 를 활용할 수 있습니다. 스타일링과 디자인: CSS 스타일링을 적용하고 레이아웃을 조정하기 위해 를 사용합니다. 는 CSS 클래스나 ID와 함께 사용되어 스타일을 적용하는 용도로 활용됩다. Header Si..

SVG(Scalable Vector Graphic) add_to_queue 새 창에서 열기 벡터 그래픽 ( 👉 MDN 페이지 ) 비교적 복잡하지 않은 도형, 그래픽을 표현하는데 유리 .svg 파일을 img에 연결, 또는 svg 태그에 직접 작성 가능 유용한 SVG 관련 툴 👉 Shape Divider 👉 Haikei 오디오와 동영상 add_to_queue 새 창에서 열기 속성설명비고 src 미디어 파일 위치 source 태그로 대체 가능 controls 제어 인터페이스 autoplay 자동재생 일반적으로 브라우저에서 막아놓음 loop 반복재생 1. src 속성을 사용한 링크 - controls를 필수로 넣어야 미디어를 재생할 수 있다. - autoplay, loop를 넣을 수 있다. 얄코 영상 오디오 얄..

A. 태그 위주 add_to_queue 새 창에서 열기 article { /* ... */ } article aside { /* ... */ } article aside figure { /* ... */ } article div header { /* ... */ } article ul li { /* ... */ } article div ul li { /* ... */ } article div ul li.special { /* ... */ } /* ... */ 장황한 선택자 CSS 선택자만으로 요소를 식별하기 어려움 위치와 태그가 같지만 종류가 다를 경우 B. 클래스 위주 add_to_queue 새 창에서 열기 .card { /* ... */ } .card .thumb { /* ... */ } .card ..

시맨틱 태그가 무엇인가요? HTML5의 여러 태그들은 그 자체로 어떤 의미를 지닙니다. 이번 시간에 배울, 왼쪽 사이드바에 나열된 태그들은 기능적으로는 div 태그와 동일하지만 각각의 종류 자체가 페이지에서 해당 요소가 갖는 의미와 역할을 나타내죠. 시맨틱 태그를 쓰면 뭐가 좋은가요? 웹 접근성 개선 스크린 리더로 페이지를 보는 사람들이 필요한 정보를 보다 수월히 찾을 수 있습니다. SEO (Search Engine Optimization) 검색엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는데 도움이 됩니다. 유지보수와 가독성 모든 구획들이 div들로 구성된 페이지보다 코드를 읽고 구조를 파악하기 쉽습니다. 태그별 설명 header 페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용됩니다. 로고..

웹 접근성 관련 참고자료 👉 W3C 페이지 👉 널리 (체험 및 교육) 1. 이미지는 alt 속성에 설명을 넣을 것 - 의미 없어도 alt = ""(공백)으로 처리 - alt가 없으면 스크린리더가 src의 링크를 읽음 2. css에 설명 넣기 (화면상에 보이지 않게) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } 3. aria-label로 설명 넣기 - 예시) ◀ 4. aria-hidden 속성과 role 속성 - : 스크린 리더가 읽지 않음 - : 특정 정보를 ..

1. DOCTYPE 문서가 형식과 버전으로 작성되었는지를 명시 선언시 standards mode(최신 형식)로 문서 실행 선언하지 않을 경우 quirks mode(익플5, 네이게이터 4 등 옛날 브라우저를 모방)로 문서 실행 ​ 2. head 태그 메타데이터(기계가 읽을 정보)가 담기는 곳 페이지의 제목 파비콘 기타 메타 정보 CSS와 자바스크립트 등의 코드 및 링크 3. title 태그 웹페이지의 제목 브라우저의 탭에 표시 브라우저 즐겨찾기의 제목으로 표시 검색엔진 검색결과의 제목으로 표시 4. meta 태그와 속성들 a. charset ​ 🎥 인코딩 관련 얄코영상 페이지가 어떤 문자로 작성되었는지 명시 - 글자가 깨지지 않도록 UTF-8 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식 문..

form 1. 형식 정보를 제출하기 위한 태그들을 포함 autocomplete 속성: 자동완성 여부 (기본: on) 입력을 받는 요소 type 속성을 통해 다양화 인풋 요소마다의 라벨 for 속성값을 인풋 요소의 id와 연결. 인풋의 클릭 영역 확장 버튼 type 속성에 submit(제출), reset(초기화), button(기본 동작 없음) 2. 그룹화 폼 태그 내 입력요소와 라벨들을 그룹화 disabled 속성: 포함된 입력요소 비활성화 필드셋 요소의 제목 또는 설명 input 👉 의 타입과 속성들 보기 텍스트 관련 인풋 속성들 속성설명비고 placeholder 빈 칸에 보이는 안내문 maxlength 최대 길이 minlength 최소 길이 위반시 submit이 거부됨 숫자 관련 인풋 속성들 속성설명..

링크 1. 형식 target 속성값설명비고 _self 현재 창 기본 _blank 새 창 텍스트나 내부 이미지의 alt 등으로 명시 필요 _parent 부모 프레임 사용시 _top 최상위 프레임 사용시 2. 속성 or Phone address 형식 웹사이트 주소: yalco.kr 오피스: 전산시 개발구 코딩동 123번길 45 전화 010-1234-5678 이메일: yalco@kakao.com