CSS ( 8 ) 워드프레스 테마 만들기 11편. CSS 이용하여 메뉴 만들기. 개요. 본 글에서는 CSS 를 이용하여 메뉴만드는 과정 간략 정리한다. 설명. 현재의 우리 테마의 메뉴 부분을 보면 아래 그림처럼 투박하게 생긴 것이 보인다. 테마에서 메뉴를 보이게 하는 처리는 템플릿파일 중에서 header.php (테마 만들기 5편에서 했었던것) 의 아래 부분의 워드프레스에서 제공하는 메뉴 표현 함수에 의하여 보이고 있는 중이다. header.php 중에서 메뉴를 표현하는 부분. 아래 파란색 부분의 코드에 의하여 위 그림의 메뉴처럼 보이고 있음. ... 워드프레스에서 제공되는 메뉴 표현함수는 그래픽 요소는 표현하지 않으며, 로 메뉴 항목들을 트리구조로 표현하는 기능만 있다. 동시에 메뉴블럭의 클래스 이름과 ul 블럭의 아이디를 할당시키고 있다. 즉, CSS에서 제어할 수 있는 타겟을 .. 2014. 10. 31. 워드프레스 테마 만들기 10편. CSS 이용하여 박스 그리드 표현하기. 개요. 본 글에서는 CSS를 이용하여 박스 그리드 만드는 방법을 보이고 포스트 목록에 적용하여 글들이 박스 그리드로 리스팅되게 한다. 설명. CSS는 html 의 특정 블럭을 웹페이지에서 표현할때 다양화 할 수 있다는 장점이 있다. 박스 그리드 표현에 대해 간단히 예를 통해서 구현방법을 익혀본다. 본 글에서는 포스트 리스트를 박스 그리드로 표현하는 것을 구현해본다. 즉, 웹페이지에서 보이는 아래 붉박의 포스트 리스트를 각각을 박스로 처리해서 그리드로 표현한다. 1. 각 포스트에 클래스 지정하기. 우리는 CSS에서 각 포스트를 선택해야 하므로 index.php 에서 포스트 표현하는 부분에 아래 처럼 기록한다. 모든 포스트는 동일한 클래스 이름 test_box 를 갖게된다. 테마만들기 시험중. 테마명 : i.. 2014. 10. 30. 워드프레스 테마 만들기 9편. CSS 이용하여 레이아웃 만들기. 본 글은 "워드프레스 테마 만들기" 시리즈 글 9편이며, 8편에 연결된 내용임. 워드프레스 테마 만들기 8편. searchform.php추가. 보기 -> http://igotit.tistory.com/163 개요. 본 글에서는 테마의 style.css 에 css 구문 추가하여 웹페이지에서 보이는 레이아웃을 만드는 과정을 설명한다. 본 글에서는 CSS개념같은 기초적인 사항은 별도의 설명없이 진행된다. 최소한 아래 CSS의 개념은 알고있는 상태에서 가능한 작업이다. CSS 요점정리 보기 -> http://igotit.tistory.com/146CSS 선택자 활용정보 요약 -> http://igotit.tistory.com/166CSS 파일 만들기 -> http://igotit.tistory.com/169 설.. 2014. 10. 30. CSS 파일 만들기. 개요. 본 글에서 CSS 파일만들기 및 주석과 구문 작성 기본 사항 정리한다. 설명. 확장자 css 인 파일을 별도로 준비해두고, html 내 에서는 이 파일을 링크 걸어 사용하는 방식을 주로 이용한다. 별도로 만들어져 있는 css파일이름이 style.css라고 하자. html 의 사이에 아래처럼 기록되면 된다. css 파일이 있는 곳은 웹서버와 동일서버/ 외부 서버 모두 가능하다. 아래 내용에서는 css 파일 만들기 관련으로 고려사항 설명한다. 1. CSS 파일 만들기 CSS 파일 만들기. 1. 텍스트 편집가능한 프로그램으로 확장자를 css 로 해서 임의의 파일명으로 만든다. 2. 문서인코딩은 UTF-8 ( BOM 없는) 로 저장한다. 사용할만한 툴 : Notepad++. 설치 보기 -> http://.. 2014. 10. 29. CSS 선택자 활용정보 요약. CSS 의 Selector (선택자) 활용 정보 요약. 선택자 대표 적인것. 타입 선택자 (Type Selector) 아이디 선택자 (ID Selector) 클래스 선택자 (Class Selector) 전체 선택자 (Univeral Selector) 위 선택자외 모든 선택자 보기 -> http://igotit.tistory.com/167 3종의 선택자 각각을 살펴본다. 타입 선택자 html 요소를 CCS 구문의 선택자로 기록한다. 예: html 에 가 있고, 이를 CSS에서 이 부분을 설정하고 싶다면, P{color : red;} 아이디 선택자 html에서 타이틀: 잘먹고 잘사는법 처럼 id="" 으로 지정된 것을 CSS 구문의 선택자로 기록한다. 아이디 선택자기록시 #을 앞에 부착한다. 즉, #id1{.. 2014. 10. 29. 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. 이전 1 다음
