가장 기본적인 구조이면서, 제일 간단한 메뉴 바 만들기 구성입니다. 1-1 일반 메뉴바 html구조입니다. 총 5개의 메뉴 바 리스트는 이 구조를 기본으로 합니다. 특별히 다른 구조는 없고, 오직 1-2배경을 제외하고는 다 같은 구조를 사용합니다. 1-1 일반 메뉴 바 css 구조입니다. 가장 중요한 것은 .logo클래스에는 float:left;를 부여하되, nav에는 margin-left : .logo클래스의 width값 ; 만큼 지정해야 합니다. nav에는 float:left를 사용하지 않는 이유는 이후 나올 .submenu들에 position 속성 값이 생기기 때문입니다. 기본적으로 position은 float:속성과 같은 구조로 책정되지 않습..
모달 레이어 팝업창 패턴입니다. 모달 레이어란, 팝업창 영역을 제외하고 다른 기능이 작동하지 않도록 막은 팝업 창 구조라는 뜻입니다. HTML - - - - 의 구조를 갖습니다. 즉, .mlp라는 한 개의 가 한 단계 더 추가된 구조입니다. css .mlp는 화면 전체에 포지션 속성을 지닌 투명한 검은색 배경을 뒤집어 씌워야 합니다. 그래서 반드시 position:fixed나 absolute를 사용하고, width:100%; height:100%; top:0; left:0; 으로 사이즈와 위치를 설정한 다음에 background:rgba(0,0,0,0.8) 로 투명도를 조절해서 사용해야 합니다. 이하 내용은 . popup과 동일합니다. 그래도 참조하기 쉽도록 아래에 작성해 두겠습니다. .popup은 가운..
일반 팝업 창 패턴입니다. HTML - - - 의 구조를 갖습니다. css .popup은 가운데 정렬 코드를 작성해야 합니다.화면 가운데 내에 정렬하려면 position:absolute;나, fixed를 사용하시면 됩니다. 그러나 개인적으로는 화면 자체에서 고정되 변화하지 않는 fixed 쪽이 더 안정된 결과가 나오지 않나 생각합니다. 포지션 absolute/fixed 속성값이 있는 상태에서 top:50%; left:50%; transform:translate(-50%,-50%)을 작성하면 가운데 정렬을 해 줄 수 있습니다. 트랜스폼 속성은 margin-top:-height값/2 , margin-left:-width값/2 으로 대체할 수 있습니다. (만약 width:600px; height;400px;이..
웹 디자인 기능사 공개문제 12패턴 게시 완료했습니다. 다만, 본 내용은 완전한 완성본이 아니며, 디자인 패턴을 연습하기 위해 이미지 부분이 속성값으로 대치되어있습니다. 본 파일을 받으시고, 반드시 img 디자인 부분과, a태그로 마무리를 지어야만 완성이라고 할 수 있습니다. 이 점 유의하시어 마무리를 해 주시길 부탁드립니다. 웹 디자인 기능사 (1)번 레이아웃 1단계 : 가로 html, css초기화, 가로 css 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 3단계 : 가로 html 작성 및 html 구조 완성.. wdnote.tistory.com 웹 디자인 기능사 (2)번 레이아웃 1단계 : 가로 html, css초기화, 가로 css 2단계 : 세로..
html 웹 표준 검사기 https://validator.kldp.org/ css 웹 표준 검사기 http://jigsaw.w3.org/css-validator/
+슬라이드(좌우) 1단계 : 가로 html, css초기화, 가로 css See the Pen c-4 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen c-4 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 :,
+슬라이드(좌우) 1단계 : 가로 html, css초기화, 가로 css See the Pen c-3 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen c-3 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen c-3 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen c-3 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
+슬라이드(fade) 1단계 : 가로 html, css초기화, 가로 css See the Pen c-2 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen c-2 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen c-2 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen c-2 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ..
+슬라이드(fade) 1단계 : 가로 html, css초기화, 가로 css See the Pen c-1 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen c-1 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen c-1 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen c-1 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ..
+슬라이드(좌우) 1단계 : 가로 html, css초기화, 가로 css See the Pen b-4 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen b-4 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen b-4 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen b-4 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
+슬라이드(상하) 1단계 : 가로 html, css초기화, 가로 css See the Pen b-3 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen b-3 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen b-3 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen b-3 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
+슬라이드(상하) 1단계 : 가로 html, css초기화, 가로 css See the Pen b-2 1단계 by ++EXP (@pp_exp) on CodePen. 2단계 : 세로 html, css 헤더, 이미지 슬라이드, 메인, 푸터 영역 사이즈 지정 및 배열 See the Pen b-2 2단계 by ++EXP (@pp_exp) on CodePen. 3단계 : 가로 html 작성 및 html 구조 완성 css 구조 완성 See the Pen b-2 3단계 by ++EXP (@pp_exp) on CodePen. 4단계 : jquery 작성 및 기능 테스트 See the Pen b-2 4단계 by ++EXP (@pp_exp) on CodePen. 5단계 : a태그 삽입 및 디자인 요소 삽입(h2, p, ta..
