[태그:] Content

[WordPress] 워드프레스 기본 HTML & CSS 구조

다솜돌이 Leave a comment

일단 테마를 위해서는 assets/style.css를 참조한다.

body element에는 모든 post page를 styling하는 post-template-default class를 볼 수 있다. postid-xxxx 같은 class도 있는데 이를 써서 각 개별 post를 style할 수 있다.


header 에는 h1.site-name element와 nav.navbar 가 있다. ul로 메뉴 아이템들을 둔다. li 에 id들이 붙는 것을 볼 수 있는데, 개별 li를 styling할 수 있다.

page content의 primary와 secondary sections이 div#content에 담긴다.

div#primary는 primary content가 담기는 곳이다. 이는 실제 post를 담는 article element를 포함하는 main#main element로 싸여 있다. article element는 많은 class를 갖고 있는데, 이들로써 그 post를 다양한 방법으로 지정할 수 있도록 한다.

article 안에는 article의 header, h2, 그리고 div.entry-meta 안에 metadata를 담고 있는 header element가 있다. datetime 속성을 가지는 time element와 작성자를 보이는 vcard 등이 있다.

div.entry-content에 article이 담긴다. h3 이하 제목과 p elements, link들 같은게 담긴다.

secondary content section은 툴바 같은 aside를 담는다.

맨 아래 footer element는 copyright 같은걸 담는다.

 

[HTML5&CSS] Box model

다솜돌이 Leave a comment

각 HTML element들은 여러 layer로 구성되는데, 가장 바깥쪽에 margin, 그 안에 외곽선인 border, 그 안에 padding 그리고 그 안에 width와 height의 content가 위치한다. 반대로 안쪽부터 보자.

 

Content Box는 실제 content가 들어가는 부분이다. 가장 중요한 property는 width와 height이다. 실제 px값이나 %로 준다.

width: 300px;

height: 200px;

 

Padding은 border와 content box 사이에 공간을 준다. top, bottom, left, right 모두에 줄 수도, 좌우와 상하에만 줄 수도, 원하는 곳에 padding-top, padding-bottom, padding-left, padding-right로 줄 수도 있다.

모두에 padding 값을 줄 때는 값 하나만 쓴다.

padding: 25px;

상하와 좌우에 같은 값들을 줄 때는 값 두개를 쓴다. 아래는 상하에 25px를, 좌우에는 0px를 준다

padding: 25px 0px;

 

border는 padding의 끝에서 margin의 시작까지 자리한다. 기본값은 visible하지 않아서 명시적으로 정해주어야만 볼 수 있다. padding처럼 각 direction마다 줄 수도 있다. 모든 값은 width, style, color의 3가지 값을 갖는다. 예제들은 다음과 같다.

border: 1px solid red;

border-top: 1px solid blue;

border-right: 2px dotted red;

border-bottom: 5px dashed yellow;

border-left: 10px double pink;

 

margin은 border의 끝과 페이지 상의 다른 element의 외곽 사이에 공간을 준다. 역시 padding처럼 모든 방향에, 상하/좌우를 나눠서 줄 수도, 각 direction 별 top, right, bottom, left에 따로 줄 수도 있다.

 

4 방향을 속성에 한꺼번에 써서 줄 때는 clock-wise로 돈다. top->right,->bottom->left

개발자 도구에서 각 속성 값을 확인할 수 있다.

[HTML5&CSS] HTML5 기본 구조

다솜돌이 Leave a comment

처음 doc type을 정한다. HTML5부터는 매우 심플하다.

<!DOCTYPE HTML>

 

HTML 태그로 시작한다. lang attribute로 어느 언어인지를 명시한다.

<html lang=”en”></html>

 

html 태그 안에는 head와 body가 들어간다.

먼저 head 안에 들어갈 내용을 살펴보자.

head의 필수 태그는 title이다. title 태그 전에 meta 태그로 charset을 명시해준다.

meta 태그로 해당 페이지의 description을 적어주면 좋다.

meta 태그로 디바이스의 width와 초기 scale로 viewport도 적어준다.

<head>

<meta charset=”utf-8″>

<title>DasomOLI’s example1</title>

<meta name=”description” content=”The purpose of this page is for showing a example of HTML5 basic structure”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

</head>

 

body 태그 안엔 보일 내용을 내용의 목적에 맞는 태그를 사용해서 적는다.

대표적인 태그는 제목을 적을 때 사용하는 heading <h1>, <h2> 등의 태그와 리스트를 작성할 때 사용하는 unordered list <ul>, ordered list <ol>, 그리고 그 아래 항목을 적을 때 사용하는 list item <li>, 문단을 작성할 때 사용하는 paragraph <p> 태그 등이 있다.

<body>
<h1>DasomOLI’s example1</h1>
<p>Hello HTML5!</p>
</body>

모두 합치면 다음과 같을 것이다.

<!DOCTYPE HTML>
<html lang=”en”>
  <head>
    <metacharset=”utf-8″>
    <title>DasomOLI’s example1</title>
    <metaname=”description”content=”The purpose of this page is for showing a example of HTML5 basic structure”>
    <metaname=”viewport”content=”width=device-width, initial-scale=1″>
  </head>
  <body>
    <h1>DasomOLI’s example1</h1>
    <p>Hello HTML5!</p>
  </body>
</html>

완성된 html 은 w3c에서 제공하는 validator (https://validator.w3.org/)를 통해 유효성을 검사할 수 있다.

 

구글 안드로이드 문서의 Content License

다솜돌이 Leave a comment

구글 안드로이드 관련 문서들을 살펴보다가 괜찮은 문서가 있으면 공부 및 정리 겸 해서 번역하면서 보려고 생각하다가 그냥 번역하고 인터넷 상에 올리면 안될 것 같아서 문서들 아래에 적혀있는 다음과 같은 문구의 링크된 Content License 부분을 눌러서 보게 되었다.


Android 1.5 r3 – 21 Jul 2009 11:19



일단 Content에 대해서 두가지로 나누고 있는데, 먼저, “Documentation content” 라 하여 “Dev Guide” 와 “Reference” 탭에 있는 샘플 코드나 소스코드로 부터 생성된 내용이나 그 외 내용들로 하나를 구분하고, 기타 다른 사이트 상의 모든 내용들, 이렇게 해서 두가지로 구분한다.

Content License 에 따르면, 일단 “Documentaion content”는 Android Open Source Project의 일부로 사용 가능하고, 어떤 코드가 포함된 문서들은 Apache 2.0 라이센스를 따른다고 한다. 물론 그에 앞서 GPLv2나 그 외의 라이센스에 해당하는 소스코드를 포함하는 경우에는 해당 라이센스가 우선된다. Apache 2.0 License에 관해서는 KLDPWiki: 오픈소스 소프트웨어 라이센스 가이드와 Apache 2.0 라이센스 원문, 그리고 Apache 2.0 라이센스의 번역본(김윤수님의 Apache License Version 2.0 번역 완료) 글을 참조해보기 바란다.

그리고 나머지 사이트 상의 다른 모든 자료들은 Creative Commons Attribution 2.5[우리말] 라이센스를 따른다.