[CSS3] 사용하는 단위계의 종류

CSS3 2019. 12. 3. 02:00
반응형

웹 어플리케이션을 개발하다 보면 폰트나 여백 등에 사용되는 단위들이 혼돈될 때가 많다.
반응형웹을 개발하는 경우 상대단위는 필수적이다.

기본적인 단위계에 대해 정리한다.


절대단위 (in, cm, mm, pt, pc)

in    : inch 단위로 계산(1inch = 2.54cm)
cm  : centimeter 단위로 계산(1cm = 10mm)
mm : mm단위로 계산(10mm = 1cm)
pt   : point 단위로 계산(1pt = 1/72inch)
pc   : pica단위로 계산(1pc = 12pt)

 
상대단위 (px, em, ex, %, rem)
px : pixel을 기준으로한 값. 

      브라우저에는 고정적이지만 표시장치의 해상도에 따라서 상대적인 크기를 갖는다.(1px = 1dot)
em : 해당 폰트의 대문자 M의 너비를 기준으로 한 값.
ex : 해당 폰트의 소문자 x의 높이를 기준으로 한 값.
% : 기본글꼴의 크기에 대해 상대적으로 한 값.
rem : root em 최상위 요소의 크기에 대해 상대적으로 한 값.


반응형웹의 등장과 더블어 rem단위를 많이 사용하게 되는데 이때 가장 문제가 되는 것이 브라우저의 호환성이다.

브라우저 호환성의 확인은 다음 사이트에서 가능하다.

http://caniuse.com/rem

만일 필요한 값을 계산하고 싶은 경우 다음 사이트를 이용하면 편리하게 환산 할 수 있습니다.

http://pxtoem.com

6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.500em 50.0% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.750em 75.0% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1.000em 100.0% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.250em 125.0% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.500em 150.0% 18pt

 

 

반응형
저작자표시

'CSS3' 카테고리의 다른 글

[ CSS3 ] 스타일시트 스타일 가이드  (0) 2020.04.27
[CSS3] 모서리 둥글게 하는 css 요소 border-radius  (0) 2019.12.04
[CSS3] outline과 border의 차이  (0) 2019.12.01
[CSS3] CSS style guide  (0) 2019.11.06
[CSS3] 가로 세로 중앙 정렬 방법(2)  (0) 2019.10.30
[CSS3] 가로 세로 중앙 정렬 방법(1)  (0) 2019.10.29
[CSS3] grid system : cell  (0) 2019.10.29
[CSS3] grid system : template  (0) 2019.10.28
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ Git ] git fork와 git clone의 차이는 무엇인가?

Git & Github 2019. 12. 2. 16:07
반응형

단순히 프로젝트를 복사하고자 할 경우에는 clone, 협업을 위해 프로젝트를 복사하는 경우에는 fork를 사용한다. 각 명령의 주요 특징은 다음과 같다.

 

[ Git Fork ]

- Team Project에 참여하는 팀원.

- Opensource Project에 기여하고 싶을때.

Original Project와 연결되어 있기 때문에 original repository에 새 commit이 발생하면 fork된 repository로 반영할 수 있다.

 

[ Git Clone ]

- 단순한 복제를 하고자 할때.

Original Project와 연결되어 있지 않고, 독립적이다.

 

git fork와 git clone의 차이는 무엇인가?
git fork와 git clone의 차이는 무엇인가?

반응형

'Git & Github' 카테고리의 다른 글

[ Git ] 원격 저장소의 파일을 강제로 로컬 저장소에 덮어쓰는 방법  (0) 2022.03.18
[ Git ] 우분투에서 Git을 업데이트하는 방법  (0) 2022.01.27
[ Git ] 윈도우10에서 Git을 업데이트하는 방법  (0) 2022.01.27
[ GitHub ] github profile 꾸미기  (0) 2022.01.24
[ Git ] Git의 기본 편집기를 바꾸자  (0) 2021.12.10
[ Git ] Git Flow 사용법  (0) 2021.11.26
[ Git ] 마지막 commit 내용 수정 방법  (0) 2021.10.26
[ Git ] 어떤 Git clients를 고를지 고민이라면.  (0) 2020.04.27
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[CSS3] outline과 border의 차이

CSS3 2019. 12. 1. 23:36
반응형

