프로그래밍 삽질 중

※ 학습 이유 : 메인화면에 넣은 움직이는 사진(+자동으로 넘기는 것도 포함) 화면 필요 ※ 코드는 전적으로 코남님에게 있으며, 문제가 될 경우 내릴 예정 ※ https://www.youtube.com/watch?v=idjslG3qpjs&t=651s (출처) ※ 스프링을 공부하고 있어 화면 표시 부분은 jsp로 진행 ※ 총 진행 파일(html: ex.jsp / css: ex.css) [구현 화면] [html : ex.jsp] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 자동 슬라이드 Colored by C..

※ 학습 이유 : footer 부분이 웹 사이트마다 다 비슷하기에 공부의 필요성 느낌 ※ 코드는 전적으로 Awa Melvine 님에게 있으며, 문제가 될 경우 내릴 예정 (All html&css code belongs to Awa Melvine, and the post will be deleted if there is any problem.) ※ https://www.youtube.com/watch?v=jZ2XYDWKENs&t=467s (참고 사이트 참고로 footer 부분은 1,2회로 진행됨) ※ 스프링을 공부하고 있어 화면 표시 부분은 jsp로 진행 ※ 총 진행 파일(html & css : footer.jsp) [footer.jsp] 화면1 [footer.jsp] 화면2 [footer.jsp 코드] ..

※ 학습 이유 : 웹페이지 크기에 따라 늘어나고 웹 상단(header) 부분이 바뀌는 부분을 공부하고 싶었음 ※ 코드는 전적으로 드림코딩 by 엘리님에게 있으며, 문제가 될 경우 내릴 예정 ※ https://www.youtube.com/watch?v=X91jsJyZofw&t=1434s (참고 사이트) ※ 스프링을 공부하고 있어 화면 표시 부분은 jsp로 진행 ※ 총 진행 파일(html : test3.jsp / css : test3_css.css / javascript : test3_js.js) header 부분(전체 화면) header 부분(크기를 줄일 때 화면) [html : test3.jsp] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 Insert title here table { margin-left:auto; margin-right:auto; width:500; height:300; align:center; caption-side:bottom; } table, td, th { border-collapse : collapse; border: 1px solid black; } 구분 성인 학생 독서율 65.3% 94.9% 연평균 독서량 9.1권 29.8권 공공도서관 이용률 28.2% 64.9% 2015 국민 독..

※ 변화 속성 - 효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있게 함 ※ 변화속성 종류 - transition-property : 변화 효과를 적용할 속성들 나열 - transition-duration : 변화가 지속되는 시간 지정 - transition-timing-function : 변화의 시작과 끝 타이밍 지정 - liner : 처음부터 끝까지 같은 속도 = cubic-bezier(0, 0, 1, 1) - ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝남 = cubic-bezier(0.25, 0.1, 0.25, 1.0) - ease-in : 느리게 시작하여 점점 빨라지다가 일정한 속도에 다다르면 같은 속도 유지 = cubic-bezier(0.42, 0..

※ 표(테이블) 레이아웃 - 셀 안의 내용에 따라 셀 너비 조절 ※ 표 레이아웃 속성 1) table-layoyut: auto; - 내용 분량에 따라 셀 너비가 자동으로 조절(기본 값) 2) table-layout: fixed; - 내용 분량과 관계 없이 셀 너비를 고정 3) table-layout: initial; - 변경된 테이블 레이아웃을 기본값 상태(auto)로 설정 4) table-layout: inherit; - 부모 요소의 값을 상속 받아 셀 너비를 결정 ※ 불투명도 속성 - opacity : 숫자(0~1); ※ 가시성 속성(visibility) - 어떤 요소로 보이게 하거나 반대로 보이지 않게 할 때 사용 ※ 디스플레이 속성(display) - 가시성 속성과 반대로 요소가 차지하는 공간도 ..

※ CSS의 필요성 - 문서작성(HTML)과 디자인(CSS) 분리 - 디자인 분리 시 장점 1) 내용과 디자인 수정 용이 2) 다양한 기능으로 확장 가능 3) 통일된 문서 양식 제공 4) 전송 및 로딩 시간 단축 ※ CSS 문법 - 선택자 { 속성 : 속성값; } ex) div { width : 100px; } ※ CSS 사용 위치 1) 인라인 스타일 시트 : HTML 내 위치 (ex ····) 2) 내부 스타일 시트 : HTML 내 위에 생성 3) 외부 스타일 시트 : 별도 파일 생성(호출식으로) ※ CSS 기본 선택자 1) 전체 선택자 : * { 속성 선언; } - 모든 태그에 스타일 적용 2) 타입 선택자 : 태그 { 속성 선언; } - 지정한 태그에 스타일 적용 3) 클래스 선택자 : .클래스 이..

※ 상태 선택자 1) :checked : 체크 상태의 input 태그 선택 2) :focused : 포커스를 맞춘 input 태그 선택 3) :enabled : 사용 가능한 input 태그 선택 4) :disabled : 사용 불가능한 input 태그 선택 ※ 구조 선택자 1) :first-child : 형제 관계에서 첫 번째로 등장하는 태그 선택 2) :last-child : 형제 관계에서 마지막으로 등장하는 태그 선택 3) :nth-child(수열) : 형제 관계에서 앞에서 수열 번째 등장하는 태그 선택 4) :nth-last-child(수열) : 형제 관계에서 뒤에서 수열 번째 등장하는 태그 선택 * 2n+1 수열에 0부터 넣을 경우 → 1, 3, 5, 7, 9, 12... - 구조 선택자는 수열의..