JudithHopps JudithHopps

시맨틱 태그가 무엇인가요? 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 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식 문..

display : flex 요소 display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 됩니다. inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있습니다. flex-direction은 내부 요소(아이템)들을 어느 축(가로 또는 세로)을 이 값에 따라 justify-content, align-items, align-content 등의 속성들이 작용할 방향이 결정됩니다. flex-wrap은 내부 요소의 갯수 X 길이가 컨테이너를 넘어갈 때 이들을 여러 줄에 걸쳐 나열할지 여부를 정합니다. justify-content는 메인 축에서 아이템들을 정렬할 방식을 정합니다. flex-start(end)는 row(column)-reverse의 영향을 받는다는 점에서 start..

position static 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다. z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-c..

background-image background-repeat : repeat, no-repeat, repeat-x, repeat-y, space, round, 2개(x축 y축) background-position : top, center,bottom,left,right, bottom 10px right 3vw background-size : auto, contain, cover, 10% ex) 한가지 문제점은 outer의 radius를 50%로 지정해주었지만 with-bg가 오버플로우가 일어나 화면에서 적용이 안되었다. 이를 해결하기 위해 outer의 overflow:hidden을 설정해주어야 한다. 그라데이션(linear-gradient) background: linear-gradient(gold,t..

border 2px solid black : 픽셀 / 굵게 / 색 0.5em dashed orange : 픽셀 50% / 점선 / 색 1.5vmin dotted darkblue : 1.5vmin / 원 / 색 box-sizing content-box : 기본값 - 글씨의 width를 조절 가능 border-box : padding과 margin 합쳐서 width 설정 가능 border-radius 0 / em / % / px px px px (왼위부터 시계방향 순) 24px 0 (역슬레시 방향 테두리) / 0 24px (/ 테두리) ex) 24px 0 ex2) ul > li:not(:last-child) { border-bottom: 2px solid black; } overflow x축 y축 값을 같이..

요소의 크기 inline이 아닌 요소는 width와 height로 크기를 조절할 수 있습니다. 단위로는 부모의 길이에 상대적인 %를 사용할 수도 있고 뷰포트(viewport) 너비와 높이의 1/100 단위인 vw와 vh, 이들 중 큰 것과 작은 것의 1/100 단위인 vmax와 vmin도 유용하게 사용됩니다. 텍스트가 한 줄일 경우 height과 line-height을 똑같이 맞춰주면 세로 방향에서 가운데로 정렬한 것과 같은 모습이 됩니다. calc(100% - 50px)과 같은 형식으로 연산자를 사용하여 필요에 맞는 길이로 조절할 수도 있습니다. 예시) width를 꽉채우려면 100vw, height를 꽉 채우려면 100vh를 넣으면 된다. 단, html(최상의 부모요소)에 padding이나 margi..