지금까지 html 요소의 외곽선을 정의할때는 border를 사용했다.

하지만 border의 경우는 많은 제약이 있다. border의 경우 요소에 접해 있기 때문에 요소와 border사이에 공간을 줄경우 padding값을 주어야 한다. 하지만 outline의 경우 offset값을 주면 된다.

여러모로 외곽선으로 사용항하기에는 outline이 적당하다.

간단한 사용법은 다음곽 같다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  margin: 30px;
  border: 1px solid black;
  padding: 15px;
  outline: 1px solid red;
  outline-offset: 15px;
}
</style>
</head>
<body>

<h2>outline의 사용법</h2>

<p>outline은 이렇게 사용합니다.</p>

</body>
</html>

결과 화면을 통해 알 수 있듯이 padding을 주면 border도 같은 결과를 얻을 수 있다. 하니만 outline의 경우 다른 값을 사용하지 않고도 outline의 값만으로 모든 것을 정의 할 수 있기때문에 사용하기에 편리하다.

나머지 사용법은 border와 동일하다.

 

반응형

'CSS3' 카테고리의 다른 글

[ CSS3 ] 스타일시트 스타일 가이드  (0) 2020.04.27
[CSS3] 모서리 둥글게 하는 css 요소 border-radius  (0) 2019.12.04
[CSS3] 사용하는 단위계의 종류  (0) 2019.12.03
[CSS3] CSS style guide  (0) 2019.11.06
[CSS3] 가로 세로 중앙 정렬 방법(2)  (0) 2019.10.30
[CSS3] 가로 세로 중앙 정렬 방법(1)  (0) 2019.10.29
[CSS3] grid system : cell  (0) 2019.10.29
[CSS3] grid system : template  (0) 2019.10.28
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[ MySQL ] root 패스워드 정책 및 패스워드 설정

雜同散異 2019. 11. 30. 12:34
반응형

서비스 중에는 패스워드를 보안상 문제가 없도록 설정해야 하지만 개발용도로 로컬에 설치해서 사용할 경우 패스워드가 긴 경우 불편하다.

이런 경우 패스워드 정책을 변경하고, 패스워드를 재설정하는 방법을 정리한다.

먼저 mysql 프롬프트로 이동한다.

 # mysql -u root mysql

현재 패스워드 정책을 확인한다.

mysql> SHOW VARIABLES LIKE 'validate_password%';

+--------------------------------------+--------+
| Variable_name                        | Value  |
+--------------------------------------+--------+
| validate_password_check_user_name    | OFF    |
| validate_password_dictionary_file    |        |
| validate_password_length             | 8      |
| validate_password_mixed_case_count   | 1      |
| validate_password_number_count       | 1      |
| validate_password_policy             | MEDIUM |
| validate_password_special_char_count | 1      |
+--------------------------------------+--------+
7 rows in set (0.05 sec)

보통 위와 같이 설정되어 있다. 내용을 보면 길이는 8 이상, 특수문자, 대소문자 등이 1글자 이상 있어야 하는 것으로 되어 있다.

이를 변경하려면 SET GLOBAL 명령을 사용한다.

mysql> SET GLOBAL validate_password_policy=LOW;
--------------
SET GLOBAL validate_password_policy=LOW
--------------

Query OK, 0 rows affected (0.00 sec)

mysql> SET GLOBAL validate_password_length = 4;
Query OK, 0 rows affected (0.00 sec)

mysql> SET GLOBAL validate_password_mixed_case_count = 0;
Query OK, 0 rows affected (0.00 sec)

mysql>  SET GLOBAL validate_password_number_count = 0;
Query OK, 0 rows affected (0.00 sec)

mysql>   SET GLOBAL validate_password_special_char_count = 0;
Query OK, 0 rows affected (0.00 sec)

설정이 완료 되었으면 내용을 다시한번 확인해 본다.

mysql> SHOW VARIABLES LIKE 'validate_password%';
+--------------------------------------+-------+
| Variable_name                        | Value |
+--------------------------------------+-------+
| validate_password_check_user_name    | OFF   |
| validate_password_dictionary_file    |       |
| validate_password_length             | 4     |
| validate_password_mixed_case_count   | 0     |
| validate_password_number_count       | 0     |
| validate_password_policy             | LOW   |
| validate_password_special_char_count | 0     |
+--------------------------------------+-------+
7 rows in set (0.01 sec)

