<div style='background-position: -20px -10px; width: 350px; height: 350px; background-image: url("http://cfile242.uf.daum.net/image/2579E43854A647E6210961");'></div>
<br>
<div style='background-position: -140px -140px; border-radius: 10px; width: 350px; height: 350px; background-image: url("http://cfile242.uf.daum.net/image/2579E43854A647E6210961");'></div>
<br>
<div style='background-position: -540px -14px; border-radius: 50%; width: 350px; height: 350px; background-image: url("http://cfile242.uf.daum.net/image/2579E43854A647E6210961");'></div>
<br>
<div style='background-position: -300px -150px; border-radius: 50%; width: 98%; height: 350px; max-width: 600px; background-image: url("http://cfile242.uf.daum.net/image/2579E43854A647E6210961");'></div><p> </p><p> </p><p> </p><div class="txc-textbox" style="margin: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgb(238, 238, 238); background-color: rgb(238, 238, 238);" margin:10px;=""><p> <div style='width: 350px; height: 350px; background-image: url("<a href="http://cfile242.uf.daum.net/image/2579E43854A647E6210961">http://cfile242.uf.daum.net/image/2579E43854A647E6210961</a>"); background-position: -20px -10px; '></div></p>
</div>
<p> </p><p><div class="txc-textbox" style="margin: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgb(238, 238, 238); background-color: rgb(238, 238, 238);" margin:10px;=""><div style='width: 350px; height: 350px; <strong><span style="color: rgb(204, 61, 61); font-size: 11pt;">border-radius:10px; </span></strong>background-image: url("<a href="http://cfile242.uf.daum.net/image/2579E43854A647E6210961%22);background-position"><font color="#0066cc">http://cfile242.uf.daum.net/image/2579E43854A647E6210961");background-position</font></a>: -140px -140px; '></div><br></div>
<div class="txc-textbox" style="margin: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgb(238, 238, 238); background-color: rgb(238, 238, 238);"><p><div style='width: 350px; height: 350px; <span style="color: rgb(204, 61, 61);"><strong><span style="font-size: 11pt;">border-radius: 50%;</span></strong></span> background-image: url("<a href="http://cfile242.uf.daum.net/image/2579E43854A647E6210961"><font color="#0066cc">http://cfile242.uf.daum.net/image/2579E43854A647E6210961</font></a>"); background-position: -540px -14px; '></div></p></div>
<div class="txc-textbox" style="margin: 10px; padding: 10px; border-radius: 10px; border: 1px solid rgb(238, 238, 238); background-color: rgb(238, 238, 238);"><p><div style='<span style="color: rgb(204, 61, 61);"><strong><span style="font-size: 14pt;">width: 98%;</span></strong></span> height: 350px; <span style="color: rgb(204, 61, 61); font-size: 11pt;"><strong>border-radius: 50%;</strong></span> background-image: url("<a href="http://cfile242.uf.daum.net/image/2579E43854A647E6210961"><font color="#0066cc">http://cfile242.uf.daum.net/image/2579E43854A647E6210961</font></a>"); background-position: -300px -150px; max-width: 600px; '></div></p></div><p> </p><p><span style="font-size: 14pt;"><strong>박스의 둥근모서리</strong></span></p><p> </p><p>컴퓨터 화면에다 한개의 박스를 그린다는 것은 종이위에다 연필로 그리는 작업과는 다른 것입니다. 복잡한 프로그램을 브라우져가 읽고 해석해 주어야 합니다. 컴퓨터가 여러 점들을 이어서 화면에 보여주면 사람들 눈에는 선으로 보이는 것입니다. 컴퓨터 프로그램은 이렇게 수많은 점들을 이어 찍어서 일단 선을 만들고, 이렇게 만들어진 선 4개를 조합해서 하나의 박스를 그립니다. </p><p> </p><p>그런데 화면상에 박스를 그릴때, 직선만 사용하여 사각형을 그리는 것과 둥근모서리 박스를 그리는 것은 전혀 다른 프로그램 기술인 것이었기 때문에 그동안의 프로그램 기술로는 둥근모서리 박스를 그리지를 못하였습니다. </p><p> </p><p>그래서 웹디자이너들은 궁여지책으로 둥근모서리 박스들은 모두 포토샵등으로 그레픽처리하였습니다. 그러던 것을 HTML5와 CSS3에서 부터는 둥근모서리 박스를 그릴수 있게 되었습니다. </p><p> </p><p> </p><p>위의 첫번째 박스는 그동안 올려드렸던 글에서 다루어왔던 <div>태그의 기초적인 사용법입니다. </p><p>가로 350픽셀 X 세로 350픽셀의 박스를 그린 것입니다. </p><p> </p><p> </p><p>두번째 박스의 소스의 경우, </p><p> 첫번째 박스의 소스와 비교해보시면 단지 <span style="color: rgb(204, 61, 61); font-size: 11pt;"><strong>border-radius:10px;</strong><font size="2"> </font></span>옵션만으로 간단하게 둥근모서리를 그릴 수있다는 것을 알수있습니다. </p><p> </p><p><span style="color: rgb(204, 61, 61); font-size: 11pt;"><strong>border-radius </strong></span>옵션은 픽셀단위 뿐만이 아니라 퍼센트도 사용할 수 있는데, </p><p>세번째 원은 가로 X 세로의 크기를 같은 크기로 하고 <span style="color: rgb(204, 61, 61); font-size: 11pt;"><strong>border-radius</strong></span>를 50%로 했더니 원이 그려집니다. </p><p> </p><p><div>태그로 원을 그릴수 있다는 것은 정말 놀라운 일이 아닐 수없습니다. </p><p> </p><p>네번째의 경우, <span style="color: rgb(204, 61, 61);"><strong><span style="font-size: 14pt;">width </span></strong></span>를 퍼센트로 준것인데, 모바일기계에서 화면을 가로 세로 움직여 볼경우 </p><p>여러가지 타원형으로 변하는 마치 튕기는 공처럼 되었습니다. </p><p> </p><p><div>태그에 이러한 화려한 기능들이 있다는 것은 놀라운 사실입니다. </p><p> </p><p> </p><p>아래의 링크는 둥근모서리를 활용하여 글꾸미기 사례 바로가기 입니다. </p><p> </p><table class="bbsList" summary="영상과 명상음악 - 소개글을 넣어주세요."><tbody><tr><td class="headcate txt_sub" nowrap="nowrap"></td><td class="subject"><a href="http://cafe.daum.net/_c21_/bbs_read?grpid=1TA97&mgrpid=&fldid=UvR8&page=1&prev_page=0&firstbbsdepth=&lastbbsdepth=zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz&contentval=0002Uzzzzzzzzzzzzzzzzzzzzzzzzz&datanum=154&listnum=20"> [마음을 편안하게하는 음악] 김연숙 숨어우는 바람소리</a> </td></tr></tbody></table><p> </p><p> </p><p> </p><p>그런데 <div>태그에는 깜짝놀랄만한 놀라운 기술이 더 있습니다. </p><p>국내의 나모에디터라는 세계적인 웹에디터가 있습니다. </p><p> </p><p>자유게시판이나 토론게시판에 간단한 글을 하나 올리려면 반드시 웹에디터의 기능이 있는 입력기가 있어야 합니다. </p><p> </p>
<div id="MobileEditer" style="margin: 5%; padding: 5px; border: thin solid gray; width: 90%; height: 200px; overflow: auto;" contenteditable="true">
<p> </p></div>
<p>위에 보이는 박스는 인터넷에 글을 올리는 간단한 형식의 입력박스입니다. </p><p>박스를 마우스로 선택하시면 커서가 껌뻑껌뻑하고 나타납니다. 글을 쓸수 있다는 표시입니다. </p><p> </p><p>안녕하세요라고 타이프해보시면 박스안에 글이 써질 것입니다. </p><p> </p><p>이번에는 화면의 좌측이나 화면의 상단을 두리번거리시다보면 </p><p>글자가 아닌 그림으로 된 부분이 있을 것입니다. </p><p> </p><p>그 부분을 마우스로 선택하신 후 </p><p>오른쪽 마우스버튼을 누른 후 끌어서 선택한 후에 </p><p>마우스의 오른쪽 버튼을 눌러서 복사한 후 </p><p> </p><p>안녕하세요라고 입력하셨던 박스에다 붙여넣기를 해보시면 </p><p>복사한 부분이 그대로 글쓰기로 붙여넣기된 것을 확인하실 수있을 것입니다. </p><p> </p><p style="text-align: center;"><img width="693" class="txc-image" style="clear: none; float: none;" src="https://t1.daumcdn.net/cfile/cafe/216B0B4854A66BB106" border="0" vspace="1" hspace="1" actualwidth="693" exif="{}" data-filename="edit.png" id="A_216B0B4854A66BB1062B54"/></p><p> </p><p>위의 그림과 같이 되었을 것입니다. 그동안 웹에디터는 인터넷프로그램개발회사들만 만들어서 판매하였습니다. 대표적인 회사가 나모웹에디터입니다. 위의 화면의 의미는 다음(Daum)카페에 글쓰기를 하실때 사용하는 다음 에디터와 같은 강력하고 다양한 기능의 웹에디터를 누구나 만들수 있게 되었다는 뜻입니다. </p><p> </p><p>놀라운 것은 이토록 강력한 기능의 웹에디터를 단지 <div>태그만으로 모두 만들수 있다는 사실입니다. </p><p> </p><div class="txc-textbox" style="padding: 10px; border: 1px solid rgb(238, 238, 238); background-color: rgb(238, 238, 238);"><p><div style="margin: 5%; padding: 5px; border: thin solid gray; width: 90%; height: 200px; " <span style="color: rgb(204, 61, 61); font-size: 12pt;">contenteditable="true"</span>><br></div><br></p></div><p> </p><p> </p><p>그동안 올려드렸던 글들은 </p><p>인터넷에 올린 글이 스마트폰 화면등 다양한 기계들의 화면에 모두 이쁘게 잘 보이게 하는 기술을 알아보는 글이었습니다. </p><p>화면폭을 마추기 위해서는 <div> 태그의 style 옵션 width: 를 퍼센트로 설정하기만 하면 간단히 해결됩니다. </p><p> </p><p>이것으로 화면 폭에 대한 글을 마치고 </p><p>앞으로는 <div>태그로 웹편집기를 제작하는 방법에 대한 글을 올려보겠습니다. </p><p> </p><p> </p><p> </p>
<!-- -->
@관화저도 요즘 컴퓨터는 너무 분야가 세분화 되고 전문화되서 책을 봐도 어려워서 잘모릅니다. 설종종조님께서도 앞으로 시대는 농사짖던 사람이 선비가 될수없고 선비하던 사람이 농자짖지 못하는 시대라고 말씀하셨지요. 알고 싶어하시는 분들을 대상으로 해서 제글이 조금이라도 도움이 될수있다면 좋겠다는 생각으로올리고 있습니다. 요새는 컴퓨터에 대하여 전반적인 이해를 쉬운 말로 할수있는 시대는 아닌것 같습니다. 질문주신다면 아는 범위내에서 답변해 보겠습니다. 혹시 제가 답변을 못하더라도 답을 주시는 분이 있을 지모릅니다. 조금 부족해도 미워하지 않고 존중하면서 묻고 답하고 하는 그것이 카페활동이라고 생각됩니다
첫댓글 감사합니다~~~!
제가 그동안 우리 카페에다 여러 성격의 글을 올렷엇는데 컴퓨터 관련글에 관심주시니 고맙고 반갑습니다.
@즉비 당연히 관심가집니다.
카페 활성화위해 노력해 주시는 모습이 가슴에 와닿습니다.
감사합니다.
근데, 다만 컴맹이라 그 언어가 생소하여 가까이 가는게 좀...
쉬운말은 없나요? 아녜요.어찌 컴맹에 맟추시겠어요? 그런게 있다는 거 보는 것만도 충분히 감사합니다!
@관화 저도 요즘 컴퓨터는 너무 분야가 세분화 되고 전문화되서 책을 봐도 어려워서 잘모릅니다. 설종종조님께서도 앞으로 시대는 농사짖던 사람이 선비가 될수없고 선비하던 사람이 농자짖지 못하는 시대라고 말씀하셨지요. 알고 싶어하시는 분들을 대상으로 해서 제글이 조금이라도 도움이 될수있다면 좋겠다는 생각으로올리고 있습니다. 요새는 컴퓨터에 대하여 전반적인 이해를 쉬운 말로 할수있는 시대는 아닌것 같습니다. 질문주신다면 아는 범위내에서 답변해 보겠습니다. 혹시 제가 답변을 못하더라도 답을 주시는 분이 있을 지모릅니다. 조금 부족해도 미워하지 않고 존중하면서 묻고 답하고 하는 그것이 카페활동이라고 생각됩니다
안녕하세요
안녕하세요. 댓글 감사합니다