37♥ 알지오는 평생교육바우처 사용처입니다. ♥ 알지오는 수강생 경제적 부담에 도움을 드립니다. ♥ 알지오는 교육청 인가의 원격평생교육원입니다. ♥ 알지오는 국내최초 IT전문교육 브랜드입니다. HTML5 CSS3 온세계가 인터넷으로 연결되어 실시간으로 통신하고 있기에 웹디자인이나 웹 프로그래머가 되려는 교육생 뿐만 아니라 일반 프로그래머들도 반드시 알아야 할 상식 같은 과목이 HTML5, CSS3일 것입니다. 소프트웨어 개발의 감초같은 HTML5, CSS3를 프로그래밍 지식이 전혀 없는 일반인도 학습할 수 있도록 아끌어주는 강의가 알지오에 있습니다. 10시간 57분만 강의를 들으면 웹 개발의 기초를 마스터할 수 있습니다. MARIADB 프로그래머가 되려면 적어도 한가지 프로그래밍 언어에 대해서는 해박한 지식을 갖추어야 할 것입니다. 프로그래밍 언어의 문법적인 지식이외 알고리즘을 구사하는 능력도 역시 기초적인 요소이지요. 아마도 그 정도는 대부분의 프로그래밍 학습자들이 준비하고 있을 것이나 취업을 해야 한다면 반드시 하나 더 추가할 지식이 바로 데이터베이스 지식입니다. 알지오의 MARIADB 강의를 들으면 MySQL 데이터베이스까지도 커버할 수 있지요. DB의 개념과 설치부터 SQL 학습까지 데이터베이스를 정복합니다! 안드로이드 앱 개발 안드로이드 앱을 개발하는 작업은 앱 개발 도구인 NDK의 설정과 라이브러에 대한 이해 등 실제 프로그래...
#웹디자인 #CSS3 #이미지배치 #박스배치 #텍스트배치 텍스트와 이미지, 박스가 섞여 있는 경우 기본적으로는 기술한 순서대로 수직으로 나열되어 표시된다. 그러나 "float: right"나 "float: left "프로퍼티를 사용하면 텍스트의 오른쪽이나 왼쪽에 이미지나 박스를 배치할 수 있다. 다음 예를 보자. <!doctype html> <html> <head> <style> img { float: right; margin: 0 0 20px 20px; } </style> </head> <body> <h3>이미지가 텍스트의 오른쪽에 표시됩니다.</h3> <img src="pic1.jpg" alt="봄동" width="260" height="220"> <p>봄동은 봄철의 대표적인 먹거리의 하나이다.</p> <p>제철 음식이 맛있고 몸에도 좋다고 하는 건 모두가 아는 사실일 것이다.</p> <p>봄동 역시 봄철에 제일 단맛이 강하고 영양분도 많다고 한다.</p> <p>그런데...</p> <p>봄동과 배추는 뭐가 다른가?</p> </body> </html> ▶결과 현재는 이미지가 텍스트의 오른쪽에 표시되었다. 앞의 코드에서 "float: right"를 "float: left"로 수정하면 이미지가 텍스트의 왼쪽에 표시된다. 담담의 인플루언스 홈페이지를 오셔서 [팬하기]를 클릭해 주시길 부탁드려요!! 아무것도 모른채 웹디자인을 시작하려면
2#CSS3 #웹디자인 #inlineblock #블록레벨요소 #인라인요소 <p> 태그나 <div> 태그는 블록 레벨 요소이기 때문에 항상 새 라인에 표시된다. 따라서 테두리나 박스를 사용해도 아래쪽으로만 나열된다. 그러나 다음의 예와 같이 display 프로퍼티를 사용하면 테두리나 박스를 옆으로 나란히 표시할 수 있다. ▶ch12-17.html 첨부파일 12-17.html 파일 다운로드 !doctype html> <html> <head> <style> .sample1{ border: 4px solid gold; background-color: lightyellow; width: 300px; display: inline-block; } .sample2{ border: 4px solid red; background-color: lightpink; width: 300px; display: inline-block; } </style> </head> <body> <h3>나란히 표시의 예</h2> <div class="sample1"> <p>이 내용은 왼쪽 박스에 표시됩니다.</p> <p>노란색 박스입니다.</p> </div> <div class="sample2"> <p>이 내용은 오른쪽 박스에 표시됩니다.</p> <p>핑크색 박스입니다.</p> </div> <p>이 내용은 박스 아래에 표시됩니다.</p> </body> </html> ▶결과 di...
#웹디자인 #CSS3 #HTML5 #이미지위치조절 background-origin 프로퍼티를 사용하면 이미지를 둘러싸고 있는 박스 선이나 패딩 영역을 기준으로 이미지의 위치를 조절할 수 있다. 다음의 예를 보자. ▶ ch13-13.html 첨부파일 13-13.html 파일 다운로드 <!doctype html> <html> <head> <style> .sample1 { border: 5px solid darkred; padding: 30px; background: url("key2.png"); background-repeat: no-repeat; } .sample2 { border: 5px solid darkred; padding: 30px; background: url("key2.png"); background-repeat: no-repeat; background-origin: border-box; } .sample3 { border: 5px solid darkred; padding: 30px; background: url("key2.png"); background-repeat: no-repeat; background-origin: content-box; } </style> </head> <body> <div class="sample1"> <p>background-origin 지정 안함</p> <p>background-origin 지...
#웹디자인 #이미지스크롤 #배경이미지 #CSS3 배경 이미지는 기본적으로 내용과 함께 스크롤된다. 그러나 다음과 같이 background-attachment 프로퍼티의 값을 fixed로 지정하면 이미지의 스크롤을 방지할 수 있다. ▶ ch13-9.html 첨부파일 13-9.html 파일 다운로드 첨부파일 flight1.png 파일 다운로드 <!doctype html> <html> <head> <style> body { background-image: url("flight1.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } </style> </head> <body> <h1>문서 배경에 이미지 표시</h1> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</p> <p>이미지의 스크롤을 조절하는 예를 보여주고 있습니다.</...
3배경 이미지는 기본적으로 왼쪽 위에 표시되나 다음과 같이 background-position 프로퍼티를 사용하면 다양하게 이미지의 위치를 조절할 수 있다. ▶ ch13-6.html 첨부파일 13-6.html 파일 다운로드 <!doctype html> <html> <head> <style> body { background-image: url("key2.png"); background-repeat: no-repeat; background-position: right top; } </style> </head> <body> <h1>문서 배경에 이미지 표시</h1> <p>이미지 위치를 임의로 조절하는 예를 보여주고 있습니다.</p> <p>이미지 위치를 임의로 조절하는 예를 보여주고 있습니다.</p> <p>이미지 위치를 임의로 조절하는 예를 보여주고 있습니다.</p> <p>이미지 위치를 임의로 조절하는 예를 보여주고 있습니다.</p> <p>이미지 위치를 임의로 조절하는 예를 보여주고 있습니다.</p> <p>이미지 위치를 임의로 조절하는 예를 보여주고 있습니다.</p> </body> </html> ▶ 결과 background-position 프로퍼티에는 다음과 같은 값을 지정할 수 있다. left top, left center, left bottom right top. right center, right bottom center top, cent...
4background-image 프로퍼티를 사용하면 다음과 같이 배경 이미지를 지정할 수 있다. ▶ ch13-2.html 첨부파일 13-2.html 파일 다운로드 <!doctype html> <html> <head> <style> body { background-image: url("key1.png"); } </style> </head> <body> <h1>문서 배경에 이미지 표시</h1> <h2>이미지가 반복 표시됩니다.</h2> </body> </html> ▶ 결과 background-image 프로퍼티는 url("이미지 경로와 이름")을 값으로 지정하며 이미지의 크기가 작으면 위와 같이 반복 표시된다. 이미지의 반복 표시는 다음과 같이 background-repeat 프로퍼티를 추가하여 조절할 수 있다. ▶ 프로퍼티: background-repeat: no-repeat; ▶ 예제 파일: ch13-3.html 첨부파일 13-3.html 파일 다운로드 ▶ 프로퍼티: background-repeat: repeat-x; ▶ 예제 파일: ch13-4.html 첨부파일 13-4.html 파일 다운로드 ▶ 프로퍼티: background-repeat: repeat-y; ▶ 예제 파일: ch13-5.html 첨부파일 13-5.html 파일 다운로드 담담의 인플루언스 홈페이지를 오셔서 [팬하기]를 클릭해 주시길 부탁드려요!! 아무것도 모른채 웹디자...
<select> 태그로 생성되는 드롭다운 목록에도 다음과 같이 다양한 스타일을 지정할 수 있다. 첨부파일 16-8.html 파일 다운로드 ▶ ch16-8.html <!doctype html> <html> <head> <style> select { width: 50%; padding: 16px 20px; border: 1px solid #2E8B57; border-radius: 10px; background-color: #00FA9A; } </style> </head> <body> <p>통신사를 선택하세요.</p> <form> <select id="telcom" name="telcom"> <option value="com">KT</option> <option value="com">LGT</option> <option value="com">SKT</option> </select> </form> </body> </html> ▶ 결과 드롭다운목록도 width와 padding 프로퍼티로 크기와 여백을 지정하고, border, border-radius, background-color 등의 프로퍼티를 사용하여 스타일을 지정할 수 있다. 담담의 인플루언스 홈페이지를 오셔서 [팬하기]를 클릭해 주시길 부탁드려요!! 아무것도 모른채 웹디자인을 시작하려면
이미지에 대해 padding과 border-shadow 프로퍼티를 적절히 사용하면 폴라로이드 사진을 만들 수 있다. 다음 예를 보자. ▶ ch16-4.html 첨부파일 16-4.html 파일 다운로드 <!doctype html> <html> <head> <style> .picture { width: 80%; box-shadow: 0 4px 8px 0 #bababa; } .text { font-family: HY엽서M; font-size: 1em; text-align: center; padding: 5px; } </style> </head> <body> <h2>폴라로이드 사진 만들기</h2> <div class="picture"> <img src="sea.jpg" alt="거진해변" style="width:100%"> <div class="text"> <p>거진의 겨울 바다</p> <p>아름다운 청정 해변이 고스란히 남아 있는 곳...</p> </div> </div> </body> </html> ▶ 결과 <img> 태그로 이미지를 표시하고, 그 다음에 <p> 태그로 아래 부분 설명을 기술했다. 이미지와 텍스트에 picture 클래스를 적용하고, 텍스트에 대해서는 추가로 text 클래스를 적용하고 있다. 담담의 인플루언스 홈페이지를 오셔서 [팬하기]를 클릭해 주시길 부탁드려요!! 아무것도 모른채 웹디자인을 시작하려면
border와 padding 프로퍼티를 이미지에 응용해서 이미지 테두리를 표시할 수 있다. 다음 예를 보자. ▶ ch16-2.html 첨부파일 16-2.html 파일 다운로드 <!doctype html> <html> <head> <style> .sample{ border: 1px solid #d5d5d5; padding: 10px; width: 400px; height: 300px; } </style> </head> <body> <h2>이미지 테두리 만들기</h2> <img class="sample" src="sea.jpg" alt="거진해변"> </body> </html> ▶ 결과 이미지 테두리의 크기는 padding 값으로 결정된다. padding을 지정하고 그 외부에 border로 선을 표시해서 이미지 테두리를 표현한다. 아무것도 모른채 웹디자인을 시작하려면
textarea 필드는 사용자가 여러 줄에 걸쳐 텍스트를 입력할 수 있는 폼 요소이다. textarea 필드는 <input> 태그의 type 속성이 아닌 <textaera> 태그로 만든다. 다음의 ch07-2.html 문서를 보자. ▶ ch07-3.html <!doctype html> <html> <body> <form> <p>질의할 내용을 입력해주세요</p> <textarea name="question" rows="10" cols="40"> 여기에 질의할 내용을 입력하시면 됩니다. </textarea> </form> </body> </html> ▶ 결과 <textarea> 태그의 rows 속성은 입력할 수 있는 라인의 개수를 지정한다. cols 속성은 textarea의 너비를 지정한다.
웹에 표시되는 폼 요소들을 관련 있는 정보 그룹으로 나누어 표시하면 시각적으로 깔끔하게 정돈되어 보이는 효과를 얻을 수 있다. <fieldset> 태그로 폼 요소 그룹을 만들고, <legend> 태그로 그룹의 제목을 표시한다. 다음의 ch07-13.html 문서를 보자. ▶ ch07-13.html <!doctype html> <html> <body> <form> <fieldset name="info"> <legend>개인정보</legend> 이 름 : <input type="text" name="name"><br> 메 일 : <input type="email" name="email"><br> 직 업 : <input type="text" name="job"> </fieldset> </form> </body> </html> ▶ 결과 <fieldset> 태그에 의해 만들어진 폼 요소의 그룹에는 테두리가 표시된다. <legend> 태그를 생략하면 그룹의 제목은 표시되지 않고 테두리만 표시된다. 아무것도 모른채 웹디자인을 시작하려면
3드롭다운(Drop Down) 목록은 버튼을 클릭하면 항목들이 아래로 펼쳐지면서 그중 하나를 선택할 수 있는 기능을 말한다. 이 목록은 <select> 태그로 데이터 목록을 정의하고, <option> 태그로 각 항목을 기술하며, <optgroup> 태그로 항목들을 그룹으로 묶을 수 있다. 기본적인 드롭다운 목록 만들기 기본적인 드롭다운 목록을 사용하는 다음의 ch7-10.html 문서를 보자. ▶ ch07-10.html <!doctype html> <html> <body> <form> <select name="city"> <option value="부산">부산시</option> <option value="대구" selected>대구시</option> <option value="경주">경주시</option> <option value="광주">광주시</option> <option value="목포">목포시</option> </select> </form> </body> </html> ▶ 결과 이 목록에서 특정 항목을 선택하면 <option> 태그의 vlaue 속성에 기술된 값이 서버에 전송된다. 원래 목록이 표시될 때는 제일 먼저 기술된 "부산시"가 표시된다. 그러나 여기서와 같이 <option> 태그에서 "대구시" 항목에 selected 속성을 지정하면 "대구시"가 제일 먼저 표시된다. 우리의 예제에서는 서버에 전송되는 값을 기술하는 <o...
자바스크립트의 문자열 객체에 사용하는 주요 프로퍼티와 메소드는 다음과 같다. 프로퍼티 기능 length 문자열의 길이를 의미한다. 메소드 기능 charAt() 문자열 내 특정 위치의 문자를 반환한다. concat() 2개 이상의 문자열을 결합한다. indexOf() 문자열 내 첫번째 특정 문자의 위치 값을 반환한다. replace() 특정 문자열을 다른 문자열로 대치한다. split() 하나의 문자열을 여러 개의 문자열로 분할한다. substr() 특정 위치부터 특정 개수의 문자열을 추출한다. toLowerCase() 문자열을 소문자로 변환한다. toUpperCase() 문자열을 대문자로 변환한다. 이 메소드들과 프로퍼티의 사용 예를 보여주는 다음의 소스 코드를 보자. ▶ja06_2.html 첨부파일 ja06_2.html 파일 다운로드 <!DOCTYPE html> <html> <body> <script> var str = "ABC DEF"; document.write(str.length + "<br>"); // 01 document.write(str.charAt(1) + "<br>"); // 02 document.write(str.replace("ABC", "XYZ") + "<br>"); // 03 document.write(str.split(" ") + "<br>"); // 04 document.write(str.substr(1,3...
자바스크립트에서 숫자 객체를 사용하는 방법을 살펴본다. 객체를 사용한다는 것은 객체의 프로퍼티와 메소드를 사용하는 것이기 때문에, 어떤 객체에 어떤 프로퍼티와 메소드가 제공되는지를 아는 것이 중요하다. 숫자 객체는 알아둘만한 프로퍼티가 별로 없다. 숫자는 주로 연산의 소재로 사용되므로 프로퍼티가 별로 필요하지 않은 탓이라고 생각된다. 주요 메소드는 다음과 같다. 메소드 기능 toExponential() 숫자를 지수 형식으로 변환한다. toFixed() 소수 이하 자릿 수를 지정하며 잘리는 부분은 반올림이 된다. toPrecision() 전체 자릿 수를 지정하며 잘리는 부분은 반올림이 된다. 이 메소드들의 사용 예를 보여주는 다음 코드를 보자. ▶ja06_3.html 첨부파일 ja06_3.html 파일 다운로드 <!DOCTYPE html> <html> <body> <script> var str = 123.456; document.write(str.toExponential() + "<br>"); // 01 document.write(str.toExponential(2) + "<br>"); // 02 document.write(str.toFixed(1) + "<br>"); // 03 document.write(str.toPrecision(4) + "<br>"); // 04 </script> </body> </html> ▶실행결과 ▶소스코드...
CSS 코드는 문서의 요소들에 적용될 스타일(디자인)을 선언하는 역할을 한다. 이 선언은 선택자와 프로퍼티와 값으로 구성되며 기본 형식은 다음과 같다. ➊ CSS 코드는 선택자(Selector), 프로퍼티(Property), 값(Value)으로 구성된다. ➋ 선택자는 스타일을 적용할 html 요소(태그)를 지정한다. ➌ 중괄호 안의 프로퍼티와 값은 콜론으로 구분하고, 값의 뒤에 세미콜론을 기술한다. ➍ 중괄호 내에는 여러 개의 "프로퍼티:값;"을 기술할 수 있다. ➎ 중괄호 내에 기술할 "프로퍼티:값;"이 많으면 1개 라인에 1개씩 기술할 수도 있다. 앞의 예에서는 선택자에 단순히 하나의 html 태그를 기술했으며, 해당 태그를 사용할 때만 스타일이 적용된다. 이 선택자는 다양한 형식으로 기술할 수 있으며 그에 따라 여러 가지 자동 스타일 기능을 구현할 수도 있다. 아무 것도 모른채 웹디자인을 시작하려면
아무 것도 모른채 웹디자인을 시작하려면 animation-delay 프로퍼티를 사용하면 애니메이션 시간을 지연시킬 수 있으며, animation-iteration-count 프로퍼티를 사용하면 애니메이션을 반복 실행시킬 수 있습니다. 다음 예를 봅시다. ▶ ch19-7.html <!doctype html> <html> <head> <style> .sample { width: 100px; height: 100px; background-color: green; border-radius:60px; position: relative; -webkit-animation-name: example; animation-name: example; -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; } @-webkit-keyframes example { 0% {background-color:green; left: 0px; top: 0px;} 25% {background-color: gold; left: 200px; top: 0px;} 50% {background-color: red; left: 0p...
아무 것도 모른채 웹디자인을 시작하려면 column 관련 프로퍼티를 사용하면 웹 문서의 내용을 신문, 잡지처럼 2열이나 3열 등으로 표시할 수 있습니다. 먼저 다음의 예를 봅시다. ▶ ch17-10.html <!doctype html> <html> <head> <style> .magazine { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 30px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: dotted; -webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-color: green; -moz-column-rule-color: green; column-rule-color: green; } h3 { -webkit-column-span: all; column-span: all; } </styl...
아무 것도 모른채 웹디자인을 시작하려면 박스 내에 이미지를 넣을 때 이미지가 박스보다 크면 박스 테두리를 넘어서 표시됩니다. 이 경우 "overflow: auto" 프로퍼티와 clear 프로퍼티를 사용해서 조절할 수 있습니다. 다음 예를 봅시다. ▶ ch17-6.html <!doctype html> <html> <head> <style> .box1 { border: 3px solid #73AD21; padding: 5px; } .box2 { border: 3px solid #73AD21; padding: 5px; overflow: auto; } .right { float: right; } </style> </head> <body> <div class="box1"> <img class="right" src="pic1.jpg" alt="봄동" width="260" height="200"> 6월 27일 샌프란시스코의 구글 I/O에서 구글 글래스의 데모 버전을 발표했다. 구글 글래스를 착용한 스카입니다이버들이 스카입니다이빙하는 동영상을 실시간으로 공개하였다. </div> <br style="clear:right"> <br style="clear:right"> <div class="box2"> <img class="right" src="pic1.jpg" alt="봄동" width="260" height="200"> 6월 27일 샌프란시스코의 ...
다음과 같이 "display: inline" 프로퍼티를 지정하면 블록레벨 요소를 인라인 요소로 변환하여 옆으로 여러 개를 나열할 수 있습니다. ▶ ch17-1.html <!doctype html> <html> <head> <style> .sample { display: inline; } </style> </head> <body> <h3>원래의 목록</h3> <ul> <li>청년기</li> <li>중년기</li> <li>노년기</li> </ul> <h3>display: inline이 지정된 목록</h3> <ul> <li class="sample">청년기</li> <li class="sample">중년기</li> <li class="sample">노년기</li> </ul> </body> </html> ▶ 결과 목록은 원래 블록레벨 요소로서 각 항목이 하나의 라인을 차지하지만, "display: inline"이 정의되어 있는 sample 클래스가 지정된 목록은 항목들이 옆으로 나열됩니다. 담담의 인플루언스 홈페이지를 오셔서 [팬하기]를 클릭해 주시길 부탁드려요!!