뚜기의 메모장

화려한 장식속에 임금의 권위와 위엄의 의미를 가지고 있는 '편종'입니다.

국립국악원에서 연주하는 보허자와 낙양춘을 동영상으로 가져왔는데요 가장 뒤에 종처럼 생긴 악기가 편종입니다.

소개

편종은 중국의 가장 오래된 전통악기로 쇠로 만든 종을 위아래 여덟개씩 16개의 종을 틀에 달아 소뿔로 만든 '각퇴'로 종의 돋을새김한 곳을 때려서 연주하는 유율 타악기 입니다.

우리나라에는 고려 예종 (1년) 1116년 송나라에서 처음 수입되어서 이후 궁중제례악에 사용되었습니다.

중국에서 수입한 편종은 종의 크기를 달리하여 음정을 다르게 내었는데

세종시대 부터는 주종소를 두고 직접 제작하게 했는데 종의 크기는 모두 같고 두께를 다르게 제작하여 음정을 내었습니다.

12율 4청성, 16개의 음정을 웅장하고 날카롭게 전달하며, 궁중음악에서 매우 중요하게 다루어졌다고 합니다.

편종의 모습

두개의 방대위에 목사자 한쌍을 앉히고 그 위에 종을 달 나무틀을 세워 양편에 용두를 조각하고 틀 꼭대기에는 다섯마리의 목공작을 세워 장식되어 있습니다.

용은 임금의 권위를 나타내고 사자는 수호자의 의미와 위엄의 의미를 전달합니다.

편종은 국악기중에 재료가 가장 많이 들어가는 악기입니다. 총 40여가지의 재료가 필요하며 동312근 철208근을 필요로 합니다.

특종

편종가 마찬가지로 중국 고대 아악기의 한가지이나 예종 11년에 들어올 당시 대성아악에는 편성되지는 않았습니다.

조선 세종 때 박연이 아악을 정비할 무렵 『주례도』를 참고하여 황종에 맞추어 만들어 궁중 아악에 사용하여 왔으며

제례악의 시작을 알리는 악기로써 특종의 종은 편종의 종보다 2배가 크며 한개의 종으로 된 유율 타악기 입니다.

국악기 소개 11번째 '퉁소' 입니다.

많이 들어본악기이지만 소리와 이미지를 떠올리려려면 많이 생소하지요?

함경남도 북청군 일대에서 해마다 음력 정월 대보름을 전후하여 며칠동안 잔치하며 연희하는 사자놀음입니다.

1분정도에 보이는 악기가 퉁소 입니다. 크기가 굉장히 크죠??

소개

퉁소 는 한자로는 洞簫 '동소'이지만 '퉁소'라 읽습니다.

뜻은 한쪽 끝이 막힌 대금과 달리 단소처럼 아래위가 다 뚫려 통(퉁)해 있다는 뜻을 가지고 있습니다.

연주 방법 역시 단소와 유사하여 취구에 입술을 대고 관 속으로 입김을 불어넣는 방식으로 연주합니다.

퉁소는 높고 청아한 소리를 내는 단소보다 크기가 더 크기 때문에 더 굵고 낮은 소리를 내는데 대금과 음색이 비슷합니다.

퉁소의 크기와 구조적 특징으로 인해 대금과 같이 복잡하고 세밀한 표현력을 갖고 있지는 않지만 이 단순한 표현 방식이 퉁소의 매력이라고 합니다.

역사

퉁소는 중국 한나라 무제 때의 악사 구중이 강족의 관악기를 개량하여 만들었다고 합니다.

우리나라에는 고려시대 이전에 전래된 것으로 보이며 궁중음악에 사용하는 퉁소와 민속음악에 사용하는 퉁소, 두 종류가 남아 있습니다. 

