그누보드4s [css point] - 총 3시간 57분 / 강의당평균 : 23분41초

그누보드4s [css point]

전체 : 3시간 57분 / 강의당평균 : 23분41초

01 기본 기능 및 CSS수정을 통한 내홈페이지 맞춤 제작

생성된 게시판 세팅 및 스킨, CSS파일 수정방법 등을 안내합니다.

20분

책갈피 : [00:00] 기본 레이아웃 확인 / [00:20] 환경설정 / [00:31] 게시판 관리 / [01:03] 제목 수정 / [01:42] 게시판 확인 / [02:04] 게시판 수정 / [02:22] 디자인/양식 / [02:39] 스킨 수정 / [04:11] 모바일 스킨 / [05:07] 스킨 확인 / [05:45] 스킨 수정 방법 / [06:23] 상단 파일 경로/하단 파일 경로 / [07:05] head.php/tail,php / [07:23] 소스 살펴보기 / [08:42] head 파일 수정 / [09:20] css 파일 수정 / [10:14] 레이아웃 구조 / [10:56] #hd / [11:48] height 값 변경 / [12:45] border-top/border-bottom / [13:57] 결과 확인 / [14:24] 레이아웃 전체 넓이 / [15:10] #hd h1 / [16:24] overflow:hidden / [16:35] 주석 처리 / [16:41] 결과 확인 / [17:23] 본문 바로가기 / [18:40] #hd_wrapper / [19:21] position:relative / [19:46] 결과 확인

02 상단에 적용된 CSS

상단 레이아웃, 로고 및 웹접근성, UI에 나오지않는 텍스트, 검색, 우상단메뉴 CSS분석

19분

책갈피 : [00:00] 상단 레이아웃 / [00:19] position:relative / [00:52] 장차법에 적용된 로고 / [02:16] #logo / [02:49] padding 값 변경 / [04:23] 사이트 내 전체 검색 / [04:37] #schall / [05:03] position / [06:25] #schall legend / [06:46] input / [07:23] #schall_stx / [10:12] 라인 색상 변경 / [10:37] border-right / [11:02] 검색창 높이 변경 / [11:15] 검색 버튼 라인 색상 변경 / [11:43] #schall_submit / [12:15] 우상단 메뉴 / [12:56] #mb_nb / [13:51] 결과 확인 / [14:10] #mb_nb li / [14:44] li 제거 후 결과 확인 / [15:18] #mb_nb a / [16:10] letter-spacing / [16:33] 색상 변경 후 결과 확인 / [17:09] #mb_nb a:focus/#mb_nb a:hover / [17:19] text-decoration:none / [18:11] #mb_nb img / [18:30] 이미지 간격 변경 후 결과 확인

03 중앙메뉴 및 접근성 버튼수정, 로그인스킨 기능

메뉴, 따로 준비한 중앙메뉴, 크게작게기본 버튼, 로그인스킨 CSS분석

23분

책갈피 : [00:00] 중앙 메뉴 / [01:01] 메뉴 생성 / [01:44] 메뉴생성된 완성 화면 / [02:08] 메뉴 링크거는 방법 / [02:29] 헤더 메뉴 / [02:46] 텍스트 크기 조절 메뉴 / [03:10] wrapper (중간 레이아웃) / [03:42] 화면 확인 / [04:01] margin 수치 변경/확인 / [04:36] 텍스트 크기 조절 메뉴 / [05:33] top 수치 변경/확인 / [06:09] left 수치 변경/확인 / [06:28] 메뉴간 간격 / [07:15] padding 수치 변경/확인 / [07:29] height 수치 변경/확인 / [07:50] border / [08:10] cursor pointer / [08:42] color / [08:46] HTML 도구모음 / [09:02] 글자 색상 변경 / [09:14] 테두리 색상 변경 / [09:19] 화면 확인 / [09:28] 배경 색상 변경 / [09:36] 화면 확인 / [09:55] 메뉴간격 조절(외부여백 0값) / [10:44] 텍스트 크기 조절 메뉴 기준선 / [11:02] 로그인 창 / [12:05] float:right 값 삭제/확인 / [12:20] 되돌리기/확인 / [12:29] 로그아웃 화면 확인 / [12:40] 테두리 색상 변경 / [13:02] 로그인 스킨 설정하는 방법 / [14:13] 회원아이디 코딩 변경 / [14:53] 외부여백 수치 변경/확인 / [15:40] 내부여백(좌우) 수치 변경/확인 / [16:20] 넓이,내부여백 수치 변경/확인 / [17:08] 테두리 색상 변경/확인 / [17:19] 배경 색상 변경/확인 / [17:39] 높이 수치 변경/확인 / [18:43] border color 변경 / [19:04] 배경 색상 변경 / [19:44] 비밀번호 코딩 확인/설명 / [20:50] 로그인 버튼 / [21:10] 넓이 수치 변경/확인 / [21:31] 배경 색상 변경/확인 / [21:42] border color 변경/확인 / [22:05] ol_svc 코딩 확인 / [22:37] top 수치 변경/확인 / [22:46] 정렬 수치 변경/확인

