작성일 2018년 7월 6일2018년 7월 6일 작성자 Xian Choi — 댓글 남기기

mixin을 이용해 float을 clear하기

div나 span과 같은 요소에 float 속성을 적용하여 위치를 잡다보면 부모 요소의 height가 float 속성을 가진 요소를 포함하지 못하여 레이아웃이 비정상적으로 출력되는 경우가 있다.

이에 대해 검색해 보면 무슨 방법이니 무슨 방법이니 설명이 많이 되어 있지만, 다 필요 없고 부모 요소에 가상 클래스 :after 를 주고 빈 block 영역을 만들어 clear 값을 both로 설정하면 자식 요소의 float: left 나 float: right 를 초기화시켜 준다. 레이아웃이 정상적으로 표시될 것이다. CSS에서 코드는 다음과 같다.

부모 요소:after {
	content: "";
	display: block;
	clear: both;
}

그런데 float을 초기화 시켜줘야 하는 부모 요소가 하나면 상관없지만, 2개 3개를 훌쩍 넘어서게 되면 매번 입력하기가 힘들다. Class를 만들어서 적용시켜주는 방법도 있지만 SCSS에서는 mixin을 만들어 해당 부모 요소에 직접 설정할 수도 있다.

mixin 코드는 다음과 같다.

@mixin clearfix() {
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}

사용할 때는 아래 코드를 입력해 준다.

@include clearfix();

예를 들어, 아래와 같이 입력했다면

section {
	padding: 1em;
	@include clearfix();
}

컴파일된 CSS 파일에는 다음과 같이 표시된다.

section {
	padding: 1em;
}

section:after {
	content: "";
	display: block;
	clear: both;
}

작성일 2018년 7월 4일2018년 7월 4일 작성자 Xian Choi — 댓글 남기기

::selection – 마우스 드래그로 블록 지정시 스타일 주기

간단하게 블록의 배경만 바꿔주는 코드다. mixin을 사용했다.

PC와 모바일에서 모두 작동해야 하므로 모바일을 위한 접두어(-webkit-, -moz-)를 붙여줘야 한다.

@mixin selection($background) {
	$prefixes: ("-webkit-","-moz-", "");
	@each $prefix in $prefixes {
		::#{$prefix}selection {
			background: $background;
		}
	}
}

사용할 때는 아래 코드를 사용한다.

@include selection(색상값);

직접 css로 입력하면 다음과 같다.

::-webkit-selection {
	background: 색상값;
}
::-moz-selection {
	background: 색상값;
}
::selection {
	background: 색상값;
}

직접 입력하는게 더 편해보이지만, 만약 배경만이 아니라 다른 요소가 더 들어가 있고, 수정해야 할 일이 생기면, 작업은 수정해야 할 요소 개수 * 3개 가 된다. mixin을 이용하면 처음엔 조금 복잡할 수는 있지만 수정에 용이하다는 장점이 있다.

작성일 2018년 7월 4일2018년 7월 4일 작성자 Xian Choi — 댓글 남기기

SASS와 SCSS? 결론은 SCSS

XE/라이믹스 레이아웃과 게시판 스킨을 만들면서 CSS를 다루어 보았다.

HTML로 틀을 만들고 CSS로 스타일을 주다보면 어느새 1000줄은 훌쩍 넘어간다.

실력이 없어서 그런지는 몰라도 나는 그랬다.

그러다 scss 확장자를 알게 되었고, 덕분에 그나마 편하게 CSS 파일을 만들었다고 생각했지만..

scss 확장자를 가진 파일의 장점을 전혀 활용하지 못했고, 가장 낮은 수준의 활용만 했다는 것을 알게 되었다.

그래서 앞으로 필요에 의해서든 취미로든 뭐로든 웹디자인을 하려면 CSS만 가지고는 어렵다는 결론을 내렸다.

SCSS를 해야 한다.

SCSS를 찾아보니 SASS가 나온다. SASS는 뭐고 SCSS는 뭔가.

먼저는 SASS다. Syntactically Awesome StyleSheets = SASS = 사스.

쉽게 말하면 컴파일이 필요한 프로그래밍 언어다. SASS로 작성한 파일을 컴파일하면 CSS 파일이 생성된다.

그러니 조건문, 반복문, 변수활용, 함수 등등 기존 CSS에서는 생각지도 못했던 방식으로 CSS를 만들 수 있다.

SCSS는 Sassy CSS 라고 한다. Sass한 CSS라고. SCSS는 SASS와 다른 별개의 것이 아니라 SASS의 문법이다.

