전체보기

select 꾸미기 checkbox 박스 꾸미기 radio 박스 꾸미기 1) select 꾸미기 네이버 다음 구글 아마존 .box2 { background-repeat: no-repeat; background-position: 210px 50%; background-image: url(images/select-bg.gif); } .box1, .box3 { width: 250px; height: 50px; margin: 30px; position: relative; } .box1 button { position: absolute; width: 30px; height: 30px; background-repeat: 50%; right: 20px; top: 50%; transform: translateY(-50..

재귀함수 고차함수 내장함수 1) 재귀함수 재귀함수는 함수 안에서 자기 자신을 호출하는 함수이다. let cnt = 1; const fn=()=>{ console.log(`${cnt}번 호출`); cnt++; if(cnt>5){ return; } fn(); } fn(); 1번 호출 2번 호출 3번 호출 4번 호출 5번 호출 fn함수를 정의한 뒤 맨 밑에서 호출을 하면 if문을 만족할 때까지 계속 실행하게 된다. 'use strict'; const fn = num =>{ console.log(`${num} 호출`); num--; if(num==0){ console.log(`${num} 호출 중단`) return } fn(num); } fn(10); 10 호출 9 호출 8 호출 7 호출 6 호출 5 호출 4 ..

form 1-1) form#1 form은 회원가입, 로그인 게시글 등록 등을 위해 사용한다. 회원가입 text password checkbox tel file color date month number submit input type에 입력받고자 하는 형식을 적절하게 찾아 사용하면 된다. 날짜를 사용하면 날짜 형식과 달력이 추가로 나오게 된다. pssword는 기본적으로 작성 내용이 ***처리되어 표시된다. 1-2) form#2 예제1 아이디 size : 입력 박스 크기 설정 maxlength : 최대 입력 글자 수 title : 접근성용 placeholder : 입력 박스에 나타나 있는 안내글 (위의 경우 아이디, 비밀번호 입력에 해당) required : 필수 사항 (입력하지 않으면 submit이 되..

tabel 1-1) table #1 예제 3-2 21일 차에서 하던 table을 마저 해보았다. tr, th, td는 공통적인 부분이 많아 html에서 추가만 해주면 바로 적용이 돼서 비교적 쉽게 완성하였다. table의 내용 중 td의 폰트 파란 부분은 em으로 묶어 css에서 따로 처리를 했다. 8개 일반학기 수업료100% .bbs .tb3 em{ color: blue; } 1-2) table#2 예제4 다음으론 kakao bank 페이지를 따라 해 보았다. header도 구현을 하기 위해 마크업을 하고 html과 css를 적용시켰고 접근성을 위한 본문바로가기도 맨 위에 추가하였다. 본문바로가기 은행소개 상품안내 고객센터 이벤트 서류제출하기 비교적 table내용들의 폰트, 크기, 정렬 등이 일원화되어..

table 1-1) table #1 접근성 웹에서 위와 같은 표를 작성할 때 table을 사용한다. 표의 타이틀 표의 세부 내용 작성 표의 타이틀 표의 세부 설명 table안에는 시각장애인들을 위한 접근성을 위해 caption을 넣어줘야 한다. '본문 바로가기'처럼 화면에는 표시되지 않는 내용이므로 hide class를 적용시켰다. * reset.css의 .hide에 caption을 추가해도 된다. 1-2) table #2 colspan, rowspan 1 2 5 6 9 10 11 12 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 18 19 20 colspan, rowspan은 표의 셀 병합을 할 때 사용한다. colspan은 값만큼 가로로 병합이 되고, rowspan은 세로로 병합..

border animation 1-1) border #1 border를 이용해 위와 같은 모양을 만들 수 있다. 단 두 면이상 맞닿아 있어야 하며 한 가지 색으로만 나타내고 싶다면 투명색인 transparent를 넣으면 된다. 1-2) border #2 이러한 점을 이용해 박스에 효과를 줄 수 있다. 공통적으로 들어가는 부분은. box::after에 묶어 놓았다. 1-3) border #3 before가 after보다 먼저 생성되어 after 밑에 깔리는 특성을 이용해 테두리 효과를 줄 수 있다. before를 크게 만들거나, absoulte 절대위치를 조절해서 테두리처럼 보이게 하면 된다. 2-1) animation #1 어제 잠깐 배운 animation을 활용해 div박스를 설정한 경로를 무한히 돌게..

transform animation 1) transform #1 .box { width: 400px; margin: 100px auto; } .box img { width: 400px; height: 250px; transition: all 1s ease-in-out; } transition : all 1s ease-in-out를 공통으로 맨 위에 잡아 두었다. .box img { width: 400px; height: 250px; transition: all 1s ease-in-out; } .box1:hover img { transform: scale(1.5); } scale을 이용해 img 크기를 1.5배로 키웠다. 루피 --------------------------------------------..

실존 사이트 롯데민속박물관의 첫 페이지를 따라 연습해 보았다. 본문바로가기 롯데월드 어드벤처 아이스링크 Login 이용안내 전시 교육프로그램 소통·소식 시대별 문화를 즐길 수 있는 전시 현재 진행 중인 전시를 알아보세요. 상설전시 특별전시 민속박물관의 즐겁고 다양한 프로그램 다양한 프로그램을 확인해보세요. 전통문화/역사교육 전통공예체험 문화행사 민속박물관 소식을 한눈에! 오늘의 민속박물관 소식을 만나보세요. 민속박물관 소식 [봄시즌] 백투더 스쿨 '개화학당' 2023.03.16 [롯데월드X제로월드] 두번째 방탈출 바람,우리는 그저 바람2022.11.09 [롯데월드X플레이더월드] 모바일 방탈출 화연 : 조선 최고2022.02.22 [할인] LG U+ 멥버십 우대 안내2022.03.16 더보기 이용문의 오시..

.inner { width: 1400px; margin: auto; position: relative; box-sizing: border-box; } /* min-width : 최소 max-width : 최대 */ /* min-width : 최소 1600보다 작으면 스크롤바 */ div {} div#wrap { width: 100%; min-width: 1600px; } header {} header#header { width: 100%; background: antiquewhite; } header#header div {} header#header div.inner { /* width: 1400px; */ /* margin: auto; */ height: 150px; /* position: relati..