반응형 웹과 뷰표트 단위

반응형 웹

다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법

뷰포트

현재 화면에 보여지고 있는 영역
기기별로 뷰포트가 다르기 때문에 동일한 웹페이지라도 기기에 따른 배율 조정이
발생해 화면의 크기가 다르게 보이는 현상이 나타난다.
예) h1은 기본 32px이다. PC에서는 32px로 제대로 나오지만
모바일은 뷰포츠가 작아서 왜곡되어서 나온다.

뷰포트 크기에 반응하는 단위

뷰포트의 크기를 기반으로 값을 계산하여 크기를 결정하는 단위들

미디어 쿼리

미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)이다.
모든 미디어 쿼리는 다음 두 가지 구성요소를 지니고 있다.

• 미디어 타입
• 조건에 대한 물음 (쿼리)
  미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다!
  그러나 주로 사용되는 것들은 거의 정해져 있다시피한다.

모듈화 디자인

컴포넌트 만든다

반응형 웹 개발의 대세는 ‘페이지 만들기’에서 ‘컴포넌트 만들기’로 이동했다고 해도 과언이 아니다. 웹 개발(또는 프로그래밍)에 있어 컴포넌트(Component)란 독립적이고 재사용이 가능한 모듈을 뜻한다.
컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조갑을 이용해 화면을 구성할 수 있어 효율이 좋아진다.

모듈화 디자인의 이점

• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는
  자연스럽게 반응형 페이지가 된다.
• 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
• 페이지의 일관성을 유지하기가 용이하다.
• 만들 때마다 디자인 할 필요가 없다.

상속과 공용키워드

상속

상속(Inheritance)란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것

예) ul{ color: violet; }
li요소를 선택하지 않아도 상위요소에서 주어진 색이 반영이 된다.

상위 요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않는 속성도 있다.

공용키워드

스타일 속성마다 상속 가능 여부가 기본적으로 설정되어 있지만, CSS에서는 스타일 속성의 상속여부를 제어할 수 있는 3개의 키워드를 별도로 지원한다.
모든 속성에 적용할 수 있는 키워드이므로 ‘전역 키워드’라고도 부르기도 한다.

애니메이션 효과

애니메이션

애니메이션의 사전적 정의는 ‘움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영기법 또는 그렇게 만들어진 영화’이다.
CSS는 웹페이지 상에서 표시되는 컨텐츠가 TV애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation속성을 지원한다.
(속성값 변화뿐만 아니라 다양한 프레임을 가지고 움직이는 요소를 만들 수 있다.)

@keyframes

애니메이션을 표현하는 여러개의 프레임은 @keyframes 모듈을 이용해 정의한다.
백분율을 이용해 프레임을 나누거나, 별도의 키워드로 간단하게 나눌 수도 있다.

애니메이션(animation)

animation은 단축속성이며, animation의 다른 하위 속성들과 함께 지정하면
애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있다.

변형과 전환 효과

변형과 transform 속성

웹 요소에는 CSS를 사용하면 변형을 적용할 수 있다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 x축과 y축을 기준으로 바꾼다.
변형을 적용하기 위해서는 CSS의 transform 속성을 사용하는데, 여기에서 CSS가 지원하는 다양한 변형 관련 함수들을 속성값으로 지정한다.

transition 속성을 이용한 변화

transform 속성을 이용한 변형은 좌표 평면 상에서 각 축의 값을 변경해 이루어지는 비교적 단순한 형태의 변형 (크기기반) 이다.

transition속성을 이용하면 요소에 지정되어 있는 스타일 속성을 완전히 다른 스타일로 변화시킬 수 있다.
또한 스타일이 변화할 때의 시간이나 변화 속도 등을 추가로 지정할 수 있어 다양한 애니메이션 효과를 만들 수도 있다.
단축속성으로, 변화를 주고자하는 속성이나 실행시간, 실행방법, 그리고 딜레이 시간등에 대한 정보를 포함할 수 있다.

transition의 하위 속성들

transition-timing-function

transition에 의한 변화가 실행될때는 실행시간(duration)을 지정해 원하는 시간 동안 변화가 일어나게 할 수 있다. 그리고 transition-timing-function속성을 추가 정의하면 실행기간 동안의 속도 변화방식을 지정할 수 있다.
속성값으로는 별도의 키워드를 지정한다.

의사클래스&의사요소

의사클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로,
요소가 어떤 특정한 상태가 되었을 때의 요소를 선택하겠다는 의미이다.
( : 1개 사용 )

