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가 있다.
단열 표준시방서다.
그렇지, 표준시방서가 있겠구나!
[MacOS] 클립보드 매니저 Clipy
복사/붙여넣기를 할 때 이전 복사했던 것들을 다시 붙여 넣는 경우가 많다.
Windows에서는 Ditto를 애용하는데, 맥에서는 어떤게 있나 보니 오픈소스인 Clipy가 있다.
github https://github.com/Clipy/Clipy 에서 받을 수 있고,
사용법은 간단히 Shift + Cmd + ‘V’ 혹은 Ctrl + Cmd + ‘V’이다.
기본 설정은 항목이 폴더 안에 들어가도록 되어 있는데,
“Preferences…” / “Menu” / “Number of items place inline:” 이 “0”으로 되어 있던 것을 “10” 등으로 적당히 늘려주면 된다.
[Linux] Gzip으로 압축된 로그 파일 다루기
logrotate를 사용하면 /var/log 아래에 gzip된 로그 파일(.gz)들이 남는다.
로그 파일을 보고 싶을 때 압축을 풀어서 봐도 되지만, 압축을 풀지 않고 다룰 수 있는 명령어들이 있다.
- zcat: 압축된 파일 보기
- zgrep: 압축된 파일에서 grep
- zless: gz파일을 위한 less. zmore도 있다.
zless log.gz 이면 로그 파일 보는데 큰 문제 없을 거다.
zcat으로 | 하여 파이프를 통해 이용하는 것도 좋은 방법이다.
more는 오래된 도구로 less와의 차이는 less는 앞 쪽으로도 스크롤이 된다. more는 뒤로만 된다.
[Linux] logrotate 설정
로그 남길 때 그냥 주구장창 남기면 디스크가 꽉 찬다.
/var/log 아래 남는 log 들처럼 주기적으로 gzip으로 압축하고, 오래된 로그는 저절로 지워지도록 하고 싶을 때 logrotate를 쓴다.
logrotate를 설정해서 주기마다 압축해서 남기고, 때 되면 지우도록 만들자.
아래 명령은 도움말인 man page를 보여 준다.
# man logrotate
logrotate의 설정 파일들은 아래에서 찾을 수 있다.
/etc/logrotate.conf : logrotate의 기본 설정 파일. 여기서 /etc/logrotate.d/ 아래의 파일들을 include 하도록 되어 있다.
/etc/logrotate.d/ : logrotate를 사용해서 로그를 남기고 싶은 유틸리티들이 여기다 설정 파일을 둔다.
예제를 보자.
# vi /etc/logrotate.d/mysqlmon
/var/log/mysqlmon/mysqlmon.log /var/log/mysqlmon/mysqlmon.err {
daily
missingok
rotate 7
compress
notifempty
}
위의 예제의 각 옵션은 다음과 같다.
daily: 하루 주기
missingok: 로그 파일이 없어도 에러 메시지를 쓰지 않는다.
rotate 7: 오래된 로그를 7개 남긴다.
compress: gzip으로 압축한다.
notifempty: 로그 파일이 비어 있으면 rotate하지 않는다.
다른 자세한 옵션은 man page를 참고하자.
[Linux] mysql 복구 script
mysql이 자꾸 죽으면서 워드프레스가 DB연결을 못하고 자꾸 에러를 띄운다.
InnoDB memory pool size가 기본으로 128M로 되어 있는데, 이걸 할당을 못하고 죽는 것 같다.
64M로 줄이자.
# vi /etc/mysql/conf.d/innodb.cnf [mysqld] innodb_buffer_pool_size = 64M
죽으면 사실 그냥 service mysql restart 해주면 되는데, 요거도 귀찮으니까 돌려서 죽으면 실행하게 스크립트를 만들자
# vi mysqlmon.sh
#!/bin/bash
linecount=`ps -aux | grep /usr/sbin/mysqld | wc -l`
if [ "$linecount" = "2" ]; then
echo "`date`: Working well" >> /var/log/mysqlmon/mysqlmon.log;
else
echo "`date`: Trying to recover..." >> /var/log/mysqlmon/mysqlmon.err;
service mysql restart;
echo "`date`: Done" >> //var/log/mysqlmon/mysqlmon.err;
fi
crontab에 등록하자
# crontab -e */5 * * * * /root/mysqlmon.sh
log파일을 관리하도록 [Linux] logrotate 설정 글의 예제처럼 logrotate를 설정하자.