Enable!

자유잡담 (125)

  1. 2021.01.08 개인홈 히스토리

  2. 2018.02.16 근황

    ​이달소 컨셉으로 티스토리 스킨 작업하고 있습니다

  3. 2017.05.02 20170502 블로그 리뉴얼

    기존 리뉴얼에서 색만 greenery 투톤으로 바꿨다. 이제 작년의 색은 그만

  4. 2017.02.24 [XE 1.x 강좌] 3.6. 반응형 레이아웃

    반응형 레이아웃이란? 반응형 레이아웃은 화면의 넓이에 따라 컨텐츠의 배치를 유연하게 바꾸어 각 기기에 최적화된 화면을 보여주는 것이다. em과 %로 코딩해서 실시간으로 비율을 다르게 조정할 수도 있고, 특정 해상도에서 보일 모습을 지정할 수도 있다. 반응형 레이아웃은 일반 모바일 최적화 레이아웃보다는 용량이 더 많이 들긴 하지만 별도의 모바일 페이지를 만드는 수고를 줄일 수 있다는 점에서 좋다. 메타태그 추가 반응형 레이아웃을 코딩하기 전에 html에서 뷰포트를 인식할 수 있도록 메타태그를 추가해주자. 해당 레이아웃의 설정에서 헤더 스크립트에 다음을 붙여넣으면 된다. 반응형 코딩 이제 css 파일을 열고 코딩을 시작하자. 기본형태는 다음과 같다. @media screen and (넓이){해당 넓이에서 보..

  5. 2017.02.24 [XE 1.x 강좌] 3.5. 레이아웃 상단 코딩 3(검색창), 컨텐츠 영역, 하단 코딩

    검색창 이제 상단에 검색창을 만들어보자. 여기서는 로그인과 같은 줄에 검색창을 만들어보도록 하겠다. 우선 html 파일을 열고 다음과 같은 코드를 삽입한다. 짠하고 검색창이 나타났다. 역시 디자인을 수정할 필요가 있겠다. .layout_container .header .menu .search_area{font-family:'Calibri';font-size:10px;color:#777; margin-top:10px; /* 로그인폼과의 높이를 동일하게 맞추기 위해 여백을 로그인폼과 같게 조정 */}.layout_container .header .menu .search_area input[type="submit"]{font-size:10px;background:transparent;border:none;fo..

  6. 2017.02.24 [XE 1.x 강좌] 3.3. CSS 기본 설정, 컨테이너, 상단 코딩 1 (1)

    CSS 기본 설정 우선 css 파일을 열고 @charset "utf-8";을 쓴다. 다음 줄에 원하는 웹폰트의 @import문을 작성한다. 해당 웹폰트 설정에 구문이 나와있으니 복붙하면 된다. 그 다음에는 div, a, img 등 기본 태그에 적용될 스타일을 선언한다. 다음은 그 예시이다. 다른 건 안 해도 인코딩 선언과 링크, 이미지, input 정도는 해두는 게 좋다. @charset "utf-8"; /* 인코딩 선언 */@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 구글 나눔고딕 웹폰트 선언 */ body{font-family:'Nanum Gothic';} /* 레이아웃 전체 폰트 지정 */a, a:link, a:..

  7. 2017.02.01 [XE 1.x 강좌] 3.2. 레이아웃 기본 틀 만들기 (2)

    XE 레이아웃의 파일 구조 XE 레이아웃은 conf 폴더와 layout.html, thumbnail과 css와 js 파일로 이루어져 있다. conf 폴더에는 info.xml이 있는데, 이 파일은 레이아웃의 정보를 저장한다. layout.html은 레이아웃의 뼈대가 되는 파일이며, css는 레이아웃을 꾸며주는 역할, js는 레이아웃에 사용되는 자바스크립트 코드를 불러온다. thumbnail은 레이아웃 선택 과정에서 보여주는 미리보기 이미지이다. 사용자의 필요에 따라 사진 등 다양한 요소를 더 추가할 수 있다. info.xml 이 파일의 기본 구조는 다음과 같다. 테스트 레이아웃 디자인이 없는 테스트 레이아웃입니다. 새 스킨을 만들 때 이 레이아웃 사본을 사용하면 좋습니다. 1.0 2010-12-24 제작자..

  8. 2017.02.01 [XE 1.x 강좌] 3.1. 레이아웃 구상 (2)

    들어가며 여기서 레이아웃이란 사이트의 전반적인 구성과 배치를 말한다. ZB4에서 넘어온 사람 중에 레이아웃 개념을 이해하지 못하는 경우가 있다. XE는 ZB4에서 넘어오면서 CMS 즉, 한 사이트 내의 컨텐츠를 통합 관리하는 툴이 되었고 이는 다시 말하자면 사이트 빌더의 기능도 겸하게 된 것이다. 간단히 말하자면 사이트를 어떻게 디자인(미적 디자인+설계)할 것인가...를 다루는 것이 레이아웃 파트라 하겠다. 사이트 컨셉 잡기 레이아웃을 구상하기 앞서 가장 먼저 생각해야 할 것은 사이트의 컨셉이다. 누가, 어떤 내용을, 어떻게, 누구에게 보여줄 것인지를 결정하는 것이 중요하다. 사이트의 컨셉이 명확하면 좀 더 편리하고 아름다운 레이아웃을 구성할 수 있지만, 그렇지 않다면 운영자는 불편하고 방문자도 이게 뭐..

  9. 2017.01.20 [XE 1.x 강좌] 2. 기본 개념, 템플릿 문법의 이해

    템플릿 문법이란? 템플릿 문법이란 XE에서 개발의 편의를 위해 고안한, XE에서만 쓰이는 일종의 언어이다. 템플릿 문법을 통해 레이아웃, 스킨 개발을 수월하게 할 수 있으며, XE 내부 변수에 쉽게 접근할 수 있다. 여기서는 자주 쓰이는 개념을 중심으로 설명하겠다. 1. 중괄호({}) 중괄호는 XE에서 php 코드나 변수를 사용할 때 바깥에 씌우는 문자이다. 어떠한 작업을 수행할 때는 { 뒤에 @을 붙여 {@ (코드) }의 형태로 나타내며, 변수를 출력할 때는 {$변수명}으로 작성한다. 변수 속의 변수는 {$변수명->변수명2}, 변수 속의 함수는 {$변수명->함수명()}로 출력한다. 2. 변수 변수는 어떤 값을 저장하고 있으며 상황에 따라 달라질 수 있다. 언어 출력을 위한 문자열이 들어가기도 하고, 컨..

  10. 2017.01.20 [XE 1.x 강좌] 1. 프롤로그, 준비, 관련 사이트 (1)

    들어가며 XE 디자인에 입문하면서 여러 자작 스킨들을 들고 온 적은 있지만 이렇게 강좌 글을 올리는 것은 처음이다. 떨리기도 하고, 실력이 부족한 내가 잘할 수 있을지 모르겠다. 그렇지만 지금껏 스킨을 제작하면서 느끼고 배웠던 것들을 서툴더라도 한번쯤 정리해보는 게 다른 이들과 나 자신에게 도움이 될 것 같아 이 글을 써본다. 이 강좌는 XE 디자인의 난이도가 실질적으로는 그렇게 어렵지 않음에도 불구하고 초보자 눈높이에 맞는 강좌의 부재로 인해 XE에 입문할 생각을 하지 못하고 있는 사람들을 위해 기획되었다. 그러므로 여기서 소개되는 코딩과 디자인의 수준은 매우 초보적이고, 설명 또한 초보자에 적합하게(물론 실제로는 어렵게 느껴질 수도...) 진행될 것이다. 구성은 기초 파트, 레이아웃 파트, 게시판 스..