공공기획 스튜디오 퍼블리크

웹 디자인의 통일된 문서 양식과 일관성 있는 디자인 요소의 이해 본문

Reference

웹 디자인의 통일된 문서 양식과 일관성 있는 디자인 요소의 이해

public 2025. 2. 17. 23:48

1. Introduction

1) 형식

  선언블록
    선언   선언  
p { color : red ; font-size : 25px }
선택자   속성   값   속성   값  

2) 적용방법

<!-- (1) style요소 사용 방법 -->
<head>
    <style></style>
</head>
<!-- (2) style속성 사용 방법 -->
<p style="color:red;font-size:25px;">Cascading Style Sheets</p>
<!-- (3) 외부 파일 사용 방법 -->
<head>
	<link rel="stylesheet" ref="./ex.css">
</head>
<head>
    <style>
        import url(./ex.css)	/* 또는 @import "./ex.css" */
    </style>
</head>
<!-- (4) CSS 적용 우선순위
W3C에서는 body요소 내부에서 가장 가까이 적용된 스타일이 우선권 갖도록 규정
1. style속성을 사용한 방법
2. style요소를 사용한 방법
3. 외부 파일을 사용한 방법
4. 웹브라우저 디폴트 스타일
<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
    	<!-- 외부 파일 mystyle.css body {background-color:yellow;} -->
        <link rel="stylesheet" href="./mystyle.css">
    	<!-- style요소 -->
    	<style>
    		body {background-color:skyblue}
		</style>
    </head>
    <body style="background-color: pink">
    </body>
</html>

2. Selector

1) 기본선택자

이름 형식 예제 예제설명
전체선택자 * * 모든 요소
타입선택자 요소명 p 모든  p요소
클래스 선택자 요소명.클래스명 p.intro class="intro"속성을 가진 모든 p요소
.클래스명 .intro class="intro"속성을 가진 요소
아이디 선택자 요소명#아이디명 p#id1 id="id1"속성을 가진 모든 p요소
#아이디명 #id1 id="id1"속성을 가진 요소
속성 선택자 요소명[속성표현] p[속성표현] 속성 표현에 해당하는 속성을 가진 모든 p요소
요소명[속성명] a[target] target속성을 가진 모든 a요소
요소명[속성명=값] a[target=_blank] target="_blank"를 가진 모든 a요소
요소명[속성명~=값] a[title~=food] title 속성의 값에 단어 'food'를 포함하고 있는 모든 a요소
요소명[속성명|=값] a[title|=google] title 속성의 값이 'google'이거나 'google'로 시작하는 값을 가진 모든 a요th
요소명[속성명^=값] a[href^="https"] href 속성의 값이 'https'로 시작하는 모든 a요소
요소명[속성명$=값] a[href$=".jpg"] href 속성의 값이 '.jpg'로 끝나는 모든 a요소
요소명[속성명*=값] a[href*="co"] href 속성의 값으로 'co'라는 부분문자열을 포함하고 있는 모든 a요소

See the Pen public.re.kr/55-2-1-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/55-2-1-02 by Lee Deokho (@duqe) on CodePen.

    •  

2) 가상선택자

유형 가상 클래스 예제 설명
링크 :link a:link 방문 여부 상관없는 모든 링크
:visited a:visited 방문한 모든 링크
사용자동작 :hover a:hover 마우스가 올라간 링크
:active a:active 활성화(클릭)되는 링크
:focus input:focus 포커스를 가진 input요소 선택
사용자 인터페이스 상태 :enabled input:enabled 활성화 된 모든 input 요소
:disabled input:disabled 비활성화 된 모든 input 요소
:checked input:checked 체크된 모든 input 요소(라디오버튼, 체크박스)
부정 :not(선택자) p:not(.sample) 클래스 속성이 sample 아닌 모든 p 요소
트리구조 :root :root 웹 문서의 최상위 요소
:nth-child(n) tr:nth-child(2) 동일 부모요소안에서 2번째 자식요소인 tr선택
:nth-last-child(n) tr:nth-last-child(2) 동일 부모요소안에서 끝에서 2번째 자식요소인 tr선택
:first-child p:first-child p:nth-child(1)
:last-child p:last-child p:nth-last-child(1)
:nth-of-type(n) p:nth-of-type(2) 동일한 부모요소의 p요소 중에서 2번째 p요소 선택
:first-of-type p:first-of-type p:nth-of-type(1)
:only-child p:only-child 부모 요소안에서 자식 요소가 하나인 p요소 선택
:only-of-type p:only-of-type 부모 요소안에서 p요소가 유일하게 하나일때 선택
:empty td:empty 자식이 없는 td요소를 선택
가상요소 ::first-letter p::first-letter 모든 p요소의 첫번째 글자를 선택
  ::firtst-line p::firtst-line 모든 p요소의 첫번째 줄을 선택
  ::before p::before p요소의 내용 앞에 내용/스타일 추가
  ::after p::after p요소의 내용 뒤에 내용/스타일 추가

