본문 바로가기

분류 전체보기

(42)
11-23 오이도선사유적공원 서브페이지 반응형 완성 + 웹 표준 :: html+css 마크업 서브페이지 상단 백그라운드 반응형 작업시 이미지가 위로 쏠리는 문제 발생 background-position : center center ; 로 변경 :: 반응형 작업시 양쪽 좌우 패딩을 주는데 한 쪽 패딩만 먹히고 오른쪽 패딩은 먹히지 않는 문제 :: infor_wrap 에 box-sizing : border-box ; 를 주어서 해결 :: ul에게 width 100%를 줘도 적용이 안되고 여백이 조금 남는 문제 :: ul에 오버플로우 히든, li들에게 inline-block을 지우고 left로 재정렬 li에 보더값이 아닌 2번째 li에게 보더값. width 33%에서 33.33%로 변경, :: 하단 컨텐츠 반응형 :: 웹 표준, 웹 접근성을 위한 테이블 caption 문구..
11-22 오이도선사유적공원 서브 페이지 + w3c 검사 :: 오이도선사유적공원 메인 페이지 ( 반응형 ) html 마크업 검사 :: 오이도선사유적공원 메인 페이지 ( 반응형 ) CSS 검사 오이도선사유적공원 ( 서브페이지 = 이용안내 ) 마크업 준비 :: 헤더와 푸터 기본 셋팅 소스 정렬 :: header 가 position : fixed 상태일 때 해당 div가 header에 가려 보이지 않는 문제 padding값을 넣어서 해결 :: background image가 이미 있는 경우엔 background-color가 먹히질 않는다. 그 안에 div 박스에 요소를 주어서 해결 :: 해야하는 작업 테이블 반응형 및 웹 표준 ( colgroup , 설명텍스트 ,기타 css 재조정 ) ul li 간격 맞추기, 호버 효과 추가, 깃 허브 주소 github.com/wo..
11-21 오이도선사유적공원 푸터 + 반응형 메인 완성 :: 반응형 재작업 ( 수정 ) 폰트 사이즈 조정 :: 간격 조정 :: height 값 조정 :: 푸터 반응형 :: :: 330px 해상도 :: 웹 표준 준수 대체 텍스트 :: W3C html 마크업 검증 ( 현재 오류로 인해 22일날 검사 후 수정 예정 ) :: 오이도선사유적공원 ( 반응형 ) 메인 웹 표준 완성 깃 허브 주소 github.com/wonpoem/oido/tree/main/oido10 wonpoem/oido Contribute to wonpoem/oido development by creating an account on GitHub. github.com 라이브 서버 ( 완성 ) rkqtlr15159.cafe24.com/oido2/ 시흥오이도박물관&선사유적공원 오이도는 2002년 4월, ..
11-21 오이도선사유적공원 교육 및 행사 css 효과 + 반응형 + 푸터 :: 마우스 호버 시 이미지 확대 효과 :: 마우스 호버 박스쉐도우 트렌지션 효과 :: 반응형 작업 :: 1200px :: 768px :: 480px :: 하단 footer 작업 깃 허브 주소 github.com/wonpoem/oido/tree/main/oido9 wonpoem/oido Contribute to wonpoem/oido development by creating an account on GitHub. github.com 라이브 서버 rkqtlr15159.cafe24.com/oido2/ 시흥오이도박물관&선사유적공원 오이도는 2002년 4월, 섬 전체가 국가사적 제441호(시흥 오이도 유적)로 지정되어 보존되고 있습니다. oidomuseum.siheung.go.kr
11-20 오이도선사유적공원 교육 및 행사 마크업 깃 허브 주소 github.com/wonpoem/oido/tree/main/oido8 wonpoem/oido Contribute to wonpoem/oido development by creating an account on GitHub. github.com 라이브 서버 rkqtlr15159.cafe24.com/oido2/ 시흥오이도박물관&선사유적공원 오이도는 2002년 4월, 섬 전체가 국가사적 제441호(시흥 오이도 유적)로 지정되어 보존되고 있습니다. oidomuseum.siheung.go.kr
11-20 오이도선사유적공원 탭 메뉴 반응형 헤더 고정 :: 스크롤 했을 시 헤더메뉴가 상단에 고정 :: relative 였던 header의 position을 fixed로 변경하면 구조가 깨지는 문제 기타 밑으로 스크롤 했을 시 헤더에 on 클래스가 2번 사라지는 문제 fixed로 바꾸고 나서 영역을 다시 잡아줌으로 해결 :: 클래스를 하나로 공유하는 것이 아니라 2개 따로 만들어줘서 스크립트마다 다르게 적용하는 방식으로 변경 z-index 값 조정 그림자 효과 추가 :: 반응형 재작업 :: 메뉴 바로가기 css 구조 변경 ( 반응형 ) li의 패딩값을 없애주고, height 값과 line-height 값으로 수직을 맞춰줌, 각 li width값 50%로 변경. li의 ul width 값 삭제 width 100%로 변경. height 값은 나중에 따로 수정...
11-19 오이도선사유적공원 공지사항 바로가기 탭 메뉴 html 탭 메뉴 마크업 :: Tab을 눌렀을 시 해당 순서대로 포커스가 가게끔 마크업을 하기 위해 ul li 안에 ul li를 넣는 형식으로 html 구성 + 대체 텍스트 border 두 줄을 한줄 효과로 보이게 :: margin-right : -1px , margin-bottom: -1px :: 웹 표준을 준수하는 방식으로 공지사항 탭 메뉴 마크업 시 ul li에게 스타일을 주면 그 안에 li들 까지 전부 적용이 되는 문제가 발생, 그 안에 ul에게 absolute 로 띄워주고 그 안의 마지막 li들에게는 겹친 스타일을 초기화 시켜주는 방식으로 스타일을 주면 겹치는 문제 해결 메뉴 바로가기 탭 마크업도 마찬가지로 웹 표준 및 접근성 향상을 위해 ul > li > ul > li 형식으로 html 구성...
11 - 18 오이도선사유적공원 메인 슬라이드 반응형 (3) :: 메인 슬라이드 z-index 값 ( 포지션 ) pagination 클릭이 안먹히는 오류 ++ 레이아웃 정리 :: header 안에 존재했던 슬라이드를 떼어버리고 새로운 섹션을 만들어서 따로 관리. 슬라이드에 고정 height 값을 주어서 다음 마크업을 했을 때 absolute 값으로 메인 메뉴 바로 밑으로 메인 슬라이드와 겹쳐 보이는 문제 수정 기존 플러그인 CSS의 z-index 값 삭제, 및 포지션 값 조정. 페이지네이션 ( 버튼 ) 클릭 가능, 웹 표준 준수, 크롬 , 파이어폭스 크로스 브라우징 완료 html { overflow-x: hidden; } = 반응형시 가로 스크롤이 생겼던 오류 수정 깃 허브 주소 github.com/wonpoem/oido/tree/main/oido5 wonpoem..
11 - 17 오이도 선사유적공원 메인 슬라이드 반응형 (2) :: 헤더, 메인슬라이드 반응형 마무리, 오류 수정, 태그 정리, W3C validator, 웹 표준 검사 및 수정 :: 헤더 로고 이미지 겹치는 문제, :: W3C 마크업 검증 , 웹 표준 검사 . ( html ) 메타 태그 선언에 대한 오류 + 스크립트에는 굳이 type선언할 필요가 없다는 내용 :: 수정 후 해결 완료 W3C vaildator CSS 검사 :: CSS 검사 완료 :: 마크업 웹 접근성 개선 :: 바로가기 스킵 메뉴 추가 ( Tab ) :: 웹 접근성 웹 표준을 위한 대체텍스트 추가 + ( 웹 접근성 향상을 위해 슬라이드 html 마크업 순서 수정, 슬라이드 = 헤더 메뉴 아래로 ) CSS도 같이 수정 :: 미디어 쿼리 깃 허브 주소 github.com/wonpoem/oido/tree..
11-17 오이도 선사유적 공원 메인 슬라이드 반응형 Swiper plugin 사용. 오류 :: 슬라이드를 배치했을 때 헤더 메뉴와 겹치지 않게 보이는 문제 스와이퍼 플러그인 내의 css 수정 :: position : absolute 로 변경, z-index 값 변경, height 값 추가, 상위 wrapper의 overflow hidden 삭제 :: Pagination 추가, 백그라운드 이미지에 span 태그 추가, 슬라이드 순서 변경, fade 효과 변경, :: position : relative 값과 absolute 정리 :: 메인 슬라이드의 span 수정 :: 슬라이드 밑의 main_cutter 수정 :: 태그 정리 :: 반응형 처리 ( 해상도에 따라 height 값 조정 ) :: 반응형으로 했을 시 해당 스폰태그가 position 위치가 잘못 잡히..