이제 아무런 제약없이 4개의 문자만으로 설정이 가능하다.

비밀번호 재 설정은 다음과 같다.

mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '1234';
Query OK, 0 rows affected (0.00 sec)

 

 

반응형

'雜同散異' 카테고리의 다른 글

[ Font ] 무료 글꼴, 코딩 글꼴부터 디자인 글꼴까지 총정리 - 최종 업데이트 2020.02.25  (0) 2020.02.25
[ cafe24 ] 데이타베이스 접속 방법  (0) 2020.02.04
[ Chrome ] 웹사이트를 다크 모드로 보는 방법  (0) 2019.12.26
GET과 POST 의 차이점 및 특징  (0) 2019.12.05
[ Bookmark ] Online File Convert - convert.com  (0) 2019.11.12
[ Bookmark ] javascript CDN경로 검색 사이트  (0) 2019.11.11
[ 네이버 ] 웹사이트 등록하기  (0) 2019.11.09
[ Google ] 검색 엔진에 웹사이트 등록하기  (0) 2019.11.05
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[Ubuntu] 한글판 설치 후 console mode에서 한글이 깨져 나올 때

Ubuntu 2019. 11. 29. 10:40
반응형

제목과 같이 한글로 설치 후 터미널이나 콘솔 모드에서 한글이 깨져 나올때는 폰트를 설치하면 해결된다.

먼저 Frame Buffer Terminal 을 설치한다.

$ sudo apt install fbterm

한글 폰드를 설치한다.

 $ sudo apt install fonts-nanum-coding

폰트 사이즈 등을 설정할때는 .fbtermrc 파일을 수정해 주면 된다.

파일은 홈 디렉토리에 있다. 숨겨진 파일이기 때문에 ls -a 옵션으로 봐야 보인다.

 

[문제점 발견]

fbterm을 실행하면 한글이 잘 보이지만 터미널에서 빠져나와 일반 모드로 돌아오면 여전히 한글이 깨져 보인다.

향후 다른 방법을 찾아보자.

한글판 설치 후 console mode에서 한글이 깨져 나올 때
한글판 설치 후 console mode에서 한글이 깨져 나올 때

반응형

'Ubuntu' 카테고리의 다른 글

[ Ubuntu ] 우분투 버전 확인 명령어  (0) 2020.04.27
[ Ubuntu ] user와 root(SuperUser)간의 권한 전환  (0) 2020.04.27
[ Ubuntu ] 터미널 실행 Shortcuts  (0) 2020.04.27
[ Ubuntu ] Windows와 Linux의 멀티부팅  (2) 2020.04.27
[Ubuntu] SSH 설치  (0) 2019.11.28
[Linux] system information tool - NeoFetch  (0) 2019.11.27
[Ubuntu] 우분투 서버에서 file manager 사용하기 - Midnight Commander  (0) 2019.11.26
[VirtualBox] 리눅스 서버에 SSH로 연결하기  (0) 2019.11.25
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[Ubuntu] SSH 설치

Ubuntu 2019. 11. 28. 09:07
반응형

우분투 서버 설치할 때 함께 설치하지 않았다면 다음 명령으로 설치한다.

$ sudo apt install ssh

설치가 끝나면 원격에서 다음과 같이 입력하여 접속을 확인한다.

다음 화면은 윈도우10의 CMD에서 접속한 화면이다.