See the Pen public.re.kr/55-2-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/55-2-2-02 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/55-2-2-03 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/55-2-2-04 by Lee Deokho (@duqe) on CodePen.

3) 결합자

명칭 형식 내용
자손 결합자 선택자1 선택자2 선택자1의 자손 요소 중에서 선택자2에 해당하는 모든 요소를 선택
자식 결합자 선택자1 > 선택자2 선택자1을 부모 요소로 하여 직계 자식 요소인 선택자2를 선택
인접 형제 결합자 선택자1 + 선택자2 선택자1의 바로 뒤에 오는 동생인 선택자2 요소만 선택
일반 형제 결합자 선택자1 ~ 선택자2 선택자1 다음에 오는 형제관계에 있는 모든 선택자2 요소들을 선택
그룹 결합자 선택자1, 선택자2, ... 여러 선택자가 동일한 스타일을 사용하는 경우에 선택자들을 하나로 묶어서 표현

See the Pen public.re.kr/55-2-3-01 by Lee Deokho (@duqe) on CodePen.

3. Color

1) 색상표현

  • Color Name
  • #000000~#FFFFFF
  • RGBa (255, 255, 255, 0.0~1.0): 마지막a는 투명도 값
  • HSL (0~360, 100%, 100%): 색조, 채도, 밝기

2) 관련속성

  • color, background-color, border-color
  • transparent: 투명도 
  • opacity: 불투명도 0.0~1.0

4. Font

1) font-family

  • font-family name: serif(명조), sans-serif(고딕), cursive(필기체), fantasy(장식체), monospace(글자폭 동일체)
  • 일반폰트명: 폰트명에 공백있을 경우 ""로 묶어 사용

2) font-size

  • 절대크기: xx-small, x-small, small, medium, large, x-large, xx-large
    • 단위: cm, mm, in(1inch = 2.54cm), pt(1in = 72pt), pc(1pica = 12pt), px
  • 상대크기: smaller, larger
    • em: 부모요소의 글꼴크기(1em)에 대한 상대적 크기 (ex 0.5em, W3C recommended)
    • ex: 적용 글골의 소문자 x의 높이에 대한 상대적 크기
    • %: 기본적으로 설정된 크기에 대한 백분율
  • Default Size: 16px(=1em)

3) font-style

  • nornal
  • italic, oblique

4) font-variant

  • normal
  • small-caps: 작은 알파벳 대문자

5) font-weight

  • normal: 400 (Default)
  • bold: 700
  • bolder / lighter: 현재(상위 요소) 굵기보다 한 단계 굵거나 가늘게 지정 
  • 100 ~ 900: 굵기를 9단계로 구분해서 지정

6) font 속성의 나열

font: [font-style font-variant font-weight] font-size [/line-height] font-family
/* [] 생략가능 */
/* 줄 간격을 지정하는 line-height 속성 값은 font-size 값 뒤에 "/" 붙여 입력 */
/* ex) font: italic bold 12px/30px Times, serif */

7) font-face

font-face {
    font-family: 사용자정의글꼴명;
    src: url(글꼴파일명);
    }
/* 사용가능 글꼴: OTF, TTF, WOFF */

See the Pen CSS - Font by Lee Deokho (@duqe) on CodePen.

5. Text

1) spacing 속성

2) align 속성

3) indent 속성

See the Pen CSS - Text - text-indent by Lee Deokho (@duqe) on CodePen.

4) transform 속성

See the Pen CSS - Text - text-transform by Lee Deokho (@duqe) on CodePen.

5) description-line 속성

See the Pen CSS - Text - text-description-line by Lee Deokho (@duqe) on CodePen.

