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..

1) padding, border, margin 2) text-align, margin : auto 둘 다 부모에 작성 text-align : center; : 부모(block) 안에 요소들이 inline 일 때 (모든 자식들이 상속) margin : 0 auto; : 부모(block)안에 요소들이 block 일 때 (너비 필수) * inline : a, span, strong, em, b, i (너비를 자기 자신만큼 차지 -> 옆으로 나열) block : div, h, p, ul, li, il, dl, dd (너비를 부모 크기의 100%만큼 차지) inline-block : img, dt, button, input 3) line-height : 글자 간 행간 4) border-radius : 모서리 둥..

transition opacity 1) transition + opacity 사진 두 장을 img로 불러오고 absolute를 사용해 겹친 다음 첫 번째 사진에만 효과를 주었다. 1초 동안 ease-in-out 방식으로 opacity: 0 을 주어 사라지게 했다. 이번엔 사라지지 않고 translateX를 사용해 x축 방향으로 +600px만큼 이동하게 해 보았다. 부모에 overflow:hidden을 넣어 첫 번째 사진이 이동을 하면 자연스럽게 숨겨지도록 했다. 사진을 한 장만 불러오고 scale을 사용해 크기가 130%가 됨과 동시에 15deg만큼 회전하게 했다. 마찬가지로 회전하면서 부모의 크기를 넘는 부분은 hidden을 사용해 숨김처리 하였다.

this return 매개변수 화살표함수 콜백함수 1) this this는 자기 자신을 의미한다. 커피 주문 make 함수의 변숫값을 자기 자신의 value로 지정했으므로 각 value값에 따른 alert창이 뜨게 된다. 2) 매개변수 function make(x, y) { //매개변수 지역변수 {} 스코프 안에서 사용 console.log(`x: ${x}, y: ${y}`); let result1 = 0; //지역변수, {} 스코프 안에서만 사용 let result2 = 0; // if문 처리 // undefined가 아니면 result에 x값을 더해서 출력 if (x != undefined) { result1 = result1 + x console.log(`${result1}`); } // if문 처..