[HTML5&CSS] Dark theme 만들기

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

테마 내의 새로운 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() 를 사용해서 뒤집을 수도 있다.

 

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

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

 

moniwiki 설치

글 정리할 때 익숙한 건 역시 moniwiki다. 다시 설치하려니 github로 옮겨가고, wikiseed 심는 것도 따로 프로젝트를 따로 뒀던데 다시 설치하는 절차를 정리한다.

설치하려는 디렉토리 아래(난 /var/www/)에서 git clone

[code]
git clone https://github.com/wkpark/moniwiki.git
chown -R www-data:www-data moniwiki
cd moniwiki/
git clone https://github.com/wkpark/moniwiki-seed.git wikiseed
cd theme/
git clone https://github.com/wkpark/moniwiki-theme-paper.git paper
git clone https://github.com/wkpark/moniwiki-theme-bootstrap3.git bootstrap3
git clone https://github.com/wkpark/moniwiki-theme-publish.git publish
[/code]

 

브라우저에서 monisetup.php 접속

  1.  $sitename 설정
  2.  $admin_passwd 설정
  3.  $use_sectionedit 설정
  4.  “Sow wikiseed” 로 wiki seed 심기

 

추가로 config.php 에서 고치기

http://blog.dasomoli.org/240 참고

 

쉘에서 secure.sh 실행

[code]
sh secure.sh
[/code]

 

apache2 설정

/etc/apache2/sites-available/moniwiki.dasomoli.org.conf

[code]
<VirtualHost *:80>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request’s Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName moniwiki.dasomoli.org

<Directory /var/www/moniwiki>
Options FollowSymLinks
AllowOverride None
Require all granted
</Directory>

ServerAdmin dasomoli@gmail.com
DocumentRoot /var/www/moniwiki

# Available loglevels: trace8, …, trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

ErrorLog ${APACHE_LOG_DIR}/moniwiki_error.log
CustomLog ${APACHE_LOG_DIR}/moniwiki.access.log combined

# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
Include conf-available/serve-cgi-bin.conf
</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet
[/code]

moniwiki 디렉토리에 index.html 생성

/var/www/moniwiki/index.html

[code]
<html>
<head>
<meta http-equiv=”refresh” content=”0; url=./wiki.php”>
</head>
<body onload="javascript:window.location=’./wiki.php’">
Please follow <a href="wiki.php">this link</a>
</body>
</html>
[/code]

Moniwiki의 초기 설정

1. monisetup.php 에서 한 일.
 1.1. Site 이름 설정

$sitename=’Wiki’;
 1.2. 업로드 가능한 파일 확장자 추가.

$pds_allowed=”png|jpg|jpeg|gif|mp3|zip|tgz|gz|txt|css|exe|hwp|pdf|flv|alz|bmp|doc|xls|ppt|pptx|xlsx|docx|gul|gif|bz2″;
 1.3. 테마 바꾸기

$theme=’azblue’;
 1.4. 편집창 사이즈 좀더 길게..

$edit_rows=26;
 1.5. 위지윅 에디터는 아직 불안정 한 것 같으니 Disable

$use_wikiwyg=0;
 1.6. 부분 편집 가능하도록..

$use_sectionedit=1;
 1.7. 로그인한 후에 글 편집 가능하도록..

$security_class=’needtologin’;
 
2. php 설정(/etc/php.ini)에서 upload를 위한 작업
 2.1. 최대 업로드 파일 사이즈 조정

upload_max_filesize = 2048M
 2.2. POST 방식으로 업로드하므로 POST data size 조정

post_max_size = 1024M
 
3. azblue 테마 수정(theme/azblue/theme.php)
 3.1. 폭이 너무 좁으니 좀 넓게..

$_width=’80%’;