JudithHopps JudithHopps

상속되는 CSS 속성들 예 color cursor font 관련 letter-spacing line-height list-style 관련 text-align text-decoration text-shadow visibility word-spacing 👉 전체 CSS 속성 리스트에서 살펴보기 inherit 스스로의 값을 포기하고 부모로부터 받은 상속값을 적용합니다. initial 브라우저가 부여한 값을 포기하고 각 속성의 초기값을 적용합니다. p 브라우저가 기본적으로 제공하는 p의 display 속성은 block이죠. p 그런데 속성값을 initial로 주게 되면 p 이와 같이 display 속성의 초기값인 p inline으로 바뀌게 됩니다. 👉 display 속성의 명세 보기 (초기값 확인)👉 initi..

1. 특성 선택자 👉 특성 선택자 MDN 문서 /* 속성 값을 기준으로 선택 */ a[href="https://www.yalco.kr"] { color: #ff4e00; font-weight: bold; } /* 특정 속성이 있는 요소 선택 */ input[disabled]+label { color: lightgray; text-decoration: line-through; } /* 속성값이 특정 텍스트를 포함하는 요소 */ span[class*="item"] { text-decoration: underline; } /* 속성값이 특정 텍스트로 시작하는 요소 */ span[class^="fruit"] { color: tomato; } span[class^="vege"] { color: olivedrab;..

다른 CSS 파일 임포트하기 @import를 사용하면 절대 및 상대경로를 사용해서 다른 CSS파일의 내용을 불러올 수 있습니다. 여러 페이지들에서 공통적으로 사용되는 스타일들을 특정 파일로 분리하여 모듈화할 수 있죠. ex) @import url(./common.css); CSS 변수 정의하기 1. 특정 요소에서만 사용될 수 있는 변수 - 특정 요소 { --변수명 : css 설정; } ex) u { --not-good: wavy underline orange; --wrong: wavy underline red; } css에서 변수명은 --을 붙여야 한다. 2. 모든 요소들에게 사용될 수 있는 변수 :root { } ex) :root { --font-small: 8px; --font-normal: 16px..

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 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식 문..