본문 바로가기

웹코딩 배우기289

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.
CSS - filter: brightnes를 이용한 이미지 어둡게 또는 밝게 하는 방법 See the Pen filter: brightness by nilgi (@nilgi) on CodePen. CSS로 이미지 밝기를 조절하는 방법은 다양합니다. 아마 백그라운드 색을 opacity 하는걸 가장 많이 사용할 것 같습니다. 그것보다 조금 더 편한 방법은 filter: brightnes를 사용하면 됩니다. filter: brightnes(50%); // 어둡게 filter: brightnes(100%); // 원본 filter: brightnes(150%); // 밝게 % 단위를 써도 되고 opacity처럼 숫자 1을 기준으로 써도 됩니다. 2022. 12. 15.
CSS - <hr> 꾸미기 border See the Pen hr style by nilgi (@nilgi) on CodePen. • hr은 css에서 border 이용해서 꾸미면 된다. • border-bottom은 자세히 보면 이중선으로 나온다. border만 쓰거나 border-top을 쓰자. • border-radius로 모서리를 둥글게 만들면 된다. 2022. 12. 15.

티스토리툴바