잡동사니_로드

selectioning element 사용 방법 공통적으로 지켜야 할 룰 sectioning element 내에는 반드시 heading 태그가 있어야 함 ex) 제목 // heading tag ... heading tag를 적지 않아도 됨 4. section 논리적으로 완결된 집합체를 묶음 heading tag 필요 section vs div - section : 서로 연관된 데이터들을 하나로 묶을 때 - div : css, js 등을 위해 연관 없는 데이터를 묶을 때 5. article heading tag 필요 기사, 블로그, 트윗, feed 등 정보 컨텐츠에서 사용 6. aside heading tag 필요 sidebar, 광고, 작은 위젯 바에서 주로 사용 7. footer heading tag ..

breadcrumb - 링크를 타고 타고 들어갈 때 그 경로를 나열해놓은 것 pagination - 페이지 링크들의 종합 cf> aria-label - 스크린리더 사용자에게 HTML 요소의 보다 정확한 의미를 알려주는 속성 ex) Previous 만약 aria-label 이 없었다면 스크린리더 사용자에게 previous로 알려줬겠지만 aria-label이 있으면 Go to the Previous Page라고 알려줌 aria-hidden="true" -스크린리더가 이 요소 읽기를 원치 않을 때 cf> font-awesome (icon font 제공하는 사이트) 사용방법 1. head tag에 입력 2. 원하는 icon 클릭 후 원하는 부분에 코드 입력

media file 입력 예시 - 사진(img). 음악(audio). 영상(video), iframe 등 audio tag(음성 파일, mp3 파일) - - src : 첨부할 audio 파일의 경로 (필수 입력) - controls : 플레이 버튼, 정지 버튼 등 표시 - autoplay : control은 보여주고 싶지 않지만, 페이지에 들어가면 자동 재생되도록 - loop : audio file 반복 재생 쓰는 다른 방법 - ~~~~(위 source 파일을 전부 지원하지 않는 브라우저일 때 출력됨) 위 두 방법의 차이 - 두 방식 모두 브라우저에 적용 시 나오는 컨트롤러가 하나이고, 나오는 output은 위, 아래 모두 하나의 파일만 출력됨(아래 방법은 제일 위의 src에 적혀 있는 것만 나옴) - ..

label tag - 각각의 form tag에 이름을 붙이는 태그 - label에는 "for" attribute가 들어감 - 어떤 input 태그에 대한 label인지 알기 위해 - 라벨 - - button tag 관련해서 도움을 받았던 사이트 https://nykim.work/96 table tag - 데이터가 들어있는 표를 만들어주는 tag - 관련 tag - - : table row(가로) - : table header - 내용의 대표를 이야기할 때 - 예) 1교시(th) 국어(td) 수학(td) 영어(td) 과학(td) - : table data - : th 부분을 한꺼번에 묶어 종류 부분임을 표현해주는 tag - 특별한 기능은 X - : td 부분을 한꺼번에 묶어서 내용 부분임을 표현해주는 ta..

정의 목록(description list) 1. 용어 정리 시 사용 2. key-value로 정보 제공 시 관련 태그 dl - description list dt - " term(key) dd - " data(value) dfn - " definition dt의 의미를 좀 더 구체적으로 쓰려고 할 때 사용 - ABC ->즉, dd 태그 안의 내용은 dt의 내용을 설명 주의 - dt 혼자서 따로 놀면 문법상 오류 예) --- x ABC abc ㄱㄴㄷ - dl의 자식 요소로는 dt, dd만 올 수 있음 cf> div 태그는 dt, dd 태그를 감싸는 용도로 사용 가능 - 같은 뜻으로 사용 - dt, dd는 반드시 dl의 자식요소로 존재해야 - 스크린리더의 경우는 와 가 1:1일 때 쓰는 것이 사용자의 이해를..

태그의 구조 - (열린 태그) 내용 (닫힌 태그) - attribute - 태그에 추가적인 정보 제공 - 웹 표준에 맞는 올바른 사용법을 익혀야 제목 / 단락 - 제목 : h1, h2, h3 .....h6 - 핵심 태그는 제목 태그를 사용한다! - 단락 : p(paragraph) 강조(emphasis) 태그(html에게 중요하다는 것을 알림) - em, strong 태그 - em : 글씨 기울어짐, strong : 글씨 두꺼워짐 anchor tag - href : hypertext reference (reference : 주소값) - href 주소값 표기 방법 1. homepage url 입력 2. 페이지 내 이동 예) id 값이 hello인 곳으로 이동 - a href="#hello" 3. 메일 쓰기 ..