JudithHopps JudithHopps

1. transform 속성 👉 MDN 문서 보기 주위 요소들에 영향을 끼치지 않으면서 요소의 모습을 바꿉니다. ex) scale: 크기 rotate(45deg) : 각도translate (x,y) : 위치skew(0deg, 30deg) : 왜곡 2. transition 속성 👉 MDN 문서 보기 👉 cubic-bezier 값 생성기 transiton 속성은 CSS 값이 달라질 때 요소에 어떤 효과로 반영될지 지정합니다. 속성, 지속시간, 시간함수, 지연시간 순으로 값을 넣을 수 있습니다. 주의! 적용할 CSS 속성이 이미 기존값이 적용되어 있어야 동작합니다. ex) transition : left 2s ease-in / background-color 1s /all 1s 3. animation 속성 👉 ..

1. 부모 적용 속성들 display : block / grid grid-template-columns[rows] : 1fr 1fr 1fr 100px gap grid-auto-row : auto / minmax(160px,auto) / justify-items align-items 2. 자식 적용 속성들 grid-column grid-row grid-column grid-row justify-self align-self 3. grid 레이아웃 실습 : 초기 모습) 실습 과정) 개발자 도구의 grid 클릭 body { margin: 0; } main { width: 100vw; } main > * { padding: 0.8em; color: slateblue; background-color: lavende..

float 속성에 left 또는 right 값을 주면 매우 독특한 형태와 기능을 갖게 됩니다. 먼저, 해당 요소는 '붕 뜬' 상태가 되어서, 나란히 배치된 요소들 가운데 자리를 차지하지 않게 됩니다. 때문에 다음에 오는 블록 요소들이 자리에서 밀려나지 않고, 그 아래로 들어가버리게 되죠. 그러면서도 특이하게도, 텍스트 등의 인라인 요소들은 float 요소들에 밀려나게 됩니다. 그리고 다른 float된 요소들 또한 마찬가지죠. 또한 해당 요소가 인라인일 경우 블록과 같은 속성을 갖게 되어, CSS로 높이와 너비 등을 적용할 수 있게 됩니다. 물론 float 상태가 되므로 자리는 같은 float끼리만 차지하게 되죠. clear 속성을 이전의 float 요소들과 같이, 또는 both로 적용하면 그들 밑으로 들..

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;..