'CSS3' 카테고리의 글 목록

[ CSS3 ] 스타일시트 스타일 가이드

CSS3 2020. 4. 27. 13:16

정해진 규칙이 없이 생각 나는 대로 코딩을 하다보면 가독성이 현저히 떨어지는 것을 알 수 있다. 이는 어떤 언어이건 마찬가지다. 이런 이유때문에 많은 많은 기업이나 개발자 들이 코딩 스타일 가이드를 제시하고 있다. 그 중 CSS의 스타일 가이드에 관해 알아보자.

1. attribute(속성) 이름순으로 정렬.
2. "attribute(속성): value(값);"의 기본 형식에서
1) 콜론(:) 뒤 공백 1칸 뛰어 쓰기..
2) 마지막 속성 값 뒤에 세미콜론(;) 사용.
3. Selector(선택자) 단위 개행.
4. 블럭 간 빈줄 삽입.
5. single quotation 사용.

6. value가 없을 경우 none보다 0를 사용.
7. class이름에 camel notation 보다는 hyphen(-)을 사용.
8. 블럭 주석보다 라인 주석 권장.
9. ID는 안티패턴으로 간주됨으로 사용하지 않는다.
사용하는 것 자체는 가능하지만 재사용이 불가능 하기 때문이다.

일반적인 style guide는 위와 같다.

하지만 상기 1번의 속성을 이름순으로 정렬하는 것에는 반대한다.
최근 대표적이 에디터들도 알파벳 순으로 정렬하지 않으면 귀찮은 안내 문구가 뜨기도 한다. 왜 이런 가이드가 난무 하는지는 모르겠으나 무조건 아파벳 순으로 정렬하면 가독성이 현저하게 떨어진다.
따라서 속성의 순서는 알파벳 순이 아닌 기능별로 순서를 정하는 것을 권장한다.

기능별 순서는 외형에서 상세형태의 순으로 작성한다.

모질라 파이어폭의 CSS선언 순서를 참고하면 이해가 쉬울 것이다.
1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. Opacity, Cursors, Generated Content

참고로 네이버의 CSS선언 순서는 다음과 같다.
1. display
2. overflow
3. float
4. position
5. width/height
6. padding/margin
7. border
8. background
9. color/font
10. animation
11. 기타

모질라와 네이버 방식에 큰차이는 없다.
두가지 방식의 공통점은 레이아웃>테두리>베경>글꼴>동작 순으로 작성한다는 것이다.

어떤 형식을 따라도 상관 없으나 가장 중요한 것은 가독성을 높이고, 지속적으로 사용이 가능해야 한다는 것이다.

W3C의 CSS의 유효성 검사 : http://jigsaw.w3.org/css-validator/
이 곳은 가이드 적용을 검사하는 곳이 아니라 문법적 오류가 없는지를 검사해 주는 곳이다. URL이나 파일업로드, 직접입력 방식으로 CSS의 문법을 검사해준다.

저작자표시

'CSS3' 카테고리의 다른 글

[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0)	2019.12.04
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[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)

,

[CSS3] 모서리 둥글게 하는 css 요소 border-radius

CSS3 2019. 12. 4. 20:48

box모델의 귀퉁이를 둥글게 하는 css요소는 border혹은 padding을 정의할때와 같이 정의 할 수 있다.

border-radius: 35px 20px 10px 0px;

4개의 요소 값은 상, 우, 하,좌의 순으로 정의된 것이며, 결과는 다음과 같이 나타 난다.

저작자표시

'CSS3' 카테고리의 다른 글

[ CSS3 ] 스타일시트 스타일 가이드 (0)	2020.04.27
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[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)

,

[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)

,

[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)

,

[CSS3] CSS style guide

CSS3 2019. 11. 6. 20:08

정해진 규칙이 없이 생각 나는 대로 코딩을 하다보면 가독성이 현저히 떨어지는 것을 알 수 있다. 이는 어떤 언어이건 마찬가지다. 이런 이유때문에 기업이나 개발자 들이 코딩 스타일 가이드를 제시하고 있다. 그 중 CSS의 스타일 가이드에 관해 생각해 보자.

1. attribute(속성) 이름순으로 정렬.
2. “attribute(속성): value(값);”의 기본 형식에서
1) 콜론(:) 뒤 공백 1칸 띄어쓰기.
2) 마지막 속성 값 뒤에 세미콜론(;) 사용.
3. Selector(선택자) 단위 개행.
4. 블록 간 빈 줄 삽입.
5. single quotation 사용.

6. value가 없을 경우 none보다 0를 사용.
7. class이름에 camel notation 보다는 hyphen(-)을 사용.
8. 블록 주석보다 라인 주석 권장.
9. ID는 안티패턴으로 간주됨으로 사용하지 않는다.
사용하는 것 자체는 가능하지만 재사용이 불가능 하기 때문이다.