선택자:의사클래스{속성명: 속성값; }

예) h1:hover{color: red; }
-h1로 지정되어있는 요소에 마우스커서가 올라가면 글자를 빨간색으로 하겠다.

자주 쓰이는 의사클래스들

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로,
이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수있다.
( :: 2개 사용 )

선택자::의사요소{속성명: 속성값; }

예) li::first-letter{font-size: 30px; }
-li로 지정되어있는 요소의 첫 번째 글자들만 30px로 변경하겠다.
(기본값은 16px)

자주 쓰이는 의사 요소들

요소의 유형

요소의 유형에는 ‘블록 레벨 요소’와 ‘인라인 요소’가 있다.
‘블록 레벨 요소’ 는 자신이 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
예) div, p, h1 등등
‘인라인 요소’는 자기에게 필요한 만큼의 공간만 차지한다.
예)span, a 등등
이때 css의 속성을 잘 활용하면 요소가 ‘블록 레벨 요소’, ‘인라인 요소’의
역할을 하도록 지정해줄 수 있다.
그 속성이 바로 ‘display’ 속성이다.

display 속성
요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
즉, 요소의 유형을 변경할 수 있다.

예1) 블록레벨인 div요소를 인라인으로 처리하기
div{ display: inline; }

예2) 인라인 요소인 a요소를 블록레벨로 처리하기
a{ display: block; }

display 속성에 지정할 수 있는 대표적인 설정들

문서의 흐름

웹 요소들이 화면에 표시되는 순서는 기본적으로 HTML 문서 내에서 태그가 쓰여진 순서를 따른다.

글을 쓸 때 왼쪽에서부터 오른쪽 방향으로 써나가고
글자 수가 채워지면 위에서 아래로 줄을 바꾸며 써내려가는 자연스러운 흐름이 있듯
웹 브라우저가 화면 위에 요소를 표시할 때에도 마찬가지로 이를 처리하는 기본적인 흐름이 있다.
글과 마찬가지로 왼-오 위-아래 동일한 흐름으로 진행된다.

float

css의 float 속성은 요소를 문서의 흐름에서 제외시킨 채 부모요소 또는 루트요소를 기준으로 위치를 변경한다.

선택한 요소가 문서의 흐름에서 제외되어
상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배지되도록 하는 특징이 있다.

사용가능한 속성값으로는 왼쪽을 뜻하는 left, 오른쪽을 뜻하는 right,
그리고 float를 적용하지 않는 none(기본값)이 있다.

(if) 이미지와 p태그를 순서대로 입력한다면
위쪽에 이미지 두 개, 아래쪽에 문장이 오게 될 것이다.

이때 float를 적용하게되면 요소를 잡아서 흐름과 무관하게 배치가 될 것이다.

float의 역효과

float 속성을 적용한 요소를 ‘부동 요소’라고 부르기도 한다.
부동요소는 잘 이용하면 유용하지만 위치를 이동하면서 float 요소를 사용하지 않은
요소들의 공간에도 영향을 주어 때로는 역효과를 가져올 수 있다.
이러한 상황에 대응하기 위해 사용하는 속성이 있다.
그 속성이 바로 ‘clear’ 속성이다.

위에서 예시로 들었던 (if)상황에서 float 요소를 사용하여 이미지의 위치는 배치를 하였다.
하지만 p태그의 위치가 애매하게 이미지의 사이에 들어갔을 것이다.

이때 clear속성을 사용하게 되면 p태그는 제자리로 돌아간다.

위치정하기

position은 문서 상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면,
top, bottom.right,left 가 최종 위치를 결정하는 방식이다.

position: 이렇게 배치할거야;
top: 윗면에서부터 아래로 얼만큼 떨어트릴거야;
right: 오른쪽면에서부터 왼쪽으로 얼만큼 떨어트릴거야;
bottom: 아랫면에서부터 위쪽으로 얼만큼 떨어트릴거야;
left: 왼쪽면에서부터 오른쪽으로 얼만큼 떨어트릴거야;

박스모델의 4면을 기준으로 상하좌우 위치 지정은 필요에 따라 선택적으로 적용

position 유형

박스모델은 웹페이지의 요소를 박스 형태로 구성하고 요소의 크기와 공간배치를 설명하는 CSS의 핵심 개념이다.
모든 HTML요소는 박스 모델에 따라 배치된다.
각 요소는 4가지의 주요 영역으로 구성된다.

1.콘텐츠(Content)