C:\Users\user>ssh wook@172.130.10.131
wook@172.130.10.131's password:
Welcome to Ubuntu 18.04.3 LTS (GNU/Linux 5.0.0-36-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage


 * Canonical Livepatch is available for installation.
   - Reduce system reboots and improve kernel security. Activate at:
     https://ubuntu.com/livepatch

패키지 5개를  업데이트할 수 있습니다.
0 업데이트는 보안 업데이트입니다.

Your Hardware Enablement Stack (HWE) is supported until April 2023.
Last login: Thu Nov 28 08:57:03 2019 from 172.30.1.42
wook@server9:~$

접속을 끝낼때는 exit 명령으로 로그아웃한다.

 

SSH 설치
SSH 설치

반응형

'Ubuntu' 카테고리의 다른 글

[ Ubuntu ] user와 root(SuperUser)간의 권한 전환  (0) 2020.04.27
[ Ubuntu ] 터미널 실행 Shortcuts  (0) 2020.04.27
[ Ubuntu ] Windows와 Linux의 멀티부팅  (2) 2020.04.27
[Ubuntu] 한글판 설치 후 console mode에서 한글이 깨져 나올 때  (0) 2019.11.29
[Linux] system information tool - NeoFetch  (0) 2019.11.27
[Ubuntu] 우분투 서버에서 file manager 사용하기 - Midnight Commander  (0) 2019.11.26
[VirtualBox] 리눅스 서버에 SSH로 연결하기  (0) 2019.11.25
[Ubuntu] 서버에 desktop(x-window)환경 설치  (0) 2019.11.24
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[Linux] system information tool - NeoFetch

Ubuntu 2019. 11. 27. 19:48
반응형

리눅스 시스템의 정보를 간단히 볼수 있는 유틸리티이다.

설치 방법은 다음과 같다.

$ sudo apt install neofetch

설치가 끝나면 다음과 같이 실행한다.

$ neofetch

 

 

반응형

'Ubuntu' 카테고리의 다른 글

[ Ubuntu ] 터미널 실행 Shortcuts  (0) 2020.04.27
[ Ubuntu ] Windows와 Linux의 멀티부팅  (2) 2020.04.27
[Ubuntu] 한글판 설치 후 console mode에서 한글이 깨져 나올 때  (0) 2019.11.29
[Ubuntu] SSH 설치  (0) 2019.11.28
[Ubuntu] 우분투 서버에서 file manager 사용하기 - Midnight Commander  (0) 2019.11.26
[VirtualBox] 리눅스 서버에 SSH로 연결하기  (0) 2019.11.25
[Ubuntu] 서버에 desktop(x-window)환경 설치  (0) 2019.11.24
[Ubuntu] Server에 APM설치 04 - phpMyAdmin  (0) 2019.11.21
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,

[Ubuntu] 우분투 서버에서 file manager 사용하기 - Midnight Commander

Ubuntu 2019. 11. 26. 23:55
반응형

오래전 dos 시절에 PC를 사용했던 경험이 있던 사용자라면 mdir이라는 프로그램을 기억하고 있다.

윈도우가 없이 명령어를 사용해서 PC를 조작해야만 했던 시절에 명령어 없이 파일을 다룰 수 있다는 것은 큰 축복이었다. 이와 유사한 mc라는 리눅스용 파일 메니저가 있다.

예전 mdir이 생각나서 ubuntu 18.04 server에 설치해 보았다.

철치전 시스템을 업데이트 한다.

$ sudo apt update

Midnight Commander를 설치한다.

$ sudo apt install mc

설치가 완료되고 실행 할때는 mc라고 입력하면 다음과 같은 화면으로 변한다.

$ mc

윈도우 시스템이 아니기 때문에 마우스를 쓸수 없다는 것을 제외하고는 일반 파일관리자와 비슷하다.

기본 명령은 방향키와 상단 메뉴, function키를 이용해서 사용며 사용법은 F1을 클릭하면 확인할 수 있다.

화면하단에 1에서 10까지 써있는 숫자가 Function키이다.

상단 메뉴를 이용하고 싶은 경우는 F9를 누를 후 방향키를 이용하여 사용한다.

반응형

'Ubuntu' 카테고리의 다른 글

[ Ubuntu ] Windows와 Linux의 멀티부팅  (2) 2020.04.27
[Ubuntu] 한글판 설치 후 console mode에서 한글이 깨져 나올 때  (0) 2019.11.29
[Ubuntu] SSH 설치  (0) 2019.11.28
[Linux] system information tool - NeoFetch  (0) 2019.11.27
[VirtualBox] 리눅스 서버에 SSH로 연결하기  (0) 2019.11.25
[Ubuntu] 서버에 desktop(x-window)환경 설치  (0) 2019.11.24
[Ubuntu] Server에 APM설치 04 - phpMyAdmin  (0) 2019.11.21
[Ubuntu] Server에 APM설치 03 - PHP7  (0) 2019.11.20
블로그 이미지

DeveloperN

개발자 n의 개발 이야기(draft)

,
반응형

공지사항

글 보관함

달력

«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바