6) shadow 속성

See the Pen CSS - Text - text-overflow & word-wrap by Lee Deokho (@duqe) on CodePen.

7) overflow & word-wrap 속성

See the Pen public.re.kr/55-5-6-01 by Lee Deokho (@duqe) on CodePen.

8) vertical-align 속성

See the Pen CSS - Text - vertical-align by Lee Deokho (@duqe) on CodePen.

6. List

list-style-type - (ul) none, disc, circle, square
- (ol) decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
list-style-image - none, url
list-style-position - outside, inside
list-style 목록관련 속성 일괄지정 ex) list-style: square inside url(./flower.png)

See the Pen CSS - List by Lee Deokho (@duqe) on CodePen.

7. Table

border 테두리
table-layout 셀 안의 내용 크기에 따른 셀의 크기 변화 여부를 지정
- (auto) 열의 폭이 셀의 내용의 크기에 따라 결정되므로 테이블 크기가 자동으로 조절
- (fixed) 셀의 내용의 크기와 상관없이 테이블 또는 셀의 폭에 의해 결정 
border-collapse 테이블 테두리와 셀 테두리를 합할지 여부를 지정
- (separate) 테두리 분리
- (collapse) 테두리 결합. border-spacing, empty-cells 속성은 무시
border-spacing 인접한 셀 테두리 사이의 간격(수평 및 수직 거리)을 지정. 하나의 값만 지정되면 수평/수직 동일 적용
caption-side - top, bottom
empty-cells 빈셀의 테두리 및 배경 표시여부
- show, hide

See the Pen CSS - Table by Lee Deokho (@duqe) on CodePen.

8. Box Model

  Top (상)  
Left (좌)
margin (여백, 항상투명)
border (테두리)
padding (패딩)
contents (내용)
Right (우)
  Bottom (하)  

1) 마진과 패딩

See the Pen CSS - BoxModel - Margin & Padding by Lee Deokho (@duqe) on CodePen.

2) 요소의 크기 지정

See the Pen CSS - Box Model - Size of Element by Lee Deokho (@duqe) on CodePen.

3) 요소의 위치

See the Pen CSS - Introduction - Application by Lee Deokho (@duqe) on CodePen.

4) 화면 표시

See the Pen public.re.kr/55-8-4-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/55-8-4-02 by Lee Deokho (@duqe) on CodePen.

See the Pen CSS - Selector - Pseudo-Selector1 by Lee Deokho (@duqe) on CodePen.

  •  

5) 플로팅

See the Pen CSS - Selector - Pseudo-Selector2 by Lee Deokho (@duqe) on CodePen.

6) 박스의 크기

See the Pen CSS - Selector - Combinator by Lee Deokho (@duqe) on CodePen.

9. 테두리

See the Pen CSS - Selector - Pseudo-Selector2 by Lee Deokho (@duqe) on CodePen.

10. 배경

See the Pen public.re.kr/55-10-0-01 by Lee Deokho (@duqe) on CodePen.

11. 그라데이션

1) 선형 그라데이션

See the Pen public.re.kr/55-11-1-01 by Lee Deokho (@duqe) on CodePen.

2) 방사형 그라데이션

See the Pen public.re.kr/55-11-2-01 by Lee Deokho (@duqe) on CodePen.

3) 원뿔형 그라데이션

See the Pen public.re.kr/55-11-3-01 by Lee Deokho (@duqe) on CodePen.

12. 변형

1) transform 속성

변형 함수 설명
translate3d(x, y, z) 요소 박스를 X, Y, Z 축으로 지정한 만큼 이동
translate(x, y) 요소 박스를 X, Y 축으로 지정한 만큼 이동
translateX(x) 요소 박스를 X 축으로 지정한 값만큼 이동
translateY(y) 요소 박스를 Y 축으로 지정한 값만큼 이동
translateZ(z) 요소 박스를 Z 축으로 지정한 값만큼 이동
scale3d(x, y, z) X, Y, Z 축으로 지정한 값만큼 확대/축소
scale(x, y) X, Y 축으로 지정한 값만큼 확대/축소
scaleX(x) X축으로 지정한 값만큼 확대/축소
scaleY(y) Y축으로 지정한 값만큼 확대/축소
scaleZ(z) Z축으로 지정한 값만큼 확대/축소
rotate3d(x, y, z, angle) 지정한 각도만큼 X, Y, Z 축을 기준으로 회전
rotate(angle) 지정한 각도만큼 X, Y축을 기준으로 회전
rotateX(angle) X축을 기준으로 지정한 각도만큼 회전
rotateY(angle) Y축을 기준으로 지정한 각도만큼 회전
rotateZ(angle) Z축을 기준으로 지정한 각도만큼 회전
skew(x-angle, y-angle) 지정한 각도만큼 X, Y축을 기준으로 기울임
skewX(angle) 지정한 각도만큼 X축을 기준으로 기울임
skewY(angle) 지정한 각도만큼 Y축을 기준으로 기울임
matrix(n, n,  n,  n,  n,  n) 6개의 값을 가진 변환 행렬을 사용한 2차원 변형
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) 16개의 값을 가진 4*4변환 행렬을 사용한 3차원 변형