요소의 실제 콘텐츠가 표시되는 영역이다.

2.테두리(Border)

박스를 둘러싸는 테두리
스타일, 두께, 곡률, 색상을 지정할수 있다.

3.패딩(Padding)

콘텐츠와 박스의 경계인 Border사이의 내부여백
콘텐츠에 대해 투명하며 색상을 지정할 수 없다.

4.마진(Margin)

박스의 가장 바깥 영역 인접한 요소와의 간격을 정의한다
패딩과 마찬가지로 색상을 지정할 수 없고 투명하다.

배경추가하기(background)

컨텐츠와 어울리는 적절한 배경을 추가함으로써 컨텐츠를 더욱 돋보이게 만들 수 있다.
박스모델에 배경으로 추가된 색상이나 이미지 등은 박스모델의 바깥쪽 여백을 제외한 나머지 영역안에서 요소의 컨텐츠를 뒷받침한다.

단축속성 background 의 하위 속성들

색상을 지정하는 방법

글자 색을 지정할 때에는 color속성을 사용하며 색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 대해 동일하다.

• 키워드:색상을 나타내느 키워드(영단어)를 입력
• rgb함수:rgb함수에 수치를 입력해 생산을 결정한다.
• hsl함수: hsl함수에 수치를 입력해 색상을 결정한다.
• 16진수값:빨강,초록,파랑의 비율을 16진수로 표현해 색상을 결정한다.

rgb 함수

빛의 3원색인 red, green, blue의 줄임말
빨강, 초록, 파랑 각 생상의 비율을 지정하여 색상을 결정할 수 있는 rgb함수와
투명도를 추가 지정할 수 있는 rgba 함수를 각각 지원한다.

rgb(레드값, 그린값, 블루값)

-%(per)수치로 많이 사용한다.

rgba(레드값, 그린값, 블루값, 투명도)

-a는 0~1 사이의 실수를 사용한다. 예)0.5
숫자가 올라갈수록 투명도가 높아진다.

hsl 함수

색조(hue)와 채도-탁함과 선명의 정도(saturation), 조도-밝기(lightness)를 각각 지정하여 결정하는 함수
마찬가지로 투명도를 추가로 지정하고자 할 때에는 hsla함수를 사용한다.

hsl(색조값, 채도값, 조도값)

-각도를 입력하여 색상을 선택하는 항목.

hsla(색조값, 채도값, 조도값, 투명도)

-a는 0~1 사이의 실수를 사용한다. 예)0.5
숫자가 올라갈수록 투명도가 높아진다.

16진수 값

해시(#)기호로 시작하는 여섯가지 16진수 값을 입력하는 방법
이때 입력하는 16진수 값을 ‘RGB 색상 코드’라고 부르기도 한다.

#RRGGBBAA

-레드,그린,블루,투명도 순서대로 2글자씩 주어진다. - 포토샵에서 주로 사용했던 코드
-16진수란 0 1 2 3 4 5 6 7 8 9 A B C D F 로 이루어져있다.
F는 15라고 생각하면 되고 00~FF까지로 이루어져있다. 이때 FF는 255라고 생각
예)#FFFFFF-흰색 #000000-검은색 (AA는 투명도라 생략가능)

글꼴바꾸기

font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성이다.
font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있다.
입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값을 지정한다.
이 경우 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용된다.

웹 폰트사용하기

웹 폰트란 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도
웹 서버로부터 이를 제공받아 사용할 수 있는 ‘웹 전용글꼴’을 뜻한다.
font-family를 이용한 글꼴 적용시 잘못 입력된 글꼴이거나
시스템에 설치되어 있지 않은 경우에는 요소에 적용되지않는다.
하지만 웹 폰트를 사용하면 그런 문제가 발생하는 것을 방지할 수 있다.
-현재 사용하는 웹페이지가 주로 크롬이니 구글에서 제공하는 폰트를 사용하면 된다.
여기에 구글에서 제공하는 폰트가 웹폰트다.

텍스트 꾸미기

텍스트에도 크기, 색상, 정렬 방식 등의 다양한 속성이 존재한다.

단위 두 개더 알아보기

크기를 지정할 때에는 수치와 함께 단위를 지정하곤 한다. 이는 글자크기에 대해서도 마찬가지이다.

CSS

캐스케이딩 스타일시트(Cascading Stylesheet)

• Cascading:폭포같은, 계속되는, 연속적인
• Style: 멋을 내다.
• Sheet:한 장을 세는 단위(종이나 문서)

연속적으로 스타일을 정의하는 문서

