※TRANSFORM 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.

TANSITION 속성은 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 해 주는 것으로 두 가지를 잘 활용한다면 다양한 애니메이션 적 효과를 줄 수 있습니다.

 

목차

1. TRANSFORM(변형)

2. TRANSITION(변화)

 

1. TRANSFORM (변형)

TRANSFORM 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.

크게 2차원 변형과 3차원 변형으로  2가지의 형태를 가집니다.

  • 2차원 변형 : 웹 요소를 단순히 수평이나 수직으로 이동하고 회전하는 것
  • 3차원 변형 : x축과 y축에 원근감을 주는 z 축을 추가해 변형시키는 것

@2D 변형의 속성

rotate() 요소를 회전, 단위는 deg
scale(x,y) 요소의 너비와 높이를 같이 변경, 단위는 등배단위
scaleX() 요소의 너비만 변경, 단위는 등배단위
scaleY() 요소의 높이만 변경, 단위는 등배단위
skew(x,y) X축과 Y축에 따라 기울기 변환, 단위는 deg
skewX() X축을 기준으로 기울기 변환, 단위는 deg
skewY() Y축을 기준으로 기울기 변환, 단위는 deg
translate(x,y) 요소의 이동을 x축, y축으로 이동, 단위는 px
translateX() 요소를 x축으로 이동, 단위는 px
translateY() 요소를 y축으로 이동, 단위는 px
matrix(n,n,n,n,n,n) 6개의 매개변수를 한번에 처리
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

 

@코드로 보기
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .box:hover {
            transform: scale(1.5,1.5);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

위와 같이 적용하면 box에 마우스가 닿으면 x, y축이 각 1.5배씩 증가하게 됩니다.

 

 

@3D 변형의 속성

rotate3d(x, y, z, angle) 3D회전을 한번에 정의
rotateX() X축을 중심으로 3D회전을 정의
rotateY() Y축을 중심으로 3D회전을 정의
rotateZ() Z축을 중심으로 3D회전을 정의
scale3d(x, y, z) 3D스케일(크기) 변화를 한번에 정의
scaleX() X축을 중심으로 3D크기를 정의
scaleY() Y축을 중심으로 3D크기를 정의
scaleZ() Z축을 중심으로 3D크기를 정의
translate3d(x, y, z) 3D적 요소 이동을 한번에 정의
translateX() X축을 중심으로 3D이동을 정의
translateY() Y축을 중심으로 3D이동을 정의
translateZ() Z축을 중심으로 3D이동을 정의
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
16개값으로 구성되어 4X4행렬로 모든 3Dtransform값을 정의
perspective(n) 3D 변형 요소의 투시도를 지정

 

 

 

2. TRANSITION(변화)

※CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다.

 

linear  등속 변화, cubic-bezier(0, 0, 1, 1)과 같다.
ease 느리게 시작했다가 빨라졌다 다시 느려진다. cubic-bezier(0.25, 0.1, 0.25, 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)와 같다.
cubic-bezier(N,N,N,N) 값을 입력하여 가/감속을 조작한다. 

※FONT와 TEXT는 디자인적인 부분이나 가독성 측면에서 매우 중요한 요소 중 하나입니다.

CSS를 활용하여 TEXT에 크기, 글꼴, 효과등을 주거나 정렬하는 방법을 알아보도록 하겠습니다.

 

목차

1. FONT

2. TEXT

 

1. FONT

폰트는 크게 4가지의 속성을 가집니다. 각 속성에 대해 자세히 알아보도록 하겠습니다.

font-size 길이(px, em, ex), 백분율(%; 140%) 폰트의 크기를 지정
font-family 글자체(굴림체, 궁서, 맑은 고딕 등) 폰트 모양을 지정
font-style normal, italic, oblique 폰트 형태(이태릭체 등)를 지정
font-weight normal, bold, bolder, lighter, 숫자(100 200, ‥ ,900) 폰트의 굵기를 지정

 

@font-size 속성

글꼴의 크기를 지정하는 속성입니다.

keyword medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
length px, em 등 고정 수치로 지정합니다.
% 부모 요소의 font-size 기준의 퍼센트로 지정합니다.

 

@font-family 속성

글꼴을 지정하는 속성입니다.

 

font-family: '고딕', '돋움';

첫 번째 글꼴을 사용하되 첫 번째 글꼴이 없을 시 ', '로 구분된 두 번째 글꼴을 사용하는 방식입니다.

글꼴은 더 추가할 수 있습니다.

 

 

@font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

normal 기본 값 (400)
bold 굵게 표현(700)
bolder 부모 요소 보다 두껍게 표현
lighter 부모 요소 보다 얇게 표현
number 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

 

@font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

normal font-family 내에 분류된 기본 값
italic italic 스타일로 표현합니다. (italic)
oblique oblique 스타일로 표현합니다. (기울임)

 

2. TEXT

 

@text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다. 

none 텍스트 꾸밈을 생성하지 않음 ( 기본값 )
underline 밑줄로 꾸밈을 설정
overline 윗줄로 꾸밈을 설정
line-through 중간을 지나는 줄로 꾸밈을 설정

@text-decoration-style 속성

solid 한줄 스타일 ( 기본 값 )
double 이중선 스타일
dotted 점선 스타일
dashed 파선 스타일
wavy 물결 스타일

 

@text-indent 속성

텍스트의 들여 쓰기를 지정하는 속성입니다. 

length px, em 등 고정 수치로 지정. 음수 허용
% 부모 요소의 width를 기준으로 퍼센트로 지정

 

@text-align 속성

텍스트의 정렬을 지정하는 속성입니다. text 가운데 정렬을 위해 많이 사용됩니다.

left 텍스트를 왼쪽으로 정렬
right 텍스트를 오른쪽으로 정렬
center 텍스트를 중앙으로 정렬
justify 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

 

@text-align과 display의 관계

 -  text-align은 inline-level에 적용

 -  text-align은 block-level에 적용할 수 없음 

 

block 요소를 가운데 정렬 하고자 한다면 margin의 auto 값을 이용해서 양쪽 여백값을 조절하면 됩니다. 

- 인라인 요소 : text-align (center) 

- 블록 요소 :  margin (auto) 

 

 ex) margin:0 auto;

