JudithHopps JudithHopps

border-collapse 속성은 인접한 td들 간 또는 table과 td 간 테두리를 분리할지 또는 공유할지를 지정합니다. border-spacing 속성은 border-collapse가 separate일 시 인접한 테두리들간의 간격을 지정합니다. 과거 테이블 태그의 cellspacing 속성을 대체합니다. caption-side 속성으로는 테이블 캡션의 위치를 지정할 수 있습니다. table-layout 속성은 표와 칸의 크기가 결정되는 알고리즘을 선택합니다. 테이블의 너비를 좁게, 또는 넓게 주고 결과를 비교해보세요. colgroup 안의 col에 CSS 속성을 부여해서 n번째 칸들의 스타일을 지정할 수 있습니다. 테이블 관련 요소들의 display에는 각각의 역할에 맞는 특수한 내부 속성들이 기..

1. font-family 속성 👉 MDN에서 font-family 관련 상세 정보 보기 body { font-family: A,B,C,D,sans-serif } A가 없으면 B CD가 보임. ※ sans-serif , serif, cursive CSS 폰트의 한계 사용자의 컴퓨터에 있는 폰트만 실질 적용 가능 맥 사용자, 윈도우 사용자간 탑재 폰트 차이 일관성 유지 어려움 2. 웹 폰트 서버에 저장된 서체를 사용자의 컴퓨터에서 사용할 수 있도록 함 ex) @font-face { font-family: "MyNotoSans"; src: url(./fonts/NotoSansKR-Regular.otf); } @font-face { font-family: "MyNotoSans"; font-weight: 100..

아직 표준화되지 않은 CSS 속성들에 사용 접두사브라우저 -webkit- 사파리, 크롬, 오페라 -moz- 파이어폭스 -ms- 엣지, 익스플로러 -o- 구버전 오페라 유용한 툴 👉 Autoprefixes (온라인 툴)

상속되는 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 ..