PSUR

어떠한 결과값을 표시하는 태그 IE 호환 x Attribute 속성 내용 예시 for - 값을 계산하는 태그에 id값을 입력하고, for로 연결 - 띄워쓰기로 여러개의 for값 입력 가능 1 1 2 name - form 요소로 사용될 때 작성 - form 양식 전송시 값이 제출되진 않음

display: flex;가 선언된 태그는 자식들의 영역이 아닌 부모의 영역을 width로 갖게 된다. 예시 1 2 3 4 5 6 7 8 9 10 .container { width: 320px; } .test-list { display: flex; align-items: center; } a { width: 50px; } 위 코드의 경우 display: flex;가 선언된 .test-list는 width 값이 부모인 .container의 width인 320px을 width로 가진다. a태그가 자기 영역을 온전히 차지할 수 있도록 a태그에 flex-shrink: 0;을 붙여줘도 .test-list의 width는 여전히 320px이다. 그렇다면 .test-list가 flex의 기능을 수행하면서 자식의 wid..

1. SVG 파일 첨부 https://icomoon.io/app/#/select 에서 Generate Font를 사용하여 svg파일을 폰트로 변경하면, fontawesome에서 제공하는 아이콘처럼 태그로 첨부할 수 있다. 2. SVG 직접 그리기 (1) 기본 도형 태그 : 사각형 : 원 : 타원 : 선 : 다각형 (자동닫힘 x) : 다각형 (자동닫힘 o) See the Pen Untitled by Seonu (@parkseonup) on CodePen. (2) Path 태그 : 일러스트레이터 펜툴과 유사한 그리기 속성 d="" 선언시 드로잉 시작 See the Pen Untitled by Seonu (@parkseonup) on CodePen.

object-fit IE 호환 x figure { width: 100px; height: 100px; } img { width: 100%; height: 100%; object-fit: cover; } 참고링크 : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

이미지 슬라이드를 반응형으로 짜는 중에 슬라이드 이전 버튼을 클릭할 시 justify-content: flex-end;를 사용하여 정렬을 전환해야 했는데, 기존 코드로는 justify-content: flex-end; 가 작동하지 않았다. 기존 코드↓ 1 2 3 4 5 이전 다음 * { padding: 0; margin: 0; } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } section { max-width: 400px; width: 100%; height: 400px; } div { position: relative; display: flex; width: 100%; he..

로고 등 보다 선명한 화질을 위해 웹사이트에 출력될 사이즈보다 큰 이미지를 삽입할 경우, css값으로 이미지를 축소시키면 이미지가 흐려보이는 현상이 있음. 해당하는 이미지의 렌더링 방식을 css에서 변경해주면 해결됨 img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; -ms-interpolation-mode: nearest-neighbor; image-rendering: crisp-edges; }

p { background: none; background: -moz-linear-gradient(right, #cb58fe 0%, #876ef8 100%); background: -webkit-linear-gradient(right, #cb58fe 0%, #876ef8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb58fe', endColorstr='#876ef8', GradientType=1); color: #cb58fe; /* ie에서 보이는 컬러 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

flex-direction: flex-column; 일 경우 자주 생기는 여백 확장 문제 나는 보통 flexbox 자손으로 이미지가 있을 경우 flex-direction을 flex-column으로 먹이면 여백이 엄청 늘어나는 문제를 겪었다. 해결방법은 /* 이미지에 min-height: 1px; 을 먹인다 */ img { min-height: 1px; }

스크린리더 고려해서 html 마크업으로 글씨는 써두되, 화면 상에서 bg에 먹인 아이콘만 보이고 싶을 때 쓰는 방법 text-indent 사용 유투브 bg_only { text-indent: -1000px; background: url('assets/youtube_icon.png') no-repeat center; background-size: 24px auto; }

counter-reset : counter 초기화 counter-increment : counter 값 증가시키는 거 counter() or counters() function : counter값 추가 또는 적용 ol { counter-reset: section; } li { counter-reset: subsection; } li::before { counter-increment: section; content: counter(section); } 종류 어떤거 있는지 나중에 추가하기 https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset