카테고리: Development

[HTML5&CSS] Dark theme 만들기

다솜돌이 Leave a comment

다크 테마를 만들기 위해 색상을 다뤄보자.

테마 내의 새로운 HTML element를 몇 개 알고 넘어가자.

  • pre (preformatted): HTML 파일 내에 whitespace를 포함하여 적힌 그대로 보여준다. 일반적으로 monospace font, 즉 고정폭 폰트로 보여준다.
  • abbr (abbreviation): acronym이나 abbreviation을 나타낸다. acronym element는 deprecated되었다. 그렇지만, 하위 호환성을 위해 포함된다.

새로운 CSS background properties도 몇 개 알고 넘어가자.

  • background-image: element의 배경 이미지. url()에 이미지 URL을 넣는다.
  • background-repeat: 배경 이미지를 어떻게 반복할지. 다음 값들을 사용할 수 있다.
    • repeat: 모든 공간을 덮을만큼 반복한다. 잘릴 수 있다.
    • space: 잘림 없이 가능한만큼 반복한다. 비율이 유지되고, 첫번째와 마지막 이미지 사이의 가장자리를 잡기 위한 여백이 공간을 채우기 위해서 바뀐다.
    • round: 이미지가 늘어나거나 줄어들어서 공간을 채운다.
    • no-repeat: 이미지가 반복되지 않는다.

색상 반전시키기

반대 색상을 찾기 위해서 https://www.colortools.net을 이용하자. Opposite Color Tool을 이용하면 반대 색상을 쉽게 얻을 수 있다. 반전시킨 색상을 각 element에 적용한다.

 

HSL function 사용하기

HSL function은 세가지 값으로 색을 만든다. Hue, Saturation, Lightness.

  • H는 색상(Hue)를 나타낸다. 색상환(color wheel)에서 각도를 나타낸다. degree로 나타내던가 또는 radian으로 지정한다. 단위 없이 쓰면 degree이고, 0이 pure red, 120이 pure green, 240이 pure blue이다.
  • S는 채도(Saturation)을 나타낸다. 100% saturation은 완전히 짙은 색, 0%는 완전히 흐린 색, 회색이다. 50%가 “normal” color이다.
  • L은 밝기(lightness)를 나타낸다. 100%는 하얀색, 0%는 검정색이 된다.

따라서 색상을 180 degree 돌리면 반대색이 된다. 회색을 반전시키고 싶을 때는 밝기를 뒤집으면 된다. 회색을 얻고 싶으면 채도를 0으로 바꾸면 된다. 여기서 grayscale을 바꾸고 싶으면 밝기를 바꾸면 된다.

 

CSS Invert Filter

filter: invert() 를 사용해서 뒤집을 수도 있다.

 

[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] Form styling하기

다솜돌이 Leave a comment

label을 styling하기 위해서 font와 text의 크기를 조절한다.

textboxes나 textareas는 일반적으로 그 크기를 바꾸고, border를 제거한다. 또 예시 입력값인 placeholder를 추가해서 어떤 값을 입력하면 되는지를 도와주도록 한다.

 

button을 styling하기 위해서 일반적으로 배경색과 크기를 바꾼다. button의 box 바깥이 흉하므로 좀 손본다.

 

Select boxes를 styling하기 위해서는 일반적으로 text box처럼 보이게 만들고, 오른쪽의 아래 화살표를 styling한다.

 

form validation을 위해서 HTML은 required attribute를 제공한다. 입력이 꼭 필요한 field는 required attribute를 사용한다. CSS에서 이를 select하기 위해서 :valid 와 :invalid pseudo selector를 사용할 수 있다.

[HTML5&CSS] Form Elements

다솜돌이 Leave a comment

다음 form을 구성하는 HTML elements에 대해서 알아보자.

  • form
  • input
  • label
  • textarea
  • fieldset
  • select
  • button

 

form element는 다른 input이나 button elements들을 담는 element이다. form에는 action과 method, 두가지 attributes를 넘겨야 한다. action attribute는 그 form의 data를 어디로 submit할지를 정한다. method attribute는 그 form의 data를 get으로 보낼지, post로 보낼지를 정한다. 일반적으로 get method는 query string으로 표현되므로 unsecured data를 다룰 때 사용되고, post는 secure data를 다룰 때, 또는 많은 양의 data를 다룰 때 사용된다. 다음과 같은 형식이다.

input element는 text input field, radio buttons, checkboxes를 만든다. type과 name attribute가 필요하다. type attribute는 입력의 type을 정한다. name attribute는 form을 submit할 때 구분할 unique name을 정한다. form data는 key-value pairs로 구성되는데, 이 때 키가 되는 것이 name이고, 해당하는 값이 value가 된다.

text type의 예제는 다음과 같다. maxlength attribute로 최대 길이를 정할 수 있다.

E-mail의 입력에는 email type을 사용할 수 있다.

password의 입력에는 password type을 사용할 수 있다.

checkboxes를 사용할 때는 checkbox type을 사용한다. name에 unique한 값을 주고, 각 checkbox의 value에도 unique한 값을 준다.

radio buttons를 사용할 때는 radio type을 사용한다. 모든 name에 같은 값을 주고, 각 button의 value에 unique한 값을 준다.

 