04 로그인창 메뉴 및 중간 레이아웃 및 새글

로그인 2차, 최근게시물 스킨 CSS분석

23분

책갈피 : [00:00] 로그인 창 / [01:13] 관리자 모드 top 수치 변경/확인 / [01:31] 넓이 수치 변경/확인 / [01:51] 가운데 정렬 / [01:56] 로그인 배경 색상 / [02:23] padding 수치 변경/확인 / [03:27] 배경 색상 변경/확인 / [03:39] 글자 색상 변경/확인 / [04:44] 쪽지,포인트,스크랩 / [04:54] 정보수정,로그아웃 margin 수치 변경/확인 / [06:04] li 목록 태그 / [06:25] top 수치 변경/확인 / [06:52] height 수치 변경/확인 / [07:06] 배경 색상 변경/확인 / [07:14] 가운데 정렬 / [07:43] CSS 상속관계 / [08:17] font normal 작성 이유 / [08:42] strong 작성 이유 / [09:17] 결과 글자 색상 변경/확인 / [09:37] a:focus/a:hover / [10:16] 베경 색상 변경 / [10:25] 글자 색상 변경 / [10:35] 화면 확인 / [10:41] 마우스오버시 글자 색상 변경 이유 / [11:23] 글자 색상 변경/확인 / [11:38] 정보수정/로그아웃 / [11:54] justify / [12:37] 넓이 수치 변경/확인 / [13:01] 높이 수치 변경/확인 / [13:06] 배경 색상 변경 / [13:14] 글자 색상 변경/확인 / [13:22] 수직 정렬 / [14:17] 마우스 오버시 글자 색상 변경/확인 / [14:42] 본문 / [15:03] z-index:4 / [15:34] float:left / [15:38] 내부 여백 / [16:12] 넓이 값 / [16:29] 높이 값 / [17:27] 넓이 수치 변경/확인 / [18:09] 테두리 색상 변경/확인 / [18:21] 배경 색상 / [18:27] container:atfer / [18:53] 게시물 내용 / [20:04] 넓이 수치 변경/확인 / [21:03] 높이 수치 변경/확인 / [21:21] solid,border 수치 변경/확인 / [21:53] 크기 재조정

05 새글 스킨수정 및 튜닝

기본적인 스킨만 사용과 각각의 홈페이지에 맞게 스킨에 적용된 CSS분석

21분

