[HTML5&CSS] Box model

각 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] CSS page layout – float, flex, grid

세가지 많이 쓰이는 layout 테크닉이 있다.

  1. float
  2. flex
  3. grid

 

float-based CSS layout은 이 셋 중 가장 오래되었지만 여전히 쓰인다.

float의 property는 왼쪽 아니면 오른쪽 어디에 둘 건지를 정한다.

float: left 혹은 float: right

float: none을 쓰기도 하는데 자주 안 쓴다. left나 right를 override하고 싶을 때 쓴다.

일반적으로 float되는 element의 width를 px나 %등을 사용해서 명시적으로 정해준다.

width: 100px 혹은 width: 50%

float이라는 이름에서 알 수 있듯이, non-floated element 위에 떠 있는 식으로 보이면서 layout이 깨지는 문제를 자주 겪는다. 많은 해결책이 있지만, 가장 간단한 해결책은 이를 감싸는 element에 다음 속성을 주는 것이다.

overflow: hidden

 

flex-based CSS layout은 float-based CSS layout을 좀 더 개선한 새로운 대안이다. flex에서는 float에서와 같은 floating element의 clearing 문제를 걱정할 필요가 없다. 사용을 위해서는 개별 item을 담는 flex container에 다음을 적용하면 된다.

display: flex;

기본값으로 한 줄에 모든 element를 두도록 되는데, 이를 바꾸기 위해서는 다음 속성을 적용한다.

flex-wrap: wrap;

flex item들의 width를 정하기 위해서는 다음과 같이 한다.

flex-basis: 25%;

 

grid-based CSS layout은 세가지 중 가장 최신 기술이다. grid container에 다음을 적용한다.

display: grid;

그리고 grid 내에 몇 개를 둘 건지, 크기는 어떻게 할지, 몇 개의 열을 둘 것 인가를 정한다. 아래처럼 하면 4개의 같은 크기를 가지는 열을 갖게 된다.

grid-template-columns: auto auto auto auto;

float나 flex에서는 item들의 width를 정해주어야 했지만, grid-based CSS layout에서는 그럴 필요가 없다.

 

[HTML5&CSS] HTML5 기본 구조

처음 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/)를 통해 유효성을 검사할 수 있다.

 

Logitech G1과 G403 wireless 마우스 크기 비교

딜레이 없는 괜찮은 무선 마우스가 하나 갖고 싶다고 생각하던 중에 Black Friday를 맞아 로지텍 G403과 G900을 싸게 팔길래 고민고민하던 중에 원래 쓰던 G1과 크기 비교를 하고 싶은데, 찾아봐도 없길래 내가 올린다. 결국 내가 산 건 G403.

G1에 비해 좀 크고, 묵직하다.  손이 작은 나도 G1을 잡으면 마우스 등이 손바닥 안쪽의 상단까지만 닿는데, G403은 조금 더 깊이 닿고, 마우스 등이 손바닥 안쪽의 상단 3/4이 닿는다. 모양이 달라서 쥐는 방법이 좀 달라진다.

G1과 G403의 크기 비교
G1과 G403의 크기 비교
G1과 G403의 크기 비교
G1과 G403의 크기 비교