SCSS는 SASS보다 CSS스럽다. 무슨말이냐면, SASS에는 중괄호가 없는데, SCSS에는 중괄호가 있어서 좀 더 익숙하게 코딩을 할 수 있다는 것이다. 가독성 뿐만 아니라 중괄호와 세미콜론을 사용하기 때문에 컴파일에서도 에러가 줄어든다고 한다.

그래서 대부분 SCSS 문법을 사용한다고.

결론은 SCSS다.

작성일 2017년 11월 26일2017년 11월 26일 작성자 Xian Choi — 댓글 3개

Nextcloud 12 업데이트 간단 후기

오랜만에 넥스트 클라우드를 업데이트 했습니다.
~~그리고 오랜만에 쓰는 포스트라 어색하네요.~~

기존 사용 버전은 11 버전인데 오늘 오랜만에 업데이트 알림을 유심히 보니 12.03이라고 써있더군요. 어느새 이렇게 버전이 올라갔나 하면서 업데이트를 눌렀습니다. 확실히 예전 ownCloud에 비해 업데이터가 좋아졌음을 느끼며 잠시 기다리니 업데이트가 완료되고, 서드파티 자료들을 이어서 업데이트 합니다.

모든 과정을 마치고 보니, 조금 더 세련되진 UI가 기다리고 있었습니다. 이정도 달라진건 잘 표시도 안나네 하며 폴더를 클릭하는데 속도가 11 버전과 비교가 안됩니다. 두배이상 빨라진 느낌입니다. 서버 사양이 그리 좋지 못하기 때문에 어느정도 답답한 부분이 있었는데 싹 사라진 느낌입니다.

넥스트 클라우드 12 버전 추천합니다.

넥스트 클라우드 12버전 업데이트 후기 요약.
1) 조금 더 세련되진 UI
2) 좀 더 좋아진 한글 지원
3) 확실히 체감되는 웹UI 속도

작성일 2017년 5월 22일2017년 5월 22일 작성자 Xian Choi — 댓글 남기기

우분투 14.04에 PHP 7.0 설치하기

문커뮤니티에서 가상서버를 이용하는데 우분투 14.04.02 LTS가 설치되어 있었습니다. APM을 설치하려 했더니 PHP 5가 설치되길래 다시 PHP 7을 설치했습니다. 잊지 않기 위해 그 방법을 적어봅니다.

간단합니다. 다음 명령어 3줄을 순서대로 입력하면 됩니다.

sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get install php7.0

끝.

작성일 2017년 3월 21일2017년 3월 23일 작성자 Xian Choi — 댓글 31개

자작NAS – Nextcloud 설치

* 반드시 이전 글인 “Nextcloud 설치 준비”의 과정을 거치고 나서 설치해야 합니다.

1. Nextcloud 설치할 위치 선택

우선 Nextcloud를 설치할 위치를 정합니다.

아파치 서버의 기본 디렉토리는 /var/www/html 입니다. 여기에 설치해도 되고, /var/www/nextcloud 와 같은 다른 위치나 아니면 자신의 홈 디렉토리 하위에 넣어도 관계는 없습니다(제가 실제로 사용하는 서버에서는 홈디렉토리 안에서 모든 자료와 웹서버 파일을 관리합니다). 기본 디렉토리에 설치하든 다른 위치에 설치하든 소유자와 권한, 아파치 가상호스트 설정만 제대로 되어 있다면 도메인주소로 접속할 수 있습니다.

여기서는 /var/www/nextcloud 위치에 설치하는 것으로 설명하겠습니다. /var/www로 이동합니다.

$ cd /var/www

2. Nextcloud 다운로드 및 압축 해제

1) Nextcloud Server 다운로드

Nextcloud Server 파일을 다운로드합니다. 3월 21일 기준으로 11.0.2가 최신입니다. 최신 버전은 넥스트클라우드 다운로드 페이지에서 확인할 수 있습니다.

$ sudo wget https://download.nextcloud.com/server/releases/nextcloud-11.0.2.tar.bz2

명령어를 입력하면 파일을 해당 위치에 다운로드 받습니다.

2) 압축 해제

다음 명령어를 이용해 압축을 풉니다.

$ sudo tar -xvf nextcloud-11.0.2.tar.bz2

압축된 파일과 폴더가 주욱 나오면서 압축이 풀립니다.
제대로 풀렸나 조회를 하려면 ls 명령어를 입력합니다.
nextcloud-11.0.2.tar.bz2를 압축 해제하여 nextcloud 디렉터리가 보일 것입니다.

3) Nextcloud 디렉터리 소유자 및 권한 변경

다시 한번 ls 명령어를 입력해 줍니다. 이번에는 옵션을 같이 입력하겠습니다.