CSS는 스타일을 정의하는 문서형식이다.
태그와 태그가 중첩되어 연속적인 구조를 지닌 HTML문서에 스타일을 추가한다.

CSS의 역할은 HTML 문서에 스타일을 추가하는 것이다.

CSS의 문법

HTML 코드가 다수의"태그"로 구성되는 것처럼, CSS코드는 다수의 '스타일 선언문'으로 구성된다.

스타일 선언문의 형태

• 선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
• {중괄호}:선택한 요소에 적용할 스타일을 정의하는 영역
• 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보
• 속성값: 어떻게 정의하고 싶은지에 대한 정보

CSS에게도 주석이 존재한다.

현재 우리가 사용하고 웹개발 표준으로 인정받고있는 CSS는 'CSS3'이다.

CSS문서

독립적으로 존재할 수는 있지만, HTML문서와 함께 사용하지않으면 단지 하나의 텍스트 문서에 불과할 뿐이다.
즉, 혼자서는 할 수 있는 일이 없다.
문서에 정의된 스타일이 웹브라우저 화면을 통해 보여지도록 하기위해서는 반드시 HTML문서 작성이 먼저 이루어져야한다.

HTML에 CSS를 더하려면

• 인라인 스타일:태그에 직접 기술하기
  태그에 style속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식
  제일 간단한 방법이고 선택자는 필요가 없으나 웹컨텐츠와 스타일시트를 분리하기위해서는 사용하지않는 편이 좋다.

• 스타일 태그 :스타일 시트를 위한 태그를 추가하여 기술하기
  HTML문서에 태그를 추가하여 그 안에 CSS코드를 작성할 수 있다. '내부 스타일시트'라고 표현하기도 한다.

• 문서간의 연결: 스타일 시트 문서를 따로 작성하여 HTML문서와 연결하기
  확장자가 *.css인 스타일 시트 파일을 생성해 그 안에 CSS코드를 작성하고,HTML문서에 이를 연결하는 방식.
  이때는 <link>태그를 사용한다.
  • href:연결하고자 하는 외부 소스의 url을 기술하는 속성
  • rel(관계):현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
  -<link>태그는 HTML문서의 <head></head>내부에서 사용해야함.

인라인 스타일은 우선적으로 적용이 된다.
인라인스타일이 아닌 경우 나중에 쓰여진 스타일 선언문이 적용된다.

선택자 유형

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정된다.
이때 요소는 단 하나만 선택할 수도 있고 여러 개를 동시에 선택할 수도 있다.
CSS는 아래와 같이 여러가지 유형의 선택자를 지원한다.

• 전체 선택자:문서 내 모든 요소를 선택 - 사용기호: *
• 태그 선택자:특정 태그로 만들어진 모든 요소를 선택 - 사용기호: 태그명
• 클래스 선택자:특정 클래스 값이 지정된 모든 요소를 선택 - 사용기호: .클래스값
• 아이디 선택자:특정 아이디 값이 지정된 요소를 선택 - 사용기호: #아이디값
• 그룹선택자:여러 유형의 선택자를 한꺼번에 선택 - 사용기호: 선택자,선택자,선택자...
• 등등..

박스모델(box model)

브라우저 화면은 가로와 세로를 축으로 하는 2차원공간이다.
따라서 브라우저를 통해 렌더링 되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다.

너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현하고, 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다.

CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며
CSS는 영역별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공한다.

박스모델의 세부영역들

• 콘텐츠영역: 요소내에 포함된 콘텐츠를 표시하는 영역-width,height
• 안쪽여백: 테두리 안에서 콘텐츠 주변을 감싸는 여백-padding
• 경계선(테두리): 콘텐츠와 안쪽 여백을 둘러싸는 테두리-border
• 바깥쪽 여백:테두리 바깥에서 요소를 감싸는 여백-margin

테두리 스타일

테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 도와주는 유용한 영역이다.
테두리 스타일을 정의할 때에는 단축속성인 border를 사용하서나 border의 하위속성을 개별적으로 사용하는 방법을 사용한다.

• border-width : 테두리의 두께를 지정
• border-style : 점선,실선,겹선 등으로 테두리 모양을 지정
• border-color : 테두리의 색상을 지정
• border : 테두리의 두께, 모양, 색상등을 한번에 지정
• border-radius : 테두리 모서리의 곡률을 지정(그림에서 '반경'에 해당하는 길이를 정해주면 그만큼 둥글어진다.)
  네개의 모서리에 서로 다른 값을 지정할 수도 있다.

