워드프레스 자체 플러그인을 이용해서 코드를 삽입하곤 했는데 이게 아무래도 맘에 안든다.
특히 글을 다시 수정하거나 하면 꼭 깨지곤 하는데… -_-+
글 작성하면서 코드를 같이 작성하는 경우가 많아서 꺼리고 있었는데 그냥 gist.github.com으로 가자.
[글쓴이:] 다솜돌이
[HTML5&CSS] Display property: block과 inline
display property 중 block과 inline에 대해 알아보자.
기본적으로 elements들은 block 아니면 inline 으로 setting된다. block은 horizontally 모든 공간을 점유한다. 반면, inline은 그 content만큼의 공간만 차지한다.
block-level element의 예는 div가 있고, inline element의 예로 span이 있다.
다음과 같이 해서 이 값을 바꿀 수도 있다.
[HTML5&CSS] Text based elements
다음 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
각 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 테크닉이 있다.
- float
- flex
- 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 structural elements
HTML5에는 다음 page elements가 있다:
- header
- footer
- section
- article
- nav
- aside
- div
기존에 div 태그에 class 속성을 주어 썼던 것들을 태그로 분류했다. 구조는 다음과 같다.
[HTML5&CSS] CSS 개요
CSS는 HTML에 style을 더할 때 사용한다. 다음과 같은 형식이다.
selector or selector list {
CSS declarations (= property: value;)
}
예를 들면 다음과 같다.
p, h1, h2 {
background: black;
color: white;
}
이를 HTML에 적용하는 방법은 여러가지가 있다.
- HTML tag의 style attribute를 이용하는 방법. 예를 들면, <h1 style=”color: red;”>…</h1>
-
<head>나 <body> 태그 내에 <style> 태그를 추가하는 방법. head안에 넣는 게 더 빠르다.
-
<link>를 통해 외부 리소스로부터 적용하는 방법. 예를 들면, <link href=”styles/mystyle.css” rel=”stylesheet”>. 가장 추천.
CSSOM (CSS Object Model)은 HTML DOM과 비슷하게 style에 대한 in-memory representation이다.
javascript로 HTML DOM을 접근할 때 다음과 같은 코드를 사용해서 DOM element의 style property를 access할 수 있다.
const contentElement = document.querySelector(‘.content’);
contentElement.style.fontWeight = ‘bold’;
비슷하게 CSSOM은 window object의 getComputedStyle 메소드로 access할 수 있다.
const contentElement = document.querySeletor(‘.content’);
window.getComputedStyle(contentElement);
이건 contentElement class attribute로 그 element의 read-only computed style을 return한다.
CSS로 HTML 문서의 element를 지정하고자 할 때 selector를 사용한다.
3가지 일반적인 selector가 있다.
- Element type: 예를 들면, 모든 그 HTML 문서 내의 p element를 select하고자 한다면 CSS ruleset에 p selector를 쓴다.
-
class attribute: . 으로 시작하는 class selector. <h1 class=”heading”>Heading</h1> 을 select하고 싶다면, .heading selector를 쓴다.
-
id attribute: # 으로 시작하는 id selector. <div id=”dasomoli”> <!– login content –> </div> 라면, #dasomoli를 쓴다.
모든 element를 선택하고 싶으면 Universal Selector (*)를 쓴다. 다음과 같은 예제는 html에 값을 셋팅하고, 모든 자식 element들에 이를 inherit한다.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Attribute selector를 사용하면 attribute가 있는지 또는 attribute 값에 따라서 select할 수 있다. 대괄호([, ])를 쓴다.
- [attribute]: 그 attribute가 있는 모든 element를 select한다. [href]는 href attribute가 있는 모든 element를 select한다.
-
[attribute=value]: attribute값이 value인 모든 element를 select한다. [lang=”en”] 은 lang attribute가 en인 모든 element를 select한다.
-
[attribute^=value]: attribute 값이 value로 시작하는 모든 element를 select한다. [href^=”https://] 는 href attribute가 https:// 로 시작하는 모든 element를 select한다.
-
[attribute$=value]: attribute 값이 value로 끝나는 모든 element를 select한다. [href$=”.com”] 은 href attribute가 .com으로 끝나는 모든 element를 select한다.
-
[attribute=value]: attribute 값 안에 value가 들어간 모든 element를 select한다. [href=”co.kr”] 은 href attribute가 co.kr과 들어간 모든 element를 select한다.
Pseudo-class는 특정 상태에 있는 element를 select한다. :keyword 같은 형식으로 쓴다. 대단히 많은 pseudo-class가 있는데, 대부분의 개발자들은 link를 styling할 때 처음 본다. link는 여러 상태를 갖는다.
- href를 갖는 link는 :link pseudo-class를 갖는다.
-
사용자가 link에 마우스를 올렸을 때, :hover pseudo-class가 적용된다.
-
가 본 link일 때, :visited pseudo-class가 적용된다.
-
click될 때, :active pseudo-class가 적용된다.
예를 들면,
a:link, a:visited: {
color: blue;
text-decoration: none;
}
a:hover, a:active {
color: red;
text-decoration: dashed underline;
}
순서에 주의해야 하는데, 위의 순서를 바꾸면 hover 효과를 볼 수 없다. love-hate로 외우면 쉽다.
다른 유용한 pseudo-class로 :checked, :disabled, :focus가 있다.
중첩된 자식들의 패턴을 select할 때 도움이 되는 pseudo-class가 있다. :first-child, :last-child, :nth-child, :nth-last-child, :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type 등등.
예를 들어, 다음과 같이 하면 3줄마다 반복되는 패턴을 만들 수 있다.
li {
display: block;
padding: 16px;
}
li:nth-child(3n-1) {
background: deepskyblue;
color: white;
font-weight: bold;
}
li:nth-child(3n) {
background: skyblue;
color: white;
font-weight: bold;
}
위의 예제에서 3n-1 대신 odd 나 even 같은 keyword를 사용할 수도 있다.
element의 일부를 select하고 싶을 때는 Pseudo-element를 쓴다. ::keyword 형식으로 쓴다.
::first-letter, ::first-line, ::selection, ::backdrop 등등.
위에서 설명한 여러 방법을 합쳐서 사용하면 더 강력하다. 예를 들면, primary class인 li element를 select하고 싶다면, li.primary를 쓰면 된다.
- ul element의 자식인 모든 li element를 select하고 싶으면. ul li
-
primary class인 ul element의 direct children인 모든 li를 select하고 싶으면, ul.primary > li
-
selected class인 li element의 다음 sibling을 select하고 싶으면, li.selected + li
-
selected class인 li element의 모든 다음 sibling들을 select하고 싶으면, li.selected ~ li
li.selected + li 는 다음 하나만, li.selected ~ li 는 다음부터 전부 다인 것을 주의하라.
CSS specificity는 어느 style이 적용될지를 결정하는 factor이다. 태그에 style attribute로 적용되는 inline style은 가장 높은 specificity 값을 갖는다. 그 다음이 ID selector, 그 다음이 class selector나 attribute selector, 그리고 다음이 element type이다. 일반적으로 이를 표현하는 방법이 ,로 나눈 integer list로 많이 표현한다. inline style은 1, 0, 0, 0이다. id selector는 0, 1, 0, 0. class selector나 attribute selector는 0, 0, 1, 0. h1 같은 element selector는 0, 0, 0, 1이 된다.
예를 들면, li,selected a[href] 는 2 element selectors(li, a), 하나의 class selector(.selected)와 하나의 attribute selector([herf])를 갖으므로, 0, 0, 2, 2가 된다.
다른 예로 #newItem #mainHeading span.smallPrint는 두 ID selector, 하나의 class selector(.smallPrint), 하나의 span element를 갖으므로, 0, 2, 1, 1이 된다.
위의 둘을 비교하면, 두번째 것이 첫번째 것보다 더 specific하다.
그런데 여기에 !important 를 쓰면 가장 우선한다. 위의 표현 방법에 따르면 1, 0, 0, 0, 0이 된다. inline보다 더 우선한다.
예를 들면, 다음과 같은 걸 보자.
<style>
div.media {
display: block;
width: 100%;
float: left;
}
.hide {
display: none;
}
</style>
<div class=”media hide”> 어쩌고 저쩌고 </div>
여기서 div는 media와 hide 둘 중 어느 것이 적용될까. div.media는 0, 0, 1, 1 이다. .hide는 0, 0, 1, 0이다. 따라서 .hide의 display: none을 div.media의 display: block이 override한다. .hide는 적용이 안된다. 이럴 때 아래처럼 하면 된다.
.hide {
display: none !important;
}
[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/)를 통해 유효성을 검사할 수 있다.
건물 내부 배선 DIY
건물 내부의 배선을 위한 관로를 이용해 네트워크 배선을 바꿀 수 있다.
아파트의 경우 약전설비 평면도를 관리 사무소에서 준다고 한다. 이걸 보면 좀 편하게 할 수 있다고 한다.
관로를 탐색하거나, 선을 넣을 때는 안내선(현장용어 요비선)을 사용한다. 영어로 검색할 때는 Cable puller 혹은 fishing tape라고 검색하면 나오더라.
단열 공사 표준 시방서
누가 자기 집 벽체 내부 단열한 후기를 보았는데 그 댓글을 보니 웬 PDF가 있다.
단열 표준시방서다.
그렇지, 표준시방서가 있겠구나!