label element는 input elements들과 연관된 text를 줄 때 사용한다. 예를 들면 위에서 “이름 :” 같은 것들. 스크린리더를 사용하는 사람들에게 도움이 된다. label element는 input의 id attribute와 연관되는 for attribute를 가진다.

 

textarea element는 여러 줄의 text 입력을 위해 사용한다. rows와 cols attributes로 size를 지정할 수 있다.

 

fieldset element는 여러 form 내의 elements들을 그룹짓고 싶을 때 사용한다.

 

select element는 select boxes를 만든다. 매우 긴 list의 옵션 중 하나를 선택할 때 쓴다. select element 안에 option element의 list를 넣어서 만든다.

 

button element는 form을 submit할 때 사용한다. type attribute로 세가지 값을 사용할 수 있다. 첫번째로 아무 행동도 안하는 것, 두번째로 “reset”, 이걸 누르면 form 값들이 모두 리셋된다. 마지막으로 “submit”, 클릭하면 submit한다.

[Web] 웹 개발 시 유용한 사이트

다솜돌이 Leave a comment

웹 개발 시 유용한 사이트들을 정리한다.

 

[HTML5&CSS] Display property: block과 inline

다솜돌이 Leave a comment

display property 중 block과 inline에 대해 알아보자.

기본적으로 elements들은 block 아니면 inline 으로 setting된다. block은 horizontally 모든 공간을 점유한다. 반면, inline은 그 content만큼의 공간만 차지한다.
block-level element의 예는 div가 있고, inline element의 예로 span이 있다.

다음과 같이 해서 이 값을 바꿀 수도 있다.

 

[HTML5&CSS] Text based elements

다솜돌이 Leave a comment

다음 Text based elements를 살펴 보자.

  • Headings
  • Paragraphs
  • Inline text elements
  • Lists

HTML 안의 heading element들은 H1 에서 H6 까지 6단계까지 있다.

문단(paragraph를) 나타내는 태그는 p이다. 문단 단위로 p 태그를 사용해서 나눠준다.

Inline text elements는 여러가지가 있다.
강조(emphasized)를 원한다면 em을 사용한다. 예를 들면, 원하는게 있다면 <em>지금</em> 하라.
정말 중요하게 표시하고 싶다면, strong을 사용한다. 예를 들면, 이건 정말 <strong>중요</strong>한 거.
하이퍼링크를 사용하고 싶다면, a를 사용한다. 예를 들면, <a href=”https://blog.dasomoli.org”>다솜돌이의 블로그</a>
별 뜻 없이 어떤 내용을 다른 내용들과 나누고 싶을 때 사용하는 태그는 span이다. div와의 차이점은 inline으로 사용한다는 점이다. 일반적인 용도로 다른 text들과 다르게 특정 text의 색을 바꾸는데 많이 사용한다. 예를 들면 다음과 같다.

list는 세가지 타입이 있다. unordered list (ul), ordered list (ol), definition list (dl).

unordered list와 ordered list는 list item (li) 으로 항목을 나타낸다.

CSS를 사용해서 list-style 속성으로 square, circle, upper-alpha, upper-roman 등으로 list의 스타일을 정해줄 수 있다.

definition list (dl)은 자주 쓰이진 않는다. 어떤 용어의 정의와 설명을 서술할 때 사용한다. 용어(term)에는 dt를 사용하고, 설명(description)에는 dd를 사용한다. 예를 들면 다음과 같다.

CSS reset 하기

각기 다른 브라우저들이 서로 다르게 렌더링하기 때문에 이를 위해서 CSS를 reset한다.

Eric Mayer가 만든 좀 더 복잡한 CSS reset 코드가 있다. http://meyerweb.com/eric/tools/css/reset/ 에서 찾을 수 있다.

 

CSS text properties들을 알아보자.

두 그룹으로 나눌 수 있다. Text를 다루는 것과 Font를 다루는 그룹. 먼저 text를 보자.

color 속성은 text의 색상(color)를 바꾼다. hexadecimal 아니면 RGB로 표현하던가, 이름을 줄 수 있다. 예를 들면 다음과 같다.

text-align 속성은 left-aligned, centered 혹은 right-aligned 로 text의 정렬 방법을 정한다.

밑줄을 준다든지 하고 싶을 때는 text-decoration 속성을 준다.

취소선을 줄 때는 text-decoration에 line-through를 주면 된다.

대소문자 변환을 위해서는 text-transform 속성을 이용한다. 다음은 모두 대문자가 된다. lowercase를 쓰면 모두 소문자, capitalize를 쓰면 각 단어별 첫 글자만 대문자가 된다.

줄간격을 위해서는 line-height 속성을 이용한다. 각 줄 사이의 vertical spacing을 조절한다.

 

이제 font를 다루는 그룹의 속성들을 보자.

font-family 속성은 어떤 폰트를 쓸지를 결정한다. 첫번째 것을 시도하고 없으면 두번째, 그것도 없으면 세번째 이렇게 나아간다.

font-size 속성은 font 크기를 조절한다. px나 상대적 단위인 em을 사용할 수 있다. em을 사용하면 사용자가 정한 default font size에 따라 그 비율로 조절된다.

font-weight은 font 굵기를 조절한다. 일반적으로 굵은 (bold)를 사용할 때 사용한다. 기본값은 당연히 normal이다.

 

[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

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