-첫 번째 0은 top, bottom의 여백, 두 번째 auto부분은 left, right의 여백입니다. 좌우 여백을 auto로 줘서 자동으로 양쪽 여백을 같게 만들어 주면 가운데로 정렬됩니다.

 

※HTML의 요소들의 스타일을 제어할 수 있는 CSS를 사용하려면 HTML의 원하는 요소와 범위를 정확하게 선택할 수 있어야 합니다.

CSS문법에서는 원하는 요소를 선택할 수 있도록 다양한 방법을 제공하고 있는데 이를 SELECTOR(선택자)라고 합니다.

크게 4개의 분류로 나누어 구분할 수 있습니다.

  • 기본 선택자(Basic selectors) - 기본적인 선택자의 표현
  • 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현
  • 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표현
  • 의사 클래스 또는 의사 요소 (Pseudo classes or Pseudo elements)
목차

1. 선택자의 우선순위

2. 기본 선택자와 그룹 선택자

3. 결합 선택자와 속성 선택자

 

1. 선택자의 우선순위

  1. 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다.
  2. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다.
  3. 선택자의 종류에 따른 우선순위 규칙(1항보다 우선)
    • 주요 단일 선택자 방식에서 id, class, tag 순의 우선순위
    • 우선순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다.
  4. 결합 관계(복합 선택자 패턴)의 경우는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선순위를 정한다.
  5. ! important를 사용해서 가장 우선적으로 적용이 가능하다.

 

@선택자 방식적용 선택자 우선순위

!important 속성: 적용 값 !important; 속성 기준 가장 우선 속성 기준 가장 우선 속성 기준 가장 우선
인라인 스타일 style=”” 1 요소 기준 가장 우선 요소 기준 가장 우선
ID 선택자 #selector 2 100 #header > .logo > a {  }
CLASS 선택자 .selector 3 10
속성 기반 선택자 a[href*=”#”] 3 10
가상 클래스 a:hover 3 10
가상 요소 span::after 3 10
태그 선택자 a 4 1
전체 선택자 * 5 0

 

2. 기본 선택자와 그룹 선택자

 

@선택자 종류

태그 선택자 p {} 기본 태그를 선택합니다.
클래스 선택자 .class {} 클래스 태그를 선택합니다.
아이디 선택자 #id {} 아이디 태그를 선택합니다.
그룹 선택자 p, .class, #id {} 여러가지 태그를 선택합니다.
전체 선택자 * {} 전체 태그를 선택합니다.

 

@코드로 보기  
      * {
            margin: 0;
            padding: 0;
        }

        p {

            color: black;

            font-size: 40px;
        }
 
        p, h1, h2 {
            color: black;
            font-size: 40px;
        }

        #id {

            color: black;

            font-size: 40px;
        }

 

 

3. 결합 선택자와 속성 선택자

 

@결합 선택자