[ 개발자n의 생각 ]
일반적인 style guide는 위와 같다. 하지만 상기 1번의 속성을 이름순으로 정렬하는 것에는 반대한다.
최근 대표적이 에디터들도 알파벳 순으로 정렬하지 않으면 귀찮은 안내 문구가 뜨기도 한다. 왜 이런 가이드가 난무하는지는 모르겠으나 무조건 알파벳 순으로 정렬하면 가독성이 현저하게 떨어진다.
따라서 속성의 순서는 알파벳 순이 아닌 기능별로 순서를 정하는 것을 권장한다. 기능별 순서는 외형에서 상세형태의 순으로 작성한다.
모질라 파이어폭스의 CSS선언 순서를 참고하면 이해가 쉬울 것이다.
1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6. Backgrounds
7. Opacity, Cursors, Generated Content

참고로 네이버의 CSS선언 순서는 다음과 같다.
1. display
2. overflow
3. float
4. position
5. width/height
6. padding/margin
7. border
8. background
9. color/font
10. animation
11. 기타

모질라와 네이버 방식에 큰 차이는 없다.
두가지 방식의 공통점은 레이아웃>테두리>배경>글꼴>동작 순으로 작성한다는 것이다.

어떤 형식을 따라도 상관없으나 가장 중요한 것은 가독성을 높이고, 지속적으로 사용이 가능해야 한다는 것이다.

W3C의 CSS의 유효성 검사 : http://jigsaw.w3.org/css-validator/
이 곳은 가이드 적용을 검사하는 곳이 아니라 문법적 오류가 없는지를 검사해 주는 곳이다. URL이나 파일 업로드, 직접입력 방식으로 CSS의 문법을 검사해준다.

'CSS3' 카테고리의 다른 글

[ CSS3 ] 스타일시트 스타일 가이드 (0)	2020.04.27
[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0)	2019.12.04
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[CSS3] outline과 border의 차이 (0)	2019.12.01
[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)

,

[CSS3] 가로 세로 중앙 정렬 방법(2)

CSS3 2019. 10. 30. 00:05

가로 세로 중앙 정렬 방법(1)에서는 여러 요소들을 중앙 정렬할 때 유용한 방법을 설명했다.

이번에는 간단히 text를 정렬하는 방법을 소개한다.

특히 header copy등을 삽입할 때 편리하게 사용할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Developer N">
  <title>date methode</title>
  <style>
    .center {
      background-color: rgb(6, 65, 23);
      color: rgb(255, 255, 255);
      padding: 5%;
      text-align: center;
    } 
  </style>
</head>
<body>
  <h1 class="center">
    [ 가로, 세로 중앙 정렬 ]<br />
    padding의 크기로 height를 조정하고<br />
    별도로 height는 지정하지 않는다.
  </h1>
</body>
</html>

'CSS3' 카테고리의 다른 글

[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0)	2019.12.04
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[CSS3] outline과 border의 차이 (0)	2019.12.01
[CSS3] CSS style guide (0)	2019.11.06
[CSS3] 가로 세로 중앙 정렬 방법(1) (0)	2019.10.29
[CSS3] grid system : cell (0)	2019.10.29
[CSS3] grid system : template (0)	2019.10.28
[CSS3] grid system : Basic container (0)	2019.10.28

DeveloperN

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

,

[CSS3] 가로 세로 중앙 정렬 방법(1)

CSS3 2019. 10. 29. 23:35

자주 사용되면 서도 늘 찾게 되는 것이 요소의 중앙 정렬이다.