책갈피 : [00:00] 외부,내부 여백 / [00:20] 내부 여백 지정 / [00:53] 화면 확인 / [01:07] 수치 변경/확인 / [01:24] 더보기 여백 / [02:06] 글 목록 사이 여백 / [02:43] 화면 확인 / [03:05] 게시판1 title 수치 변경/확인 / [03:48] CSS 스타일 변경 / [04:12] 주의점 / [04:51] 링크 값 정의 / [05:17] 더보기 색상 변경/확인 / [05:38] 글자 색상 변경/확인 / [06:03] 글자 크기 변경/확인 / [06:16] 구분선 생성 / [06:52] 내부여백/확인 / [07:13] 외부여백/확인 / [07:47] 더보기 위치 정의 / [08:05] 더보기 top 수치 변경/확인 / [08:15] border-bottom 값 지정/확인 / [09:09] 아래 bottom 값 / [09:40] 하단 레이아웃 수정 / [10:17] 배경 색상 변경/확인 / [10:35] 인기검색어 수정 / [11:24] 배경 색상 변경/확인 / [12:08] div/h2 설명 / [13:12] padding 수치 변경/확인 / [13:30] 색상 변경/확인 / [13:43] ul/li 설명 / [14:50] a 설명 / [15:06] a:focus/a:hover 설명 / [15:34] 접속자집계 / [16:15] 배경 색상 변경/확인 / [16:43] h2 설명 / [17:02] h2 색상 변경/확인 / [17:36] dl/dt/dd 설명 / [17:47] dl margin 수치 변경/확인 / [18:48] 접속자집계 / [19:09] dt,dd padding 수치 변경/확인 / [19:58] visit a 설명 / [20:24] 마우스오버시 배경 색상 변경/확인

06 하단에 적용된 스킨 및 외부로그인 스킨

인기검색어, 접속자 집계, 외부로그인 등의 스킨분석 및 CSS분석

20분

책갈피 : [00:00] 하단 스킨 / [00:17] ft_catch 설명 / [00:47] ft_copy 설명 / [01:35] 글자 색상 변경/확인 / [02:03] b 태그 색상 변경/확인 / [02:31] 상단으로 디자인 변경/확인 / [03:25] 로그인 창 / [04:54] 글자 크기 변경/확인 / [05:16] 글꼴 변경/확인 / [06:30] Member 스킨 / [06:57] 로그인 margin 변경/확인 / [07:43] h1 설명 / [08:11] margin 변경/확인 / [08:19] 글자 크기 변경/확인 / [08:39] fieldset 설명 / [09:50] border-bottom 설명 / [10:14] border-bottom 삭제/확인 / [10:32] 글자 간격 변경/확인 / [11:03] 글자 색상 변경/확인 / [11:28] login_id / [11:59] top 수치 변경/확인 / [12:25] submit / [12:38] left 수치 변경/확인 / [13:03] height 수치 변경/확인 / [13:45] section / [14:15] frm_input margin 수치 변경/확인 / [14:35] section margin 수치 변경/확인 / [14:58] padding 수치 변경/확인 / [15:17] border 배경 색상 변경/확인 / [15:34] 글자 크기 / [16:11] 줄 간격 / [16:19] div / [16:44] 아이디 패스워드 찾기 버튼 / [17:48] 회원가입 버튼 / [18:23] 메인으로 돌아가기(서식단계 진행)

07 Member 관련 페이지를 튜닝

회원정보찾기, 회원가입 관련된 Member 스킨에 적용된 CSS분석

26분

책갈피 : [00:00] 아이디 패스워드 찾기 / [01:19] 회원정보 찾기 / [02:05] h1 설명 / [02:31] margin 수치 변경/확인 / [02:54] padding 수치 변경/확인 / [03:21] 회원정보 찾기 제목 위치 / [03:55] border-top soild / [04:02] 색상 변경/확인 / [04:54] line-height 수치 변경/확인 / [05:45] 내부에 작성된 내용(Member 스킨) / [06:56] auto 값 변경/확인 / [07:24] padding 값 변경/확인 / [08:18] width 값 변경/확인 / [08:34] p 태그 / [09:14] 내부에 작성된 내용 스타일 변경 / [10:33] E-mail 주소 / [11:40] 색상 변경 / [12:56] E-mail input / [14:29] width 값 변경 / [15:18] 스피커 이미지 / [16:31] 확인 창닫기 버튼 / [17:34] 회원가입 버튼 / [18:15] 회원가입약관 스타일 수정 / [20:46] 회원가입약관 아래 내용(p 태그) / [21:38] 회원가입약관 입력하는 곳 / [23:09] 글자 색상 변경/글자 간격 변경 / [23:49] 약관 내용 동의 체크박스 / [25:03] 동의 체크 아래 실선

08 각각의 스킨별로 쉽게 적용된 CSS를 찾아 수정하는 방법

최근게시물~접속자 관련, 게시판 일반 및 갤러리스킨 CSS분석

31분