자식 결합자 a > b a의 직계 자식인 노드를 선택
자손 결합자 a b a의 자손인 노드를 선택
일반 형제 결합자 a ~ b a와 b의 부모가 같고, a뒤에 오는 모든 b를 선택
인접 형제 결합자 a + b a와 b의 부모가 같고, a 바로 뒤에 오는 b만 선택

 

@속성 선택자

[attribute="value"] 해당 속성을 가지며, 그 값이 value인 요소를 선택합니다.
[attribute~="value"] 해당 속성을 갖고, 그 값중에 value가 포함되는 요소를 선택합니다.
[attribute|="value"] 해당 속성을 갖고, 그 값이 value이거나 value-로 시작하는 요소를 선택합니다.
[attribute^="value"] 해당 속성을 갖고, 그 값이 value로 시작하는 요소를 선택합니다.
위의 속성 선택자와 차이점은 value-로 시작하는게아니라, value로 시작한다는 점입니다.
[attribute$="value"] 해당 속성을 갖고, 그 값이 value로 끝나는 요소를 선택합니다.
[attribute*="value"] 해당 속성을 갖고, 그 값이 value를 포함하기만 하면 모두 선택합니다.

 

※form의 요소 중 사용빈도가 높고 중요도도 높은 <button>과 <input>에 대해 알아보겠습니다.

button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그라는 것입니다.

그래서 <button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, <input> 요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없습니다.

목차

1. BUTTON

2. INPUT

 

1. BUTTON

<button> 태그는 클릭이 가능한 버튼 요소입니다. submit, reset, button 3가지 type을 가질 수 있습니다.

<button>은 다양한 용도로 사용되고 브라우저마다 다른 type을 기본값으로 사용하게 될 수도 있기 때문에 HTML 문서를 보고 <button>이 어떤 역할을 하는 것인지 한눈에 알기 어렵기 때문에 type은 습관적으로 명시해 주는 것이 좋습니다.  

@<button type=" "> 속성

type="submit"  데이터를 제출하기 위한 버튼으로 지정한다. (기본값)
type="reset"  초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button"  버튼으로 지정한다. 클릭 이벤트 핸들러는 JavaScript로 직접 구현한다.

 

2. INPUT

@<input type=" "> 속성

type="submit"  <input>을 form handler에 데이터를 제출하기 위한 버튼으로 지정한다.
form handler는 보통 데이터를 처리하는 서버단 페이지로 지정된다.
버튼에 value 속성을 지정하면 <input>에 기본값(default value)로 표시된다.
type="reset"  <input>을 초기화버튼으로 지정한다. 클릭 시 <form> 내부의 모든 값(value)을 초기화해준다.
기본값(default value)을 지정해놨다면 이 값으로 다시 초기화된다.
type="button"  <input>을 버튼으로 지정한다.
type="img" <input>을 이미지버튼으로 지정한다.
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
type="text" <input>을 한 줄 입력 가능한 텍스트필드로 지정한다. input의 기본 type이다.
size값을 지정하면 필드 너비가 자동조정된다. 기본 size값은 "20"이다.
type="search" <input>을 검색필드로 지정한다. 일반적인 텍스트필드처럼 동작한다.

type="password" <input>을 암호필드로 지정한다. 입력한 텍스트는 별표나 원으로 마스킹된다.

type="tel" <input>을 전화번호 필드로 지정한다.
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"과 함께 사용해서 형식을 지정할 수 있다.

type="email" <input>을 이메일을 포함해야하는 입력필드로 지정한다.
브라우저에 따라 제출 시 이메일 주소 유효성검사가 자동으로 이루어진다.
일부 스마트폰에서는 type="email"을 인식하고 키보드에 ".com"를 추가로 띄워준다.

type="url" <input>을 URL주소를 포함해야하는 입력필드로 지정한다.

type="number" <input>을 숫자 입력만 가능한 필드로 지정한다.
min, max값을 지정하면 자릿수에 따라 필드 너비가 자동조정된다. (그림은 min="-10000"일 때)

type="range" <input>을 슬라이드 컨트롤과 범위 내 숫자를 선택할 수 있는 컨트롤로 지정한다.
기본 범위는 0부터 100이고, min, max, step 속성을 추가로 지정할 수 있다.


type="radio" <input>을 라디오버튼으로 지정한다. 선택지 중 단 하나의 항목만 선택할 수 있다.
type="checkbox" <input>을 체크박스로 지정한다. 선택지 중 0개, 1개 또는 여러 개를 선택할 수 있다.
type="color" <input>을 색상팔레트로 지정한다. value="#ff0000"과 같이 헥사코드로 기본값을 지정할 수 있다.
type="time" <input>을 Time Picker로 지정한다. (no time zone)