$ ls -l

ls는 디렉터리 안의 파일과 디렉터리를 보여주는 명령어입니다. -l 옵션은 자세한 정보를 출력하라는 뜻입니다.

소유자도 없고 소유 그룹도 없는 nextcloud 디렉터리가 보입입니다. 웹브라우저를 통해 해당 디렉터리에 접근하려면 소유자와 소유 그룹이 www-data 여야 합니다. 그리고 권한을 drwxrwxr-x로(775)로 변경해 줍니다. 다음 명령어를 순서대로 입력해 줍니다.

$ sudo chown -R www-data:www-data nextcloud
$ sudo chmod -R 775 nextcloud
$ ls -l

소유자와 소유 그룹이 www-data로, 권한이 drwxrwxr-x로 변경된 것을 확인할 수 있습니다.

3. Nextcloud를 위한 DB 생성

Nextcloud에서 사용할 데이터베이스를 생성할 차례입니다.

1) phpMyAdmin에 접속하여 root 계정으로 로그인합니다.

2) 상단 탭에서 데이터베이스를 클릭합니다.

3) 새 데이터베이스 만들기 밑의 데이터베이스명 입력 칸에 “nextcloud”를 입력하고 만들기를 클릭합니다.

데이터베이스명은 꼭 nextcloud가 아니어도 되지만 식별할 수 있는 것이어야 합니다.

4) 왼쪽 트리 구조의 New를 클릭하여 데이터베이스 목록을 확인합니다.

3. Apache2 서버에 도메인 등록하기

아파치 서버의 기본 디렉터리인 /var/www/html에 Nextcloud의 파일을 집어넣었다면 따로 설정할 필요 없이 도메인 주소를 입력하면 바로 접속될 것입니다.
하지만 /var/www/nextcloud 에 설치하였기 때문에 추가로 설정을 해줘야 합니다.

다음 명령어를 순서대로 입력하여 Nextcloud를 위한 설정 파일을 만들어 줍니다.

$ cd /etc/apache2/sites-available
$ sudo vi nextcloud.conf

vi 사용에 익숙치 않다면 vi 간단 사용법을 참고하세요.
빈 파일의 내용에 다음 내용을 입력합니다.

<VirtualHost *:80>

    ServerName 자신의 도메인 주소
    ServerAdmin 자신의 이메일 주소

    ServerAlias 자신의 도메인 주소
    DocumentRoot 넥스트클라우드 파일이 있는 경로

</VirtualHost>

저장한 후 설정 파일을 아파치 서버에 등록합니다.

$ sudo a2ensite nextcloud.conf

추가로 .htaccess 활성화해야 합니다. 활성화 하지 않을 경우 “.htaccess 파일이 처리되지 않아서 데이터 디렉터리와 파일을 인터넷에서 접근할 수 없을 수도 있습니다. 올바르게 서버를 구성하는 방법에 대한 자세한 내용은 설명서를 참조하시기 바랍니다.” 라는 경고 문구가 뜨게 됩니다.
다음 명령어를 입력해 줍니다.

$ sudo a2enmod rewrite

모두 마쳤으면 아파치 서버를 재시작합니다.

$ sudo service apache2 restart

4. 웹브라우저에서 설치 마무리

자신의 도메인 주소에 접속하면 다음과 같은 화면이 뜹니다.

관리자 계정 만들기 – 관리자 계정을 만드는 부분입니다. 관리자의 ID와 비밀번호를 입력합니다.
데이터 폴더 – nextcloud가 설치된 디렉터리의 하위 디렉터리가 기본 설정이지만 다른 곳을 정할 수도 있습니다.
예를 들면 /home/사용자 이름/data로 변경 가능합니다. 이때 해당 폴더가 생성되어 있어야 하고 권한과 소유자 소유 그룹이 제대로 지정되어 있어야 제대로 동작합니다.
지금은 기본 상태로 진행합니다. 나중에 데이터 폴더 변경도 다룰 것입니다.
데이터베이스 사용자와 암호 – root 계정 정보를 입력하면 됩니다.
데이터베이스 이름 – nextcloud라는 데이터베이스를 만들었으므로 nextcloud를 입력합니다.
다른 이름으로 했다면 그 이름을 입력합니다. 생각이 안 나면 phpmyadmin에 접속하여 데이터베이스 목록을 확인합니다.
localhost – 변경하지 않습니다.

다 입력했다면 [설치 완료] 버튼을 눌러줍니다. 생각보다 시간이 오래 걸릴 수 있습니다. 느긋하게 기다려 봅니다.

설치가 완료되면 다음과 같은 화면이 나타납니다.