하지만 20세기 중반이후 퉁소의 전통이 급격히 사라져 우리들에게는 낯선악기가 되었지만 조선 중기까지 향악 당악 편성의 궁중음악 연주에 두루 쓰였고 민간에서도 모르는 이가 없을 만큼 친근한 악기 였습니다.

현재는 북청사자놀음의 반주악기나 시나위등에서만 사용되고 있습니다.

종류

퉁소는 악기의 규격이 정해지지 않아 시대마다 지역마다 크기나 지공이 많이 달랐는데, 대략 50~70㎝ 사이이며 내경이 2.2~4㎝ 사이이며 고5~6개의 지공을 가지며 민간에서 쓰이는 퉁소와 궁중에서 쓰였던 퉁소 2가지만 전해져 오고 있습니다.

민간음악에서 사용하는 퉁소는 대금과 같이 갈대청을 울려 소리를 내는 청공을 가지고 있는것이 특징이고, 궁중음악에서 사용하는 퉁소는 청공을 가지고 있지 않습니다.

p.s 성경이나 고전문학에 번역된 것을 보면 현악기는 거문고요 관악기는 퉁소로 번역되어있습니다.

지금 퉁소는 대중적이지 않지만 번역될 당시 사람들의 인식속에 퉁소가 국악기를 대표할 만큼 친숙한 악기여서 그렇게 번역되지 않았을까 생각이 드네요.

결합자 combinator

두개 이상의 셀럭터들의 관계를 타겟팅하기 쉽게 하기 위한 기호 이다.

[ > ] child selector - 자식요소 결합자 >  직계 자손 

[ + ] adjacent sibiling selector -  인접 형제 요소 결합자, 뒤에오는 형제 중 첫번째 

[ ~ ] general sibling selector - 형제 요소 결합자, 뒤에오는 형제 모두를 포함한다

_(띄어쓰기) descenant selector - 후손식별자, ex) div p {}

selector (선택자) 기호

- css selector은 특정한 HTML 태그를 선택하여 다중으로 CSS효과를 부여하는 역할을 한다.

- 전체를 선택하는 * 선태자와 class="클래스명" , -id="아이디명"  선택자가 있다.

 ex) <div class="ex">
 ex) <div id="ex">

- <style> 사용시 class는 기호[ . ] id기호는 [#]을 사용한다.

 ex) <style> .클래스이름{font-size:20pt; color : red} </style>
 ex) <style> #아이디이름{font-size:20pt; color : red} </style>

[ * ]

- asterisk 라고한다.

- 모든 요소를 선택하며 전체 스타일에 모든 요소를 적용할때 사용한다

 ex) *{margin: 0; padding: 0}

[ . ] = class  

- 다른태그에 동일한 class 값을 줄 수 있다.