See the Pen public.re.kr/55-12-1-01 by Lee Deokho (@duqe) on CodePen.

2) 그 밖에 속성

See the Pen public.re.kr/55-12-2-01 by Lee Deokho (@duqe) on CodePen.

See the Pen CodePen Home public.re.kr/55-12-2-02 by Lee Deokho (@duqe) on CodePen.

See the Pen CodePen Home public.re.kr/55-12-2-03 by Lee Deokho (@duqe) on CodePen.

13. 전환

See the Pen public.re.kr/55-13-0-01 by Lee Deokho (@duqe) on CodePen.

trasition-timing-function 내용
ease 느리게->빠르게->느리게 cubic-bezier(0.25, 0.1, 0.25, 0.1)
linear 처음부터 끝까지 일정한 속도 cubic-bezier(0, 0, 1, 1)
ease-in 느리게->점점빠르게 cubic-bezier(0.42, 0, 1, 1)
ease-out 빠르게->점점느리게 cubic-bezier(0, 0, 0.58, 1)
ease-in-out 느리게->중간까지 빠르게->점점느리게 cubic-bezier(0.42, 0, 0.58, 1)
step-start steps(1, start)
setp-end steps(1, end)
steps(n, start/end) n은 전환의 진행을 몇 개의 간격으로 나눠 보여줄지 나타냄.
cubic-bezier(n, n, n, n) 자신의 값을 정의할 때 사용하며, 0에서 1사이의 값 지정

See the Pen public.re.kr/55-13-0-02 by Lee Deokho (@duqe) on CodePen.

/* 전환효과 부여 가능한 CSS 속성 */
/* background-color, background-position */
/* border-top(or bottom/left/right)-color, border-top(or bottom/left/right)m-width, border-spacing */
/* bottom */
/* clip */
/* color */
/* font-size, font-weoght */
/* height */
/* left */
/* letter-spacing */
/* line-height */
/* margin-top(or bottom/left/right) */
/* max(or min)-height, max(or min)-width */
/* opacity */
/* outline-color, outlin-width */
/* padding-top(or bottom/left/right) */
/* right */
/* text-indent, text-shadow */
/* top */
/* vertical-align */
/* visibility */
/* width */
/* word-spacing */
/* z-index */

See the Pen public.re.kr/55-13-0-03 by Lee Deokho (@duqe) on CodePen.

14. 애니메이션

See the Pen public.re.kr/55-14-0-01 by Lee Deokho (@duqe) on CodePen.

See the Pen public.re.kr/55-14-0-02 by Lee Deokho (@duqe) on CodePen.

15. 다단

1) 다단 지정

See the Pen 1 by Lee Deokho (@duqe) on CodePen.

2) 다단 스타일 지정

See the Pen public.re.kr/55-15-2-01 by Lee Deokho (@duqe) on CodePen.

[참고자료]

  • 이관용, HTML5 웹 프로그래밍, KNOU Press, 2023
저작자표시 비영리 동일조건 (새창열림)

'Reference' 카테고리의 다른 글

Photoshop CC 화면 깜빡임 오류  (0) 2025.06.24
웹 프로그래밍은 사용자와 대화를 위한 서비스 로직을 구성하는 것  (0) 2025.02.17
웹 기획을 위한 웹페이지의 구조적 이해  (0) 2025.02.17
인체생리학 요약  (0) 2025.02.17
영양과 건강 요약  (2) 2025.02.17
'Reference' Related Articles more