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

1. Default Parameters (기본값 매개변수) ES6 전에는 function을 호출할 때 parameter를 부른 만큼 인자를 넣어주지 않으면 에러가 뜨기 때문에 if문으로 해당 parameter의 값이 없다면, default 값을 띄우라는 코드를 작성해주어야 했는데, ES6 전↓ function addDefaultParam(a, b) { if (b === undefined) { b = 'world'; } console.log(`${a}, ${b}!`); } addDefaultParam('Hello'); // 출력값 === Hello, world! ES6 부터는 parameter를 선언하는 자리에 default 값을 넣어주면 된다. ES6! ↓ function addDefaultParam(a..

말그대로 github에 project를 commit 했는데 잔디가 누락되는 현상을 겪었다. ...신나게 commit을 했고 잘 올라가는 것까진 확인을 했는데 잔디를 잘 심고있는지는 미처 확인을 못했던 탓에, 소소한 코드지만 작고 소중한 나의 잔디들이 누락되고 있음을 오늘에서야 발견했다. 원인은 github에 등록된 email 주소와 로컬에 연결된 email 주소가 달랐던 것. 혹시 누군가.. 또는 내가 다른 컴퓨터로 작업을 했을때 잔디가 또 누락될 경우를 대비해 메모 작성한다. 터미널에 등록된 email 확인 git config --list​ 터미널에서 git config --list를 작성하면 말그대로 등록한 정보가 출력된다. 거기서 user.email을 확인하고 github에 등록된 이메일과 다르다면..

작년 중순 처음 git을 접했을 때, 메모장처럼 공부한 것을 모조리 커밋 했다가 의미있는 커밋을 해야 한다는 여러 사람의 블로그 및 자료를 보고 그동안 작성해두었던 레파지토리를 지우고는 커밋을 멈췄다. 하지만, 꾸준히 공부를 한다는 것에 의미를 두고 추후에 꺼내봤을 때 이해하기 쉽도록 코드를 깔끔하게 정리하여 깃허브에 잔디밭을 만들고 싶어졌다. 언젠가 그 잔디들이 기반이 되어 더나은 개발자로 성장할 수 있길 바라며, 오늘부터 다시 시작. VS code commit git pull origin 브랜치이름 // 로컬에 업데이트 git push origin 브랜치이름 // github에 commit git --amend // 마지막 커밋에 지금 스테이징된 파일 추가해넣기 (+ :wq )

이미지 슬라이드를 반응형으로 짜는 중에 슬라이드 이전 버튼을 클릭할 시 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; }