type="date" <input>을 Date Picker로 지정한다.
min, max속성으로 날짜 범위를 지정하면 Date Picker 캘린더에 지정한 기간만 활성화된다.
type="datetime-local" <input>을 Date Picker & 시간입력 필드로 지정한다. (no time zone)
type="week" <input>을 Week Picker로 지정한다.
type="month" <input>을 연도와 달을 Picker로 지정한다.

type="file"  <input>을 '파일선택 버튼'과 '선택된 파일 표시'로 지정한다. 
type="hidden" <input>을 숨겨진 입력필드로 지정한다.
사용자가 보거나 수정할 수 없는 데이터를 포함하는 용도로 사용한다.
개발자 도구에서보거나 편집할 수 있으므로 보안의 형태로 사용해서는 안된다.
<input type="hidden" id="custId" name="custId" value="3487">

@<input form-*=" "> 속성

form <input>이 어느 <form>에 속하는지 지정한다. <input>의 form 속성과 <form>의 id 속성이 같아야 한다.
<form action="/action_page.php" id="form1">
<
input type="text" id="lname" name="lname" form="form1">
formaction type="submit", type="image"와 함께 쓰이며, 데이터 제출 시 데이터를 어디로 보낼지 적는다.
<form>에서 지정한 action 속성보다 우선순위가 높다.

<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
formenctype type="submit", type="image"와 함께 쓰이며, POST 메서드로 데이터를 서버에 제출할 경우 인코딩을 지정한다.
<form>에서 지정한 enctype 속성보다 우선순위가 높다.
<input type="submit" formenctype="multipart/form-data"   value="Submit as Multipart/form-data">
formmethod type="submit", type="image"와 함께 쓰이며, 데이터를 보낼 때 사용할 HTTP 메서드를 지정한다.
<form>에서 지정한 method 속성보다 우선순위가 높다.
<input type="submit" formmethod="post" value="Submit using POST">
formtarget type="submit", type="image"와 함께 쓰이며, form 제출 후 받은 응답을 어디에 표시할지 키워드를 적는다.
<form>에서 지정한 target 속성보다 우선순위가 높다.
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">

@그 외 <input>이 가질 수 있는 속성

name <input>의 이름을 지정한다. name 속성은 JavaScript에서 요소나 제출된 데이터를 참조해올 때 사용한다.
form을 제출할 때, name 속성이 있는 요소만 값이 전달된다.
value <input>의 기본값을 지정한다.
placeholder
<input>에 입력해야할 형식 샘플이나 간단한 설명을 힌트로 제공한다.
pattern  <input>의 입력값을 확인할 정규식을 지정한다. 예시 pattern="[A-Za-z]{3}" 

required  <input>을 필수로 작성해야 한다고 지정한다.
max, min, step <input>의 최댓값, 최솟값, 숫자간격을 지정한다.
maxlength, minlength <input>의 최대, 최소 문자 수를 지정한다.
size <input>의 너비 (문자)를 지정합니다
readonly  <input>을 읽기전용으로 지정한다. form 제출 시 때 읽기전용 필드의 값도 전송된다.
읽기전용 필드는 수정은 되지 않지만, 그 외 사용자와 상호작용(드래그, 복사 등)은 할 수 있다.
disabled <input>을 비활성화되도록 지정한다.
accept <input type="file>에서 선택할 수 있는 파일확장자를 지정한다.
alt <input type="img">에서 이미지의 대체 텍스트를 지정한다.
src <input type="img">에서 사용할 이미지의 URL을 지정한다.
checked type="checkbox", type="radio"과 함께 쓰이며, <input>의 기본(선택)값을 지정한다.
autocomplete text, search, url, tel, email, password, datepickers, range, and color 타입과 함께 쓰이며, <input>에 자동완성기능 on/off 여부를 지정한다. on으로 지정할 경우 이전에 입력했던 값을 드랍다운으로 표시해준다.

autofocus <input>이 페이지가 로드될 때 자동으로 포커스를 가지도록 한다.
dirname <input>의 텍스트방향을 지정할 수 있다. dirname의 `속성.dir`은 name '속성'과 같아야 한다.
(한글처럼 왼쪽에서 오른쪽으로 읽을지, 아랍어처럼 오른쪽에서 왼쪽으로 읽을지의 방향을 말한다.) 
list <input>에서 <datalist>에서 정의한 옵션을 사용한다. <input>의 list 속성과 <datalist>의 id 속성이 같아야 한다.
height, width 입력 필드의 높이와 너비를 지정한다.
multiple type="file", type="email"과 함께 쓰이며, 입력필드에 복수의 값을 입력할 수 있도록 지정한다.

+ Recent posts