더불어숲 숲을 그리다.

텍스트 관련 CSS - text-shadow text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 합니다. 그림자 값은 쉼표로 구분해 여러 값을 지정할 수 있습니다. 가로 거리와 세로 거리만 지정하면 나머지 값은 기본 값을 사용해 텍스트 그림자를 표시할 수 있습니다. 기본형 : text-shadow : none / 속성 값 설명 텍스트부터 그림자까지의 가로 거리를 입력합니다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만듭니다. 텍스트부터 그림자까지의 세로 거리를 입력합니다. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만듭니다. 그림자가 번지는 정도를 나타냅니다. 양수 값은 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시됩..

의자에 앉아 꼬박 밤을 새웠다. 어제 오전에 전원을 온 뒤로 커피 몇 잔만 마셨는데도 배고픔을 느끼지 못했다. 아빠가 금식을 하고 계시니 옆에서는 뭘 먹기도 마시기도 힘들고 그렇다고 자리를 비우기도 어려우니 식사는 그냥 거르기 일쑤다. 얼른 입원 병실을 배정받아 올라가고 싶지만 쉽지가 않았다. 전날 응급실 병상을 배정받고 나서 입원접수를 했는데 입원 병실을 선택해야 했다. 5인실, 2인실, 1인실 중 선택을 할 수 있지만 5인실만 선택을 하면 병실이 나지 않을 확률이 거의 100%란다. 응급실도 법적 체류 시간이 24시간이기 때문에 24시간이 지나서 일반 병실을 배정받지 못하면 다른 병원으로 가거나 퇴원을 해야 한다고 했다. 다른 병원으로 가야 된다고? 아니면 퇴원을 해야 된다고? 도대체 어디로 간단 말..

텍스트 관련 CSS - text-decoration text-decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있습니다. 기본형 : text-decoration : none / underline / overline / lint-through 속성 값 설명 none 밑줄을 표시하지 않습니다. underline 밑줄을 포시합니다. overline 영역 위로 선을 그립니다. line-through 영역을 가로지르는 선(취소 선)을 그립니다. 텍스트 관련 CSS - text-transform 영문자를 표기할 때 텍스트의 대,소문자를 원하는 대로 바꿀 수 있습니다. (한글에는 영향을 미치지 않고 영문자에만 적용) 기본형 : text-transform : none / capitaliz..

앰뷸런스에서 내리자 응급실로 들어가기 전 간호사와 의사 몇 분이 오셔서 혈압과 혈당을 재는 등 체크를 했다. 아빠를 간이침대에서 내려 의자에 앉힌 후 앰뷸런스 비용을 지불하고 응급실 접수를 했다. 응급실 앞쪽에 아빠를 모시고 가서 앉히고 짐을 들고 와 한쪽에 내려놓고 자리에 앉으니 그제야 응급실 대기실의 풍경이 눈에 들어왔다. 그리 넓지 않은 대기실의 의자는 딱딱했다. 초조함으로 가득한 곳. 이곳 병원 응급실은 대기실에서도 환자들이 앉아서 하염없이 기다리고 있었다. 앞쪽의 안내 전광판을 보니 절차에 따라 3시간을 대기하여야 응급실 병상을 배정받을 수 있을지 결정이 난다고 쓰여있었다. 3시간이라고? 설마... 그냥 통상적으로 써놓은 거겠지. 암환자를 3시간이나 이렇게 딱딱하고 불편한 의자에 앉혀놓겠어. 그..

텍스트 관련 CSS - font-style font-style은 글자를 이탤릭체로 표현할지 여부를 결정합니다. 기본형은 font-style: normal / italic / oblique 입니다. italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면 oblique는 원래 글꼴을 단지 기울어지게 표시할 뿐입니다. 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 웹에서는 주로 italic을 사용합니다. 속성 값 설명 normal 일반적인 형태로 표시합니다. italic 이탤릭체로 표시합니다. oblique 이택릭체로 표시합니다. 텍스트 관련 CSS - font-variant 영어 글꼴에서는 '작은 대문자'라는 독특한 설정도 할 수 있습니다. 작은 대문자란 대무자를 소문자 크기에 맞추어 작게 ..

암이라니... 멍한 상태로 병실에 들어가 잠들어 있는 아빠를 바라봤다. 뭘 어떻게 해야 하는 거지... 쿵쾅거리는 심장소리가 들리는 것만 같았다. 그렇게 맥없이 앉아있다가 엄마와 동생들에게 전화를 했다. 아빠한테 말도 하지 못한 채 하루 종일 인터넷 검색을 했다. 암, 간암, 췌장암, 암에 좋은 음식, 암센터, 간암 의사 등... 아무것도 모르는 현 상황에 대해 어떤 거라도 채워 넣기 바빴다. 아직 어떤 암인지에 대한 정확한 진단이 내려지지 않은 상황에서 가족들과 상의하여 전원을 하기로 하였다. 건강하시던 분도 아니고 온갖 병을 달고 살고 혈액투석까지 하는 분인데 암도 어려운 상황이라고 하니 좋다는 병원으로 가보자. 다음날 엄마가 함께 아빠에게 병원을 옮기자고 말하며 암이라고 말씀을 드렸다. 이젠 암까지..

텍스트 관련 CSS - font-size font-size속성으로는 글자 크기를 조절할 수 있습니다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있습니다. 글자 크기값을 직접 지정하는 단위 단위 설명 특징 em 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절합니다. 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 놓고 상대적 값을 계산해 다른 요소들의 글자 크기를 조절합니다. 만약 지정한 크기가 없다면 요소의 크기 16px이 기본값 1em으로 지정됩니다. ex x-height(엑스 하이트). 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절합니다. px 픽셀. 모니터에 따라 상대적 크기가 됩니다. 웹에서 폰트 크기를 지정할 때는 주로 px 단위를..

텍스트 관련 CSS - 웹 폰트 사용하기 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다. 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드한 후 표시하기 때문에 우베 제작자가 의도한 대로 텍스트를 표시할 수 있습니다. 웹폰트 제공 서비스로는 무료 오픈소스 글꼴을 제공하는 구글 폰트와 눈누 등이 있습니다. 웹폰트 단점 트래픽이 많이 증가합니다. 그나마 영문 웹폰트는 수십 KB 정도의 수준이나 한글 웹폰트는 수백 KB ~ 2천 여 KB 수준으로 용량이 큽니다.. 따라서 해당 폰트를 사용하기 전에 정말 그 폰트가 필요한지 고민해보는 게 좋습니다. 저작권 문제가 있..

텍스트 관련 CSS - font-family font-family : 글꼴을 지정하는 속성 font-size : 글자 크기를 지정하는 속성 font-weight : 글자 굵기를 지정하는 속성 color : 글자 색을 지정하는 속성 text-align : 텍스트 정렬 방법을 지정하는 속성 line-height : 줄 간격을 조절하는 속성 font-family 이 속성은 태그를 비롯해 , 태그처럼 텍스트를 사용하는 요소들에서 주로 사용합니다. 예를 들어 글꼴을 굴림체로 하고 싶다면 p {font-family:굴림;} 글꼴을 맑은고딕체로 하고 싶다면 p {font-family:"맑은 고딕";} 속성 값은 주로 큰따옴표를 사용합니다. 예를 들어 텍스트 글꼴을 지정할 때 "맑은 고딕"처럼 두 단어 이상으로 된 글..