여백 다루기

여백의 안쪽, 바깥쪽 여부는 테두리를 기준으로 정해진다.
박스 모델의 여백에는 네 개의 면이 존재하는데, 속성값의 사용갯수에 따라 네면의 여백 크기를 달리 정할 수 있다,

1. 여백의 모든 면에 동일한 값을 지정 - (예)margin:10px
2. 위아래 여백과 왼쪽 오른쪽 여백의 값을 따로 지정 - (예)margin:10px 20px
3. 윗쪽 여백, 왼쪽 오른쪽 여백, 아래쪽 여백 순서로 값을 지정- (예)margin:10px 20px 15px
4. 위,오른쪽,아래,왼쪽 순서대로 각각 따로 지정 - (예)margin:10px 20px 30px 15px

width나 height를 사용하면 컨텐츠 영역의 크기를 결정할 수 있다.
여기에 padding 속성을 추가 정의 하면 여백이 생기면서 요소가 기존보다 더 커지게 되는데, 원치 않을경우에는 box-sizing이라는 속성을 사용할 수 있다.

시맨틱 마크업?코드?

바로 이전 글에서 시멘틱 코드에 대해서 간단히 다뤘었다.

시맨틱 코드가 시맨틱 마크업보다 더 넓은 의미라고 생각하면 된다.
이전에 다루었던 시맨틱 코드에 대하여 한번 더 복기 해보고 시맨틱 마크업에 대해 간단히 알아보는 시간을 가져보겠다.

시맨틱(의미론적인) 코드

다른점개발자와 브라우저에게 의미를 제공한다.
컨테이너코드와 역할이 거의 같지만 태그의 이름이 요소의 목적이나 역할을 강조하는 의미로 지어져있다라는 차이점이있다.
검색엔진에 좋은 단서가된다.

시멘틱태그의 장점

대부분은 컨테이너 태그(span/div)와 같이 특별한 스타일을 제공하지 않지만 아래와 같은 이점이 있다.

• 검색 엔진은 시멘틱 태그를 웹페이지를 검색하는데에 있어서 중요한 단서로 본다
• 적극적으로 사용하게되면 시각장애가있는 사용자가 화면판독기,음성인식기로 페이지를 탐색할때 참조가된다.
• 중요한 내용을 조금더 강조하는 효과가 있다. 웹 접근성을 향상 시킬 수 있다
• 코드의 가독성이 좋아진다.
  이름으로 역할을 강조하기때문에 코드를 볼때 조금더 빠르게 코드를 캐치할 수 있다.
• 컨테이너의 남용을 방지할 수 있어 코드쓰기가 편하다.
  • 컨테이너의 남용? 웹컨텐츠를 많이 페이지에 채우게되면 스타일이나 div가 많아짐
    많아지게되면 코드를 작성하기에도 불편해짐

시멘틱코드의 종류

• <articcle>-독립적인 컨텐츠
• <aside>-별도의 컨텐츠
• <details>-추가적인 상세정보
• <figcaption>-figure의 자막
• <figure>-설명이 붙는 독립컨텐츠
• <footer>-맺음말
• <header>-머릿말
• <main>-주된 (메인) 컨텐츠
• <nav>-네비게이션링크
• <section>-컨텐츠의 한 섹션(절)
• <summary>-detail의 헤더
• <time>-강조할 시간

시맨틱 마크업

의미

시맨틱이란 '의미론적인'이라는 의미를 가지고 있으며, 시맨틱태그는 개발자와 브라우저에게 어떠한 의미를 제공한다.
마크업이란 HTML 태그로 문서를 작성하는 것을 의미한다.
따라서, 시맨틱 마크업이란, 의미가 잘 전달 되도록 HTML태그를 사용하여 문서를 작성하는 것정도로 해석된다.

사용하는 이유

• 의미론적인 구조이기 때문에 '요소가 가진 목적이나 역할이 무언인지'를 나타내준다.
• 검색의 최적화를 높여준다. 검색엔진은 시멘틱태그(태그명)을 중요한 단서로 본다.
  (웹페이지는 제작도 중요하지만, 검색을 통해 다수의 유저들에게 노출되고 사용되는 것이 더욱 중요하다)
• 코드의 가독성을 높여준다.
• 컨테이너(div 또는 span)의 남용을 방지할 수 있어 코드 작성이 용이함.
• 시각 장애가 있는 사용자가 화면판독기로 페이지를 탐색할 때 참조된다.