- 한태그에 다중 클래스명 사용할 수 있다 (태그명 class="클래스명1 클래스명2 ..."

[ # ] = id 

- 다른태그에 동일한 id 값을 줄 수 없다.

- 점프메뉴(한페이안에서의 이동)를 사용할때 목적지 역할을 한다.

* 하나의 태그에 class와 id를 모두 네이밍할 수 있다

* 선택자 동일 사용시 우선순위는 태그명 < class < id .

   해당 태그를 더 자세히 불러주면 줄수록 우선순위는 높다 

class 와 id 사용의 구분

- 학교를 비유하면 class는 3학년 1반을 지칭하며 id는 3학년1반의 누구를 지칭한다.

- 자주 사용되는 스타일에 class를 적용한다.

- 고유의 값을 가질때, 가져야할 때 id값을 를 사용한다. 

CSS 기본 규칙

네이밍 규칙

파일 네이밍시 (html/css 동일)

- 포함할 수 있는 문자는 영문(대소문자), 숫자, _, - 까지 허용된다.

- 처음 시작글자는 영문 소문자로만 시작할 수 있다.

- 조합 형태는 -> 의미 -> 순서 -> 상태를 기본 순서로 사용한다.

- 단어의 조합으로 네이밍시 띄어쓰기 대신 _(언더스코어) 를 사용한다.

파일내 태그 네이밍시

- 모든 속성은 숫자, 대문자, 특수문자로 시작할 수 없으며, 영문 소문자로만 작성한다.

- 2가지 단어를 조합하여 표현할 때 "카멜표기법 =>noticeTitle", "_(언더스코어)표기법 => notice_title" 을 사용한다.

- 1,2 와 같은 한자리 정수는 사용하지 않으며 01, 02와 같이 네이밍 하여 사용할것을 권장한다.

- 방향에 따라 속성을 지정해야 하는 경위 top, right, bottom, left 시계방향 순으로 작성한다.

- css는 들여쓰기를 하지 않는다.

- 주석 기호와 내용 사이에는 반드시 공백이 한 칸 있어야 한다. 

- 구분할 목적으로 넣은 빈 줄은 한줄을 넘기지 않는다.

- 불필요한 공백을 최소화 한다.

- 클래스와 클래스간 교차속성(한 태그에 두 개의 속성이 동시에 선언되는 것)을 사용하지 않는다. 

- css컬러는 웹컬러인 #000을 권장한다.

- 속성값이 0이면 단위를 표시하지 않는다.

- 상하좌우의 속성값이 동일하면 축약한다.

CSS기본형태

태그 {스타일 속성(Property): 값(value);...}

- CSS는 여러가지 속성을 한꺼번에 적용할 때가 많은 이럴경우 ;(세미콜론) 을 사용해서 속성과 속성을 구분한다.

    ex) body {font-size:20pt; color : red)

- 여러가지 태그에 같은 스타일을 적용할 수 있다

    ex) h1, ul, p {font-size:20pt; color : red)

- 여러가지 태그에 같은 스타일을 적용하는데 부모 자식관계가 성립되는 태그라면 ,(쉼표) 를 사용하지 않아도 된다.

    ex) ul li {font-size:20pt; color : red)

- selector (선택자)를 속성을 이용해 레이아웃과 스타일을 자유롭게 지정할 수 있다. 

주석

CSS 주석은 /*내용 */

HTML 주석은 <!-- 내용 --!> 

- 실행시 수행되지 않는다

- 문자열을 메모처럼 사용할 수 있다.

- 가독성을 위해서 위치위치에 적절히 사용해야 한다.

- 단축키 comman + /

절대단위

절대적인 크기가 정해져 있는 단위

px, 픽셀, pixel = 웹에서 가장 많이 사용되는 단위  1/96 inch  

pt, 포인트. point = 1pt = 1/72 inch 

in 인치 inch = 1인치는 2.54cm

cm 센치미터 = .

mm 밀리미터 = .

pc 파이카 picas = 활자의 크기를 나타내던 옛말, 지금은 잘 사용하지 않는다. 1파이카는 12포인트

상대단위

부모 요소의 크기를 기준으로 상대값이 정해진다.

고정형 웹에서 반응형 웹으로 넘어오면서 많이 사용되고 있다.

em

- em 단위는 body{font-size:16px} 값을 기준으로 사용한다 

- 부모 요소의 글꼴에 비례. 때문에 기준값에 따라 값이 바뀐다.

- 2em은 현재 글꼴 크기의 2배를 의미한다.

%

- 100% 를 기준으로 하는 상대크기.

- 반응형 웹에서 많이 사용하게 되는 단위.

이 외에

ex, rem, vw, vh등등의 상대단위가 있지만 거의 쓰이지 않아서 pass (저는 아직 사용해보지 못해서~)

* em을 사용하는 이유는 신속하게, 실속적으로 폰트 크기를 바꿀 수 있기 때문에 편하다.

* html5로 넘어오면서 대부분의 웹  브라우져 default font 크기의 값은 12pt =  16px = 1em = 100%

* 단위 변환 사이트 http://pxtoem.com/