책갈피 : [00:00] 회원가입 폼 / [00:29] 새글 / [00:56] 새글 스킨 수정 방법 / [01:32] 해당 파일 열기 / [02:24] margin 값 변경/확인 / [02:38] input 기본사항 적용 / [03:59] 검색 버튼 / [04:37] 아래부분 기본적인 사항 적용 / [05:22] width 값 변경/확인 / [05:39] 목록 테이블 코딩 / [05:57] 제목 코딩 / [06:18] 배경 색상 변경/확인 / [06:45] 글자 색상 변경/확인 / [07:00] th input / [07:21] td 셀에 대한 정의 / [08:53] 새글 완료 / [09:13] 접속자 / [09:28] 게시판 / [09:47] 해당 파일 열기 / [10:46] 글자 간격 삭제/확인 / [11:14] title/box model / [11:39] 글쓰기 버튼 / [12:57] 콤보상자, input, 검색 버튼 / [13:11] 글쓰기 폼 스타일 변경/확인 / [16:27] 본문내용 스타일 변경/확인 / [23:22] 댓글목록 / [24:33] 댓글쓰기 / [25:00] 관리자용 전용 버튼 / [26:59] 게시판 스킨 변경(베이직,갤러리) / [27:40] 해당 파일 열기(갤러리)/갤러리 스킨 스타일 변경 / [31:00] 이미지 갤러리

모바일 CSS 튜닝 방법

09 기기별 적용법 및 각종 스킨과 버튼 등의 CSS

기본적용 및 상단 레이아웃, 로고, 검색, 기본MENU, 로그인 스킨, 텍스트 크기조절 CSS분석

27분

책갈피 : [00:00] 모바일 / [00:53] 화면 확인 / [01:16] 해당 파일 열기 / [01:38] body / [03:45] 상단 레이아웃 / [04:26] 로고 / [04:36] 이미지 / [05:01] logo margin-left 수치 변경/확인 / [05:28] 검색바 / [07:15] 상단 메뉴바 / [09:36] mb_nb li / [10:13] 상단 메뉴바 크기,높이 / [11:41] 해당 파일 열기(outlogin) / [12:13] 로그인 후 내용 코딩 / [13:45] hd strong / [14:20] btn_admin / [15:24] 쪽지,포인트,스크랩 / [16:51] 정보수정,로그아웃 / [17:14] ft a / [18:27] 로그아웃 후 내용 코딩 / [18:40] 아이디,패스워드 / [19:57] 로그인 버튼 / [23:48] 자동로그인,회원가입,정보찾기 / [24:07] 중간 레이아웃 / [24:46] 텍스트 크기 조절(작게,기본,크게)

10 하단 스킨 및 게시판 관련 스킨 CSS

최근게시물, 하단 레이아웃 관련된 모든기능 CSS분석

27분

책갈피 : [00:00] 최근 게시물 / [00:12] 해당 파일 열기(최근게시물 스킨) / [00:45] position / [01:02] 수치 변경/확인 / [01:35] lt ul / [02:24] lt li / [02:48] lt a / [03:15] lt_title / [04:25] lt_more / [04:51] 하단 레이아웃 / [05:40] 배경 색상 변경/확인 / [06:03] CSS list / [06:25] after/h2 / [06:43] 인기검색어 / [06:50] 해당 파일 열기 / [07:51] 인기검색어 바 높이 / [08:28] 인기검색어 틀 수정 / [08:50] 글자 크기 변경 / [10:03] 방문자집계 / [10:10] 해당 파일 열기 / [10:30] 배경 색상 변경/확인 / [10:45] 글자 크기,색상 변경 / [11:35] 링크가 있을 시 주의점 / [12:09] 맨 아래 부분(소유하신 도메인) / [13:49] 게시판 스킨 / [15:20] 하단 스킨 작업시 주의점 / [15:57] 게시판 스킨 / [18:31] 해당 파일 열기(board skin) / [18:54] 게시판 목록 / [19:45] 게시판 목록 공통 / [20:59] 기본 테이블 / [23:48] 게시판 읽기 / [25:45] 게시판용 버튼

샘플확인 : 알지오 검색후 -> 강의검색란 -> 그누보드4s [css point]