다음은 중앙 정렬의 예시이다. 중앙 정렬 방법은 여러가지가 있기 때문에 정렬 요소에 따라 방법이 달라 질 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Developer N">
  <title>date methode</title>
  <style>
    .center { 
      height: 200px;
      position: relative;
      border: 3px solid green; 
    }
    .center div {
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .center p {
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="center">
    <div>
      <p>Horizontal & Vertical Align<br>가로 및 세로 정렬</p>
      <p>여러 요소 동시에 정렬 할 수 있다.</p>
    </div>
  </div>
</body>
</html>

'CSS3' 카테고리의 다른 글

[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0)	2019.12.04
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[CSS3] outline과 border의 차이 (0)	2019.12.01
[CSS3] CSS style guide (0)	2019.11.06
[CSS3] 가로 세로 중앙 정렬 방법(2) (0)	2019.10.30
[CSS3] grid system : cell (0)	2019.10.29
[CSS3] grid system : template (0)	2019.10.28
[CSS3] grid system : Basic container (0)	2019.10.28

DeveloperN

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

,

[CSS3] grid system : cell

CSS3 2019. 10. 29. 00:05

container로 정의된 grid는 행과 열 단위로 설정은 가능하지만 각 셀을 병합하는 cell단위 설정은 불가능하다.

cell의 병합을 위해서는 grid-column 혹은 grid-row 요소를 사용하여 정의한다.

예를 들어 첫번째 cell과 두 번째 cell을 병합하려면 grid-column: 1 / 3; 으로 속성을 설정하면 된다.

이때 숫자는 grid gap의 라인 번호를 의미한다. column은 좌측을 1번으로 시작해서 오른쪽으로 cell과 cell사이의 gap을 의미하며, row는 상단을 1번으로 시작해서 아래 쪽으로 cell과 cell사이의 gap을 의미한다.

아래 그림의 빨간색 숫자는 column의 수이며, 초록색 숫자는 row의 수이다.

결국 위에서 예를 들은 grid-column: 1 / 3; 은 1번과 2번 셀이 합쳐진 것이다.

grid-column: 1 / 3; 는 grid-column: 1 / span 2; 로 표기해도 된다. gap line 1에서 2개의 cell을 span한다는 의미이다.

<!--
 * 02-css-grid-cell.html v0.3.0
 * Update: 2019.10.28
 * Author: Developer N
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02-css-grid-cell-v0.1.0</title>
  <style>
    .grid-container {
      display: grid;
      grid: 100px 100px 100px 100px 100px / auto auto auto auto auto auto auto; 
      grid-gap: 5px;
    }
    .cell-1 {
      grid-column: 1 / 3; /* column gap1에서 gap3까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-3 {
      grid-column: 4 / 7; /* column gap4에서 gap8까지 cell 4개를 병합 / span 4와 같은 역할 */
    }
    .cell-4 {
      grid-column: 7 / 8; /* column gap7에서 gap8까지 cell 1개를 지정 */
      grid-row: 1 / 4; /* row gap1에서 gap4까지 cell 3개를 병합 / span 3와 같은 역할 */
    }
    .cell-5 {
      grid-row: 2 / 4; /* row gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-6 {
      grid-column: 2 / 4; /* column gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
      grid-row: 2 / 4; /* row gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-7 {
      grid-column: 4 / 7; /* column gap4에서 gap7까지 cell 3개를 병합 / span 3와 같은 역할 */
      grid-row: 2 / 4; /* row gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-8 {
      grid-column: 1 / 7; /* column gap1에서 gap7까지 cell 6개를 병합 / span 6와 같은 역할 */
    }
    div > div {
      background-color: cornflowerblue;
    }    
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="cell-1">(1) .cell-1</div>
    <div>(2)</div> 
    <div class="cell-3">(3) .cell-2</div>
    <div class="cell-4">(4) .cell-4</div>
    <div class="cell-5">(5) .cell-5</div>
    <div class="cell-6">(6) .cell-6</div>
    <div class="cell-7">(7) .cell-7</div>
    <div class="cell-8">(8) .cell-8</div>
    <div>(9)</div>
    <div>(10)</div>
    <div>(11)</div>
    <div>(12)</div>
    <div>(13)</div>
    <div>(14)</div>
    <div>(15)</div>
    <div>(16)</div>
    <div>(17)</div>
    <div>(18)</div>
    <div>(19)</div>
    <div>(20)</div>
    <div>(21)</div>
  </div>
</body>
</html>

위의 code는 style을 gap의 번호로만 표시한 것이고, span과 함께 표시하면 다음과 같다.

  <style>
    .grid-container {
      display: grid;
      grid: 100px 100px 100px 100px 100px / auto auto auto auto auto auto auto; 
      grid-gap: 5px;
    }
    .cell-1 {
      grid-column: 1 / span 2;
    }
    .cell-3 {
      grid-column: 4 / span 3;
    }
    .cell-4 {
      grid-column: 7 / 8;
      grid-row: 1 / span 3;
    }
    .cell-5 {
      grid-row: 2 / span 2;
    }
    .cell-6 {
      grid-column: 2 / span 2;
      grid-row: 2 / span 2;
    }
    .cell-7 {
      grid-column: 4 / span 3;
      grid-row: 2 / span 2;
    }
    .cell-8 {
      grid-column: 1 / span 6;
    }
    div > div {
      background-color: cornflowerblue;
    }    
  </style>

결과는 다음과 같다.

(17)에서 (21)번 cell의 height가 지정되지 않은 것은 처음 cell을 병합하기 전에 grid-container를 선언하여, 병합과정에서 밀린 cell이다. 이런 경우 grid-container를 수정해 주면 된다.

'CSS3' 카테고리의 다른 글

[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0)	2019.12.04
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[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 : template (0)	2019.10.28
[CSS3] grid system : Basic container (0)	2019.10.28

DeveloperN

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

,

'CSS3'에 해당되는 글 10건

[ CSS3 ] 스타일시트 스타일 가이드

'CSS3' 카테고리의 다른 글

[CSS3] 모서리 둥글게 하는 css 요소 border-radius

'CSS3' 카테고리의 다른 글

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

'CSS3' 카테고리의 다른 글

[CSS3] outline과 border의 차이

'CSS3' 카테고리의 다른 글

[CSS3] CSS style guide

'CSS3' 카테고리의 다른 글

[CSS3] 가로 세로 중앙 정렬 방법(2)

'CSS3' 카테고리의 다른 글

[CSS3] 가로 세로 중앙 정렬 방법(1)

'CSS3' 카테고리의 다른 글

[CSS3] grid system : cell

'CSS3' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

DeveloperN

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			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