IT 포스팅
2011. 7. 23. 02:32
이제는 전문적으로 웹 페이지를 디자인하는 사람이 아니더라도 CSS가 웹 디자인의 핵심 역할을 하는 것이라는 것정도는 알게 된 것 같습니다. CSS가 웹 표준의 중요한 핵심요소로 자리매김한 후 스마트폰이 뜨면서 사용되는 인터넷 브라우저도 다양해지고 기기 또한 하루가 다르게 새로 생기다보니 이기종간 표준의 중요성이 한층 높아진 탓일 것입니다.
책을 만들다보면 편집자도 어쩔 수 없이 내용을 이해하기 위해 예제도 테스트해보고 관련 자료도 뒤져보고 하게 됩니다. 그러다보면 본의아니게(?) 열학도 못지 않게 학습하는 재미에 푹 빠져들곤 합니다.
우습기도 하지만, 처음 IT 책을 만드는 편집자에 입문할 때만 해도 이런 생각을 했습니다. "이러다 IT쪽 박사 되는 거 아냐?" 그런데, 이상하게도 석사는커녕 항상 깊은 지식의 한계에 좌절하는 경우가 많습니다. 그도 그럴듯이 현장에서 하는 공부가 진짜 공부이듯이 단순히 그것을 독자에게 어떻게 전달할 것인가의 관점에서 학습하다보니 깊이 있는 학습을 할 수가 없는 경우가 많습니다.
편집자 세계에서는 이런 말이 있습니다. "영어를 잘 하는 사람이 영어 책을 잘 만드는 것이 아니다." 편집자는 어떤 때는 깊이 있는 지식을 갖고 있는 경우가 해가 되는 경우가 있습니다. 타깃하는 독자보다 훨씬 내공이 높을 때는 진짜 독자의 눈높이, 그리고 그들의 절박한 심정을 간과하기 쉽기 때문이죠.
그래서 편집자는 구체적인 기술의 깊이를 좇기보다는 넓게 두루 볼 줄 아는 안목과 독자가 어떤 사람들이고 진짜 원하는 게 무엇인지를 연구하는 데 더 많은 시간을 투자합니다. 그래야 저자와 차별적으로 협업하여 좋은 결과를 얻을 수 있기 때문이죠. 물론, 철학이나 예술, 그리고 상당한 지식의 내공이 필요한 분야에서는 편집자 또한 어느 정도 지식의 깊이는 갖추어야 하는 것 같습니다.
그래도 어느 분야이든지 해당 분야에 조예가 깊으면서도 편집자로서도 내공이 뛰어나다면 더할나위없이 좋은 것은 분명합니다.
제목은 "마진과 패딩"으로 달아놓고 쓸데없는 편집자 얘기를 했네요. ^^
블로그를 운영하다보니 HTML이나 CSS를 모르면 여간 불편한 게 아니더라구요. 다행히 제가 요즘 진행하고 있는 <처음부터 다시 시작하는 HTML5 & CSS3>(가제)(2011, 양용석) 때문에 많은 도움을 얻고 있습니다. 아마 웹 디자인에 입문하는 사람들이 가장 많이 접하고 실제로 많이 사용하게 될 개념이 마진과 패딩의 개념일 텐데요. 아래 그림이 마진과 패딩의 개념도입니다.
저도 그림만 봐서는 저게 뭐지 했는데, 실제 예를 보니 감이 팍팍 오더라구요.
로드북 블로그의 우측 상단에 보면 로드북의 개인정보(?)가 들어가 있는데요. 이것을 갖고 마진과 패딩의 개념을 간단하게 설명하게 보겠습니다. 물론 책에는 다른 예제가 들어가 있습니다.
여기는 블로그에서 "사이드바"라는 모듈 영역을 제공해서 사용자가 지맘대로 디자인을 추가할 수 있도록 해놓은 곳인데요. 웹에서 검색해보시면 여기에 사용자 모듈을 추가하는 방법은 다양하게 나와있으니 참고하시고 간단하게 위 모듈의 HTML 소스를 한번 보도록 하겠습니다.
------------------------------------------
----------------------------------------------
(참고로 제가 전문가가 아니기 때문에 위의 예는 어설플 수 있습니다. 그냥 마진과 패딩의 개념이 이런거구나 정도만 이해하기 위한 것으로 봐주시길)
위에서 style body 부분에 마진과 패딩을 0으로 초기화 해놓고 클래스선택자에서는 각각 10px과 165px을 주었습니다. 블로그에 사이드바에 조정하기 위해 이여러 시도 끝에 이렇게 값을 찾아서 변경하게 되었는데요.
여기서 마진을 10px, 패딩을 20px, width를 300px을 주고 로드북의 개인정보 사이드바를 변경해보겠습니다.
위의 그림과 어떻게 달려졌는지 보이시죠?
1) 마진값이 0 -> 20px로 변해서 Category바 보다 오른쪽으로 이동한 것을 알 수 있고
2) 패딩값 또한 0 -> 20px로 변해서 컨텐츠의 여백이 더 넓어진 것을 알 수 있죠?
3) width 값 또한 165 -> 300px로 변해서 컨텐츠가 해당 사이드바 영역 크기를 벗어나버린 것을 알 수 있습니다.
그리고 여기서 덤으로 CSS3에서 추가된 요소입니다. 웹 디자이너들은 이것 때문에 쾌재(?)를 불렀다는 소문이 자자하더군요.
border-radius:10px;
이 부분이 테두리를 둥그렇게 만드는 역할을 해주고 있습니다. 여담인데, 명함 만들 때 디자이너들은 이것을 "귀도리(?)"라고 표현하더라구요.
그런데, 문제는 아이폰에서 블로그의 PC화면을 보면 해당 부분은 제대로 보이는데, 아래 뭔가 이상하게 조악(?)한게 뜨더라구요. 나중에 전문가에게 상담을 한번 받아봐야 할 것 같습니다.
에궁, 이거 포스팅하는 데도 이렇게 힘든데, 우리 저자들은 얼마나 힘들게 원고를 쓰고 있을까요? 이 세상 글 쓰시는 분들, 파이팅입니다!!!!
책을 만들다보면 편집자도 어쩔 수 없이 내용을 이해하기 위해 예제도 테스트해보고 관련 자료도 뒤져보고 하게 됩니다. 그러다보면 본의아니게(?) 열학도 못지 않게 학습하는 재미에 푹 빠져들곤 합니다.
우습기도 하지만, 처음 IT 책을 만드는 편집자에 입문할 때만 해도 이런 생각을 했습니다. "이러다 IT쪽 박사 되는 거 아냐?" 그런데, 이상하게도 석사는커녕 항상 깊은 지식의 한계에 좌절하는 경우가 많습니다. 그도 그럴듯이 현장에서 하는 공부가 진짜 공부이듯이 단순히 그것을 독자에게 어떻게 전달할 것인가의 관점에서 학습하다보니 깊이 있는 학습을 할 수가 없는 경우가 많습니다.
편집자 세계에서는 이런 말이 있습니다. "영어를 잘 하는 사람이 영어 책을 잘 만드는 것이 아니다." 편집자는 어떤 때는 깊이 있는 지식을 갖고 있는 경우가 해가 되는 경우가 있습니다. 타깃하는 독자보다 훨씬 내공이 높을 때는 진짜 독자의 눈높이, 그리고 그들의 절박한 심정을 간과하기 쉽기 때문이죠.
그래서 편집자는 구체적인 기술의 깊이를 좇기보다는 넓게 두루 볼 줄 아는 안목과 독자가 어떤 사람들이고 진짜 원하는 게 무엇인지를 연구하는 데 더 많은 시간을 투자합니다. 그래야 저자와 차별적으로 협업하여 좋은 결과를 얻을 수 있기 때문이죠. 물론, 철학이나 예술, 그리고 상당한 지식의 내공이 필요한 분야에서는 편집자 또한 어느 정도 지식의 깊이는 갖추어야 하는 것 같습니다.
그래도 어느 분야이든지 해당 분야에 조예가 깊으면서도 편집자로서도 내공이 뛰어나다면 더할나위없이 좋은 것은 분명합니다.
제목은 "마진과 패딩"으로 달아놓고 쓸데없는 편집자 얘기를 했네요. ^^
블로그를 운영하다보니 HTML이나 CSS를 모르면 여간 불편한 게 아니더라구요. 다행히 제가 요즘 진행하고 있는 <처음부터 다시 시작하는 HTML5 & CSS3>(가제)(2011, 양용석) 때문에 많은 도움을 얻고 있습니다. 아마 웹 디자인에 입문하는 사람들이 가장 많이 접하고 실제로 많이 사용하게 될 개념이 마진과 패딩의 개념일 텐데요. 아래 그림이 마진과 패딩의 개념도입니다.
저도 그림만 봐서는 저게 뭐지 했는데, 실제 예를 보니 감이 팍팍 오더라구요.
로드북 블로그의 우측 상단에 보면 로드북의 개인정보(?)가 들어가 있는데요. 이것을 갖고 마진과 패딩의 개념을 간단하게 설명하게 보겠습니다. 물론 책에는 다른 예제가 들어가 있습니다.
여기는 블로그에서 "사이드바"라는 모듈 영역을 제공해서 사용자가 지맘대로 디자인을 추가할 수 있도록 해놓은 곳인데요. 웹에서 검색해보시면 여기에 사용자 모듈을 추가하는 방법은 다양하게 나와있으니 참고하시고 간단하게 위 모듈의 HTML 소스를 한번 보도록 하겠습니다.
------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
font-family: "돋움", "맑은 고딕";
font-size: 0.7em;
color: #333;
margin:0;
padding:0;
}
.box1 {
padding:10px;
width:165px;
border:1px solid #666;
border-radius:10px;
border-radius:10px;
}
</style>
</head>
<body>
<div class="box1">
<b> Tel </b> 02-874-7883 <br>
<b> Mobile </b> 010-9490-7883 <br>
<b> Fax </b> 02-843-6901 <br>
<b> chief@roadbook.co.kr </b>
</div>
</body>
</html>----------------------------------------------
(참고로 제가 전문가가 아니기 때문에 위의 예는 어설플 수 있습니다. 그냥 마진과 패딩의 개념이 이런거구나 정도만 이해하기 위한 것으로 봐주시길)
위에서 style body 부분에 마진과 패딩을 0으로 초기화 해놓고 클래스선택자에서는 각각 10px과 165px을 주었습니다. 블로그에 사이드바에 조정하기 위해 이여러 시도 끝에 이렇게 값을 찾아서 변경하게 되었는데요.
여기서 마진을 10px, 패딩을 20px, width를 300px을 주고 로드북의 개인정보 사이드바를 변경해보겠습니다.
위의 그림과 어떻게 달려졌는지 보이시죠?
1) 마진값이 0 -> 20px로 변해서 Category바 보다 오른쪽으로 이동한 것을 알 수 있고
2) 패딩값 또한 0 -> 20px로 변해서 컨텐츠의 여백이 더 넓어진 것을 알 수 있죠?
3) width 값 또한 165 -> 300px로 변해서 컨텐츠가 해당 사이드바 영역 크기를 벗어나버린 것을 알 수 있습니다.
그리고 여기서 덤으로 CSS3에서 추가된 요소입니다. 웹 디자이너들은 이것 때문에 쾌재(?)를 불렀다는 소문이 자자하더군요.
border-radius:10px;
이 부분이 테두리를 둥그렇게 만드는 역할을 해주고 있습니다. 여담인데, 명함 만들 때 디자이너들은 이것을 "귀도리(?)"라고 표현하더라구요.
그런데, 문제는 아이폰에서 블로그의 PC화면을 보면 해당 부분은 제대로 보이는데, 아래 뭔가 이상하게 조악(?)한게 뜨더라구요. 나중에 전문가에게 상담을 한번 받아봐야 할 것 같습니다.
에궁, 이거 포스팅하는 데도 이렇게 힘든데, 우리 저자들은 얼마나 힘들게 원고를 쓰고 있을까요? 이 세상 글 쓰시는 분들, 파이팅입니다!!!!
'IT 포스팅' 카테고리의 다른 글
| 3탄_Scrum의 돼지와 닭 이야기 (0) | 2011.08.12 |
|---|---|
| 2탄_전문성의 기준으로 본 전문가 등급 피라미드 (0) | 2011.08.02 |
| 1탄_거꾸로 배우는 소프트웨어 개발 (0) | 2011.07.19 |
| JCO 11회_개발자 역량이 많이 높아진 듯 (0) | 2011.06.21 |
| Jquery가 뭔지 짧게 보여주는 존레식의 동영상 강의 (0) | 2011.04.22 |