Skip to content

Web

  • 홈
  • 웹(WEB)의 이해
    • 웹(WEB)의 이해
    • HTML 역사와 HTML5
    • HTML 태그(요소)
    • HTML5 태그(요소)
    • CSS 선언
    • CSS 선택자
    • CSS 속성
      • 스타일 초기화
      • CSS – 글자관련 속성
      • CSS – Background 관련속성
      • CSS – Box 관련속성
      • CSS – position 관련속성
    • CSS3
  • HTML&CSS 실전대비
    • HTML&CSS 실전대비
    • css 적용/작성 방법
    • css 선택자
    • css 선택자 우선순위
    • css 글자 관련 속성
    • css 속성 – display
    • css 속성 – border
    • css속성 -padding/margin
    • css속성 – 백그라운드
    • css 속성 – box-sizing
    • css속성 – float
    • css속성 – position
  • 부트스트랩/반응형 웹
    • 반응형 웹
      • 반응형 사이트 시작하기
    • 01.부트스트랩이란? (Bootstrap)
      • 02.부트스트랩 시작하기
      • 03.반응형 웹 (미디어쿼리)
      • 04.그리드 시스템(Grid System)
      • 05.네비게이션(Navbar)
      • 06.JS-모달(Modal)
      • 07.캐러셀(Carousel)
      • 08.스크롤스파이(Scrollspy)
      • Bootstrapk
        • 부트스트랩템플릿
        • 그리드
    • 워드프레스 시작하기
      • 01. 워드프레스란?
      • 02. 워드프레스 설치
      • 03.테마
      • 04. 관리자 화면
      • 05. 포스트(post)와 페이지(page)
      • [워드프레스] 페이지빌더 플러그인
      • [워드프레스] 스타일 적용하기
      • [워드프레스] 인스타그램 플러그인 설치
      • [워드프레스] 플러그인을 설치해서 게시판 제작
      • [워드프레스] 과제용 워드프레스 설치하기
      • [워드프레스]전면페이지 수정하기
      • [워드프레스]헤더, 푸터, 메뉴 설정하기
      • [워드프레스]워드프레스 설치 & 테마설치
  • cafe24
    • 01.인터넷 쇼핑몰 창업의 장점
    • 02. 인터넷 쇼핑몰 흐름 파악하기
    • 03. 도메인 구매하기
    • 04. 상점관리 14가지 핵심기능
      • SNS 로그인 설정
    • 05. 상품관리 14가지 핵심기능
    • 06. 심플 디자인
  • 모바일웹
    • [모바일웹] 로그인
    • [모바일웹]Header/Footer
    • 모바일웹 만들기
  • 동영상
    • [c9]cloud9 가입 및 프로젝트 시작하기
    • 닷홈 무료호스팅 신청하기.
    • FTP – Filezilla 설치
  • Notice
    • Notice
    • 게시글

[워드프레스]헤더, 푸터, 메뉴 설정하기

작업 사이트 : http://swweb.co.kr/

한화첨단소재 사이트 : http://www.hwam.co.kr/kr/index.do

로고 이미지 다운 받기 : http://swweb.co.kr/wp-content/uploads/2017/10/logo.gif

 

사이트 제작시 유용한 사이트 모음

[Layout]
Flex 예시 : 바로가기
Header구조 : 바로가기
Tab 구조 : 바로가기
Navigation 구조 : 네비1, 네비2
Swiper 구조 : 바로가기

[반응형]
Header 구조 : 샘플1, 샘플2
Section 구조 : 바로가기

[PROJECT]
[css 다운받기]
Project_01 - [미리보기] [파일다운]
Project_02 - [미리보기] [파일다운]
Project_03 - [미리보기] [파일다운]
Project_04 - [미리보기] [파일다운]
Project_05 - [미리보기] [파일다운]

[ mousewheel.js ]
GITHUB: https://github.com/jquery/jquery-mousewheel

CDN: https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js

COMPONENT
[ w3schools]
https://www.w3schools.com

[아이콘 사이트]
아이콘 (SNS) : https://www.iconfinder.com
기본 아이콘 모음 : https://material.io/icons

[ico 파일변환 사이트]
https://www.hipdf.com/kr/png-to-ico

[웹폰트]
구글 웹폰트(korean) : https://fonts.google.com/?subset=korean
눈누 : https://noonnu.cc/

[ plugin ]
- Swiper : http://idangero.us/swiper
- Slick: http://kenwheeler.github.io/slick/
- ProgressBar : https://kimmobrunfeldt.github.io/progressbar.js/
- chart : https://www.chartjs.org
- JqueryUi : https://jqueryui.com/
- DateTimePicker : https://designlink.work/en-US/bootstrap-material-datepicker/

[modal]
- jQueryModal : https://jquerymodal.com/

[CDN]
jquery : https://code.jquery.com
normalize(css정규화) : https://cdnjs.com/libraries/normalize
meyer-resetcss초기화) : https://cdnjs.com/libraries/meyer-reset

[ ui/ux 라이브러리 ]
네이버 카드형 UI : https://github.com/naver/egjs-infinitegrid
(네이버참고자료 )

[폼 유효성검사 ]
jqeury validation : http://www.formvalidator.net/index.html

[정규표현식] https://regexr.com/

[구글 Device Metrics] https://material.io/tools/devices/

[웹표준/접근성 체크]
-html 웹표준 체크
- css 체크
- 웹 접근성 자가진단 테스트
Powered by WordPress and Tortuga.