지속가능티끌/웹,워드프레스 ( 122 ) CSS Property(속성) 전체 리스트. Property 전체 리스트 W3C 에서 제공하는 Property 정리 테이블 -> http://www.w3.org/TR/css-2010/#properties 복사해옴. Name 에 있는 것이 속성이며 클릭하면 상세정보를 볼 수 있다. Name Values Initial value Applies to Media background-attachment scroll | fixed | inherit scroll visual background-color | inherit transparent visual background-image | none | inherit none visual background-position [ [ | | left | center | right ] [ | | top | center.. 2014. 10. 29. CSS Selector(선택자) 전체 리스트. W3C 제공 CSS3 Selector 상세설명 -> http://www.w3.org/TR/css-2010/#selectors 에서 제공하는 Selector 전체 리스트 복사해옴. 아래 링크를 클릭하면 해당 Selector 의 상세설명 볼 수 있음. The following table summarizes the Selector syntax: Pattern Meaning Described in section First defined in level * any element Universal selector 2 E an element of type E Type selector 1 E[foo] an E element with a "foo" attribute Attribute selectors 2 E[foo="b.. 2014. 10. 29. css (cascading style sheets) 요점 정리 및 활용시 필요한 상세정보 있는 곳. 개요 본 글은 웹에 표현되는 html에서 css 를 활용하기 위한 CSS 개념정리 글. css 구문의 세세한 속성 설정법 등은 본 글에서 설명되지 않는다. 본글에서 CSS의 명확한 개념정리가 되면, 그 다음 할일은 css 구문의 속성별 상세한 성질, 구문에서 selector 설정법을 알아야 함을 알게되며 이들 정보를 어디서 구할 수 있는지 정리한다. 1. CSS (Cascading Style Sheet) 가 무엇? CSS : Cascading Style Sheet 의 약어. CSS 기능 : 웹페이지에 정보를 표현하는 규격인 html 과 연동되어 웹에서 html(xhtml, xml 포함 일반적으로는 마크업언어) 이 웹브라우저에서 "표현"되는 방식(웹페이지 레이아웃 및 글자의 폰트, 색상 등)을 지정한다. .. 2014. 10. 29. 워드프레스 테마 만들기 7편. archive.php, 404.php, search.php 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 7편이며, 6편에 연결된 내용. 6편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가하기. 보기 -> http://igotit.tistory.com/135 개요. 6편 에서 만들어진 테마에 아래 3개의 템플릿파일 들을 추가한다. 1. archive.php 2. 404.php 3. search.php 설명. 지난 5편에서 sidebar.php 를 새로 만들어 테마에 추가하였고, 이를 웹사이트에서 보면 아래 그림의 붉은 박스에 표현되고 있다. 위 사이드바에서 category 의 미분류를 클릭해보면 미분류에 속한 글의 리스트가 보여야 하는데 아직 우리 테마에서는 category.php 나 archive.. 2014. 10. 28. 워드프레스 테마에 공백 생기는 오류 해결 - php 파일 인코딩을 UTF-8 BOM없는것으로 해야함. 개요. 본 글은 워드프레스에서 발생하는 흔한 오류중의 하나인 테마의 상단에 공백 생기는 오류를 해결한다. 1. 워드프레스 테마에 공백 오류 증상과 원인을 설명하고, 2. 1의 문제를 해결하기 위하여 php 파일을 BOM 이 부착되지 않은 UTF-8 로 만드는 것으로 해결한다. 3. BOM 없는 UTF-8 인코딩으로 PHP파일을 만들 때 사용하는 프로그램은 Notepad++ 를 이용하는 것으로 한다. 1. 워드프레스 테마 공백 오류 증상 및 원인. 1. 테마의 공백 오류 증상. 워드프레스에 플러그인을 설치하든지 혹은 직접 테마를 만드는 과정에서 간혹 아래 그림과 같이 테마의 상단 (붉은박스부분)에 공백이 끼어드는 경우가 있다. 이와 같은 테마에서의 공백오류는 워드프레스 관리자 페이지에서도 나타난다. 2. .. 2014. 10. 24. 워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가. 본 글은 "워드프레스 테마 만들기" 시리즈 글 6편이며, 5편에 연결된 내용. 5편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 5편. header.php다듬기, 메뉴추가, functions.php, page.php 추가. 보기 -> http://igotit.tistory.com/129 개요. 본 글에서는, 아래 2가지 사항을 상세히 정리한다. 1. 제작중인 테마의 functions.php 에 코드추가하여 "사이드바와 위젯"를 사용가능하게 한다. 이 처리작업으로 워드프레스에서의 메뉴 외모 하위에 "위젯"이 추가된다.(위젯과 사이드바는 같이 관리된다. 즉, functions.php 에서는 sidebar 를 등록하는 함수로 사이드바를 사용가능하게 설정하게 되며 위젯사용하는것을 별도로 처리하지 않아도 워드.. 2014. 10. 23. 워드프레스 사이드바,위젯 개요. 활용예, 개발 정보. 개요 본 글은 워드프레스로 만들어진 사이트에서 흔히 보게되는 사이드바 개요 글이다. 사이드바가 웹페이지에 배치되는 예, 위젯과 사이드바, 위젯과 사이드바를 활용하는예(링크로 소개됨), 마지막으로 사이드바를 구현 해야 하는 개발자에게 필요한 정보(링크로 소개됨) 를 정리한다. 사이드바. 웹사이트에 정보를 표현할 때 사이드바에 표현하기 적합한 정보는 메인에 보이는 컨텐츠와는 다른 류들이 많이 배치된다. 포스트 리스트라든지 광고배너를 넣기도 하고, 네비게이션 용도로 많이 사용한다. 그러나 그 기능이 한정된 것은 아니다. 위젯은 모두 사이드바에 넣어서 표현될 수 있다. 사이드바는 모든 웹페이지에서 항상 보일수도있다. 선택적으로 보일 수도 있다. 회사소개에는 안보이고 제품페이지에서만 보인다든지. 1. 사이드바 의.. 2014. 10. 23. 워드프레스 테마 만들기 5편. header.php 다듬기, 메뉴 추가, functions.php, page.php 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 5편이며, 4편에 연결된 내용임. 워드프레스 테마 만들기 4편. 테마에 single.php 추가하여 포스트 1개 보기 구현하기. 보기 -> http://igotit.tistory.com/126 개요. 본 글에서는, 1. 테마의 header.php 에서의 요구사항을 검토하고, 2. 1의 요구사항대로 header.php 를 코드정리한다.3. functions.php를 테마에 추가하고, 우리의 테마에서 메뉴 편집 가능하게 하고, 4. header.php에서 메뉴를 표현하는 코드 추가하여 웹페이지에서도 메뉴가 보이게 하고, 5. 페이지를 볼 수 있는 page.php 를 테마에 추가한다. 테마만들기 4편(http://igotit.tistory.com.. 2014. 10. 22. 워드프레스 테마의 functions.php 기능 이해, 코딩 방법 개념잡기 개요 본 글은 워드프레스 테마의 구성파일 중 하나인 functons.php 의 기능 및 functions.php에 특정기능을 구현하는 코딩 흐름 간략히 정리한다. 1. 워드프레스 테마파일 중 functons.php 워드프레스의 테마의 구성파일들은 여러 개가 있고, 가장 간단하게 테마파일로써 워드프레스에서 인식되게 할려면 style.css와 index.php 만 있어도 된다. 이는 테마로써의 인식될 때 필요한 최소파일일 뿐 실제 테마로써의 기능을 충실히 수행하기 위해서는 포스트를 표현하는 single.php, 카테고리 표현하는 category.php, 페이지 표현하는 page.php 를 추가해야한다. 대부분이 정보를 웹에 표현하는 류들인데, functions.php는 웹에 표현하는 기능은 하지 않고, 플러.. 2014. 10. 22. 워드프레스 테마 만들기 4편. 포스트 표현용 템플릿 single.php 추가하기 본 글은 "워드프레스 테마 만들기" 시리즈 글 4편이며, 3편에 연결된 내용임. 3편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 3편. index.php에 Loop 구현하기. 보기 -> http://igotit.tistory.com/125 개요 본 글에서는 테마(이름 : Skeleton) 에 포스트 표현용 템플릿 single.php 를 추가하여 웹페이지에서 포스트 1개를 볼 수 있는 기능을 구현한다. 테마만들기 3편(http://igotit.tistory.com/125 ) 의 코드상태에서 추가되는 부분만 정리됨. 1.테마에서 포스트 표현용 템플릿 single.php 워드프레스는 항상 기본포스트와 기본 페이지를 작성할 수 있는 상태로 되어있다. 워드프레스 관리자 메뉴에 보이는 포스트와 페이지 가 그것.. 2014. 10. 22. 워드프레스 테마 만들기 3편. Loop 구현하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 3편이며, 2편에 연결된 내용임. 2편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 2편. index.php수정,템플릿추가. 보기 -> http://igotit.tistory.com/122 개요. 본 글에서는 테마(이름 : Skeleton) 의 index.php 파일에 Loop 코드 영역을 구현하고 작성한 포스트 리스트가 표현되도록 한다. 이전 2편 글 (http://igotit.tistory.com/122 ) 이후부터의 코드 수정사항이 적용되므로 2편을 숙지한 상태에서 본 글을 봐야 함. 본 글에서 다루는 내용은 Loop에 대한 기본 이해를 바탕으로 하므로, 아래 Loop 에 대한 기본 이해사항 숙지하고 있어야 함. 워드프레스 루프(Loop) 이해하기... 2014. 10. 22. 워드프레스 루프(Loop) 이해하기. - 웹페이지에 정보 표현 하는 코드부 개요 본 글은 워드프레스에서 가장 중요한(혹은 워드프레스의 특징적인) 처리방식인 Loop 에 대한 이해를 위한 목표로 하여 간략히 정리된다. 본 글의 내용은 아래 codex에서 제공하는 정보를 기반으로 한다. 1. The Loop in Action 보기 -> http://codex.wordpress.org/The_Loop_in_Action 2. The Loop 보기 -> http://codex.wordpress.org/The_Loop 1.워드프레스에서 Loop의 기능 1. 워드프레스의 Loop 은 템플릿 파일(index.php , single.php,... 같은 php파일들을 의미함)내에 구현되어 "웹페이지에 정보를 보이게 하는 처리"를 수행한다. 2.1의 글에서 "정보"란 워드프레스에서 작성된 post.. 2014. 10. 21. 워드프레스 테마 만들기 2편. index.php 수정하고 템플릿 추가하기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 2편이며, 1편에 연결된 내용임. 1편을 보고 이 글을 봐야함. 워드프레스 테마 만들기 1편. 시작점 style.css, index.php 보기 -> http://igotit.tistory.com/85 개요. 본 글은 이전 "워드프레스 테마만들기 시작점" 에서 만들어 뒀던 index.php 파일의 내용을 html 형식에 맞게 온전한 html 문서로 수정해서 html 형식으로 표현된것 맛보기를 하고, index.php 파일을 워드프레스 형식대로 변경하는 작업까지 정리 한다. 이 과정에서 추가의 템플릿 파일 2개 (header.php, footer.php) 가 테마에 추가된다. 1편 글에서는 워드프레스에서 테마로 인식되는 최소한의 파일인 style.css, in.. 2014. 10. 21. 워드프레스 웹페이지 구조와 구성요소인 템플릿 파일 이해하기. 개요. 본 글은 워드프레스에서 웹페이지 표현시의 구조와 이들 구조를 구성하는 모듈화된 워프의 템플릿 파일에 대한 정보들을 정리한다. 용어 : 웹페이지 는 워드프레스로 구축된 사이트를 웹브라우저에 볼 때의 한 화면을 지칭한다. ( 워드프레스 에서의 "포스트"와 "페이지" 라고 표현할때의 "페이지"를 의미하지 않는다. ) 본 규칙은 다른 테마를 활용할 때, 혹은 자신이 직접 테마를 만들 때 모두 필요한 기본 개념 이해사항이다. 본 글의 내용은 codex 에서 제공하는 아래 3가지 정보 를 기반으로 요점만 정리한다. 1. Stepping into Template -> http://codex.wordpress.org/Stepping_Into_Templates 2. Template Hierarchy -> http.. 2014. 10. 21. 워드프레스가 테마를 보이게 하는 내부 처리 과정 간략히 살펴보기. 개요 본 글에서는 워드프레스가 우리가 지정한 테마를 보이게 하는 내부 절차를 파악해 본다. 설명. 워드프레스에서는 우리가 만든 테마를 어떤 내부 과정을 거쳐 보이게 하는지 궁금하다. 테마의 예로 http://igotit.tistory.com/85) 에서 만들었던 가장 간단한 테마를 보자. 위 주소에서 만들었던 테마는 style.css, index.php 파일 2개로 만든 초간단 테마였고, 테마의 index.php 에는 아래 처럼 달랑 text만 기록했었고(php코드도 아니고, html도 아님.), 테마 만들기 시험중. 테마명 igotit Skeleton 이것이 웹에서 보일 때는 아래처럼 보였었다. 위 사이트를 보면서 -> 사이트의 루트로 접속했는데 왜 테마폴더의 index.php가 보이지? 이런 의문이 .. 2014. 10. 20. WooCommerce Multilingual 플러그인 설치하기. 다국어 플러그인 WPML 환경에서 우커머스 사용시 개요 본 글에서는 WooCommerce Multilingual 플러그인 설치와 이와 연동된 WPML 의 추가 플러그인 설치과정을 정리한다. 설명. 워드프레스에서 다국어 구축용 플러그인 WPML 설치하였고, 동시에 WooCommerce 를 설치하여 숍을 구축하려고 하는 경우 WooCommerce에서도 다국어 지원 설정을 세밀하게 하기 위한 WooCommerce Multilingual 이라는 플러그인을 추가 설치한다. 섬세하다는 말은 사용법이 복잡하다는 말과 같다. 이것을 설치하지 않아도 우커머스에서 다국어 설정은 가능함. 이 플러그인은 설명서를 꼼꼼히 보면서 설정 진행해야 가능. 직관적이질 못함. WooCommerce Multilingual 사용자 설명서 -> http://wpml.org/documenta.. 2014. 10. 19. 워드프레스 우커머스 설치, 둘러보기. 개요. 본 글은 워드프레서 우커머스를 설치와 , 기본 설정 사항 정리한다. 우커머스(WooCommerce) : 워드프레스에서 쇼핑몰 구축가능한 플러그인. 1. 설치 & 기본설정. WooCommerce 1.우커머스 설치. 워드프레스 좌측메뉴 -> 플러그인 -> 플러그인 추가하기 클릭 우화면에서 -> 검색에서 woocommerce 엔터 여러 개 보인다. 아래 첫번째 것이 설치해야할 것임. "지금 설치하기" 버튼 클릭하여 설치하고 활성화 하기. 우커머스를 설치하고 나면 좌측메뉴에 WooCommerce, Products 가 추가된다. (아래 그림) 2. 한글 설치하기. 우커머스는 한글언어가 지원된다. 위 그림에서 파란박스속의 버튼 클릭하면 한글언어팩이 설치된다. 3. 우커머스 페이지 설치하기. 상품판매와 관련된.. 2014. 10. 19. 워드프레스 bbPress 설치, 기본사용법. 개요. 본 글에서는 워드프레스에서 포럼(게시판) 구축용 bbPress 플러그인 설치와 기본 사용법을 정리한다. 1. 설치 bbPress 설치하고 활성화하기. 워드프레스 좌메뉴 -> 플러그인 추가하기 -> bbPress 검색하여 아래 보이는 플러그인. "지금 설치하기" 버튼 클릭하여 설치하고 활성화 시킨다. bbPresss 관련 추가된 것 둘러보기. 좌측메뉴에 Forums, Topics, Replies 가 추가되었고, 도구에도 Forums 가 추가되었다. Forums 는 자유게시판, Q&A 게시판 에 해당한다. Topics는 게시판에 기록되는 1개의 게시글에 해당한다. Replies 는 게시글에 달린 덧글에 해당한다. 도구에 있는 Forums 에서는 Repair Forum, Import Forumsm Re.. 2014. 10. 19. 이전 1 2 3 4 5 6 7 다음
