본문 바로가기

웹코딩 배우기280

자바스크립트 - for of 반복 See the Pen for of by nilgi (@nilgi) on CodePen. • for (variable of iterable) 반복 가능한 요소 반복 - 문자 반복 const name = "Tistory"; let text = ""; for (const x of name) { text += x; } - 배열 반복 const name2 = ["T", "i", "s", "t", "o", "r", "y"]; let text2 = ""; for (const x2 of name2) { text2 += x2; } - new Set 반복 const name3 = new Set(["T", "i", "s", "t", "o", "r", "y"]); let text3 = ""; for (const x3 of n.. 2023. 1. 26.
자바스크립트 - break 반복중단, continue 건너뛰기 See the Pen break, continue by nilgi (@nilgi) on CodePen. • break : 반복문을 중단한다. for (let n = 0; n 2023. 1. 12.
while 반복 - 자바스크립트 See the Pen while by nilgi (@nilgi) on CodePen. • while : 값이 참일 때 조건을 반복 while (n < 8) { text += "지금 보이는 숫자는 " + n + "입니다. " n++; } • do while : 값이 참임을 확인전에 한 번 실행하여 조건이 맞으면 반복한다. 거짓이어도 최초 한 번은 실행 do { dw_text += "내가 좋아하는 숫자는 " + m + "입니다. "; m++; } while (m 2023. 1. 10.
CSS를 이용한 이미지 갤러리 만들기 See the Pen 이미지 갤러리 by nilgi (@nilgi) on CodePen. 파일 다운 받지 마세요. 실습용. 2023. 1. 9.
자바스크립트 - for of See the Pen for of by nilgi (@nilgi) on CodePen. • for (variable of iterable) {} - for of는 반복 가능한 객체를 반복한다. - cosnt, let, var 사용 const bdas = ["rnfn", "tmsla", "qncj", "gosTjq"]; let bda_text = ""; for (let x of bdas) { bda_text += x + " "; } • 문자를 부여하여 한 글자식 표시할 수 있다. let w1 = "글자하나하나표시하기"; let wtext = ""; for (let n of w1) { wtext += n + " "; } 2023. 1. 5.
CSS / background-size 배경 크기 설정 background-size 배경 이미지 크기 조절 background-size: auto; 기본값 원본 크기 그대로 콘텐츠 공간에 맞게 이미지가 잘림 background-size: contain; 가로, 세로 비율 유지하며 이미지 다 보임 콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬 background-size: contain; 가로, 세로 비율 유지하며 이미지 다 보임 콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬 이미지 해상도 손실 background-size: cover; 콘텐츠 크기에 맞게 덮음 background-size: 수치(px, %...); 수치 n; : 가로, 세로 크기 동일 background-size: 수치(px, %...); 수치 n n; : 앞 숫자 가로, 뒷 숫자 세로 ba.. 2022. 12. 28.
for in 반복 - 자바스크립트 See the Pen for in by nilgi (@nilgi) on CodePen. • for (key in object) { } // for in은 객체 속성 반복 for (let x in myname) { nametext += myname[x] + " "; } - for in이 myname를 반복적으로 불러와 n에 반환 • for (variable in array) {code} // for in은 array를 반복 for (let y in fias) { fiatext += fias[y] + " "; } - 배열의 순서가 중요할 때는 사용하지마. 순서가 중요할 때는 for 또는 Array.forEach() 사용 • Array.forEach()는 요소를 한 번씩 불러온다. afes.forEach(my.. 2022. 12. 22.
CSS - background, padding으로 border(그라디언트) 효과 내기 See the Pen background, padding 테두리 그라디언트 by nilgi (@nilgi) on CodePen. border-image를 사용하여 테두리에 그라디언트를 넣는 방법을 배웠다. 그러나 이는 border-radius를 적용할 수 없다. 적용하는 방법이 있지만 약간 복잡하다. 그래서 대체하여 background, padding으로 그라디언트가 있는 둥근 모서리 테두리 효과를 쉽게 낼 수 있다. .bp_bor_box { display: inline-block; background: linear-gradient(to right, tomato, gray); // 전체 박스에 그라디언트 배경을 지정한다. padding: 6px; border-radius: 13px; } .bp_bor {.. 2022. 12. 20.
CSS - border에 그라디언트(그라데이션) 넣기 See the Pen border-gradient by nilgi (@nilgi) on CodePen. border: 10px solid; border-image: linear-gradient(to right, #FF9702, #ccc) 1; // 뒤에 1은 border-image-slice 값이며 그리디언트 적용을 위해 필수. 그라디언트를 적용하면 border-radius를 쓸 수 없다. border-radius 쓰려면 background와 padding으로 테두리 효과를 내는 게 편하다. CSS - background, padding으로 border(그라디언트) 효과 내기 CSS - background, padding으로 border(그라디언트) 효과 내기 See the Pen background, .. 2022. 12. 20.
CSS / aspect-ratio 가로, 세로 비율 지정 See the Pen aspect-ratio by nilgi (@nilgi) on CodePen. width 값을 주면 가로를 기준으로 height 값을 주면 세로를 기준으로 비율을 지정한다. 여러 장의 이미지 비율을 동시에 수정할 때 쓰거나 반응형 콘텐츠의 비율을 유지하고 싶을 때 쓰면 된다. 2022. 12. 19.
CSS - filter See the Pen filter by nilgi (@nilgi) on CodePen. • grayscale(%) : 흑백화 • blur(px) : 흐림 • brightness(%) : 밝기 • contrast(%) : 대비 • drop-shadow(x, y, 흐림, 색) : 그림자 • hue-rotate(deg) : 색조 i• nvert(%) : 반전 • opacity(%) : 불투명 • saturate(%) : 채도 • sepia(%) : 세피아 ※ 두 가지 이상 효과 조합 가능. 2022. 12. 18.