그누보드4s [css point]
![그누보드4s [css point]](/img_file/builder/Date/201304164610Gnuboard4s.jpg)
<최신> 그누보드5, <강의> 그누보드4s
Open Beta 기간에는 실제 운영하는 용도로는 사용을 권해 드리지 않습니다. 정식 버전이 아직 나오지 않은 관계로 "그누보드4s"로 학습하고 웹사이트 운영하셔야 합니다. 그누보드4s에서 진행하는 레이아웃의 css코딩분석으로 자신의 홈페이지를 맞춤제작을 원하는 분들이 활용하면 좋습니다.
-
01.20분 기본 기능 및 CSS수정을 통한 내홈페이지 맞춤 제작
생성된 게시판 세팅 및 스킨, CSS파일 수정방법 등을 안내합니다.
책갈피 : [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.19분 상단에 적용된 CSS
상단 레이아웃, 로고 및 웹접근성, UI에 나오지않는 텍스트, 검색, 우상단메뉴 CSS분석
책갈피 : [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.23분 중앙메뉴 및 접근성 버튼수정, 로그인스킨 기능
메뉴, 따로 준비한 중앙메뉴, 크게작게기본 버튼, 로그인스킨 CSS분석
책갈피 : [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.23분 로그인창 메뉴 및 중간 레이아웃 및 새글
로그인 2차, 최근게시물 스킨 CSS분석
책갈피 : [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.21분 새글 스킨수정 및 튜닝
기본적인 스킨만 사용과 각각의 홈페이지에 맞게 스킨에 적용된 CSS분석
책갈피 : [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.20분 하단에 적용된 스킨 및 외부로그인 스킨
인기검색어, 접속자 집계, 외부로그인 등의 스킨분석 및 CSS분석
책갈피 : [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.26분 Member 관련 페이지를 튜닝
회원정보찾기, 회원가입 관련된 Member 스킨에 적용된 CSS분석
책갈피 : [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.31분 각각의 스킨별로 쉽게 적용된 CSS를 찾아 수정하는 방법
최근게시물~접속자 관련, 게시판 일반 및 갤러리스킨 CSS분석
책갈피 : [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.27분 기기별 적용법 및 각종 스킨과 버튼 등의 CSS
기본적용 및 상단 레이아웃, 로고, 검색, 기본MENU, 로그인 스킨, 텍스트 크기조절 CSS분석
책갈피 : [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.27분 하단 스킨 및 게시판 관련 스킨 CSS
최근게시물, 하단 레이아웃 관련된 모든기능 CSS분석
책갈피 : [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] 게시판용 버튼
테크노트12시간 3분
그누보드510시간 6분