'홈페이지제작' 카테고리의 글 목록 (2 Page)

워드프레스에 애드센스 2차 승인 코드 삽입하기 (0)	2018.04.03
워드프레스 홈페이지 꾸미기 (우측 좌측 ) (0)	2018.03.29
[워드프레스 강좌] 워드프레스 설치(웹브라우저로 접속하기) (0)	2018.01.13
[워드프레스 강좌] 워드프레스 설치하기 (0)	2018.01.13
[워드프레스 강좌] 워드프레스 테마 만들기 \| 시작하기 (0)	2018.01.12

[html] 태그 div 이해하기, style 이해활용 (0)	2018.03.23
[HTML기초] 표만들기 (0)	2018.03.09
iframe 태그 사용법과 유튜브 동영상 삽입하기 (0)	2018.03.07
HTML5 기본 이해하기 (0)	2018.03.02
[HTML] 홈페이지에 오디오 삽입 방법 (0)	2018.02.06

[html] 태그 div 이해하기, style 이해활용

홈페이지제작/HTML 2018. 3. 23. 07:52

[html] 태그 div 이해하기, style 이해활용

홈페이지 만들면서 가장 기초적으로 알아야 할 것이 바로 style과 div이다
table로 작업하면 테이블과 테이블끼리의 이동할 경우가 생기면

재작업이 필요해지므로 div사용하고 class를 지정하여 규제한 style을 활용한다

div는 boby 하위로 사용하고
style class를 구분하여 해당 class name을 <div class="name"> 칭해주면 해당규격이 적용된다

<div> 태그 사용 장점
1. style 지정하여 name으로 불러오면 여러곳에 한번에 적용할 수있어 간결하고
2. 수정시 style한번 수정으로 해당 class를 동시 수정이 가능하므로 시간단축이 된다
3. 작업 이후 위치이동이 필요시 용이하다

div태그는 width(가로크기),max-width(가로크기 최대치),min-width(가로크기 최소치),

padding(안쪽여백),margin(바깥쪽 여백),border(테두리 크기,색깔,형태),position(화면 위치의 방식)

등등의 많은 속성을 가지고 있습니다.

style 사용법
1.
<head>
<style type="text/css">
스타일클래스규정
</style>
</head>
<boby>에서 해당 클래스명만 호출하면된다

2. 태그별 각각의 style을 지정할수있다
ex) <table border="" style="">

3. 외부스타일시트로 별도 작업하여 불러올 수 있다
*.css형식저장 활용

• set: .(콤마)+'class name' {}
ex) .topbox {} >>> <div class="topbox">

꼭 알아야 할 팁으로 기억해 두세요
.(콤마) >>> class
#(샵) >>> id

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

html display:inline 속성에 대하여 (0)	2018.03.23
[HTML기초] 표만들기 (0)	2018.03.09
iframe 태그 사용법과 유튜브 동영상 삽입하기 (0)	2018.03.07
HTML5 기본 이해하기 (0)	2018.03.02
[HTML] 홈페이지에 오디오 삽입 방법 (0)	2018.02.06

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[자바스크립트] 변수 선언 및 할당

홈페이지제작/Javascript 2018. 3. 17. 12:05

[javascript/자바스크립트] 변수 선언 및 할당

변수(variable)

변수는 메모리에 데이터를 저장하기 위한 기억 공간을 의미한다. 즉, 데이터를 담아놓는 그릇이라고 생각하면 된다. 또한 변수에 담긴 데이터는 필요에 따라 수시로 데이터를 변경시킬 수 있다.

변수의 선언과 대입
자바스크립트에서 변수를 선언하는 방법은 [var 변수명;]으로 사용한다. 예를 들어 var myvar;와 같이 변수를 선언하면 myvar라는 변수를 지금부터 사용하겠다는 의미가 된다. 변수를 선언하면 값을 대입할 수 있고, [변수명 = 데이터;]로 값을 대입한다. 이때 =은 같다는 의미가 아니고 우항(데이터)을 좌항(변수)에 대입한다는 의미이다.
일반적으로 변수의 선언과 대입은 한 번에 작성한다. [var 변수명 = 데이터;] 와 같이 작성하면 된다. 변수에 문자열의 데이터를 저장하기 위해서는 쌍따옴표("")나 외따옴표('') 사이에 데이터를 입력하고 숫자 데이터를 저장할 때는 ""와 ''를 사용하지 않고 숫자만 입력한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>변수</title>
</head>
<body>
    <script>
        var str1 = 'hello'; // 문자열 변수 선언/할당
        var str2 = " javascript!"; // 문자열 변수 선언/할당
        var a = 3; // 숫자 변수 선언/할당
        var pi = 3.14; // 숫자 변수 선언/할당

        document.write(str1 + str2 + "<br>"); // 웹 브라우저에 데이터 출력
        str2 = " 자바스크립트!"; // str2 변수값 변경
        document.write(str1 + str2); // hello 자바스크립트! 출력
    </script>
</body>
</html>

위 코드 실행결과는 아래와 같습니다.

변수를 선언할 때 var를 생략해도 가능하다. 하지만 var는 유효범위(scope)에 영향을 미치기 때문에

의미에 대해 정확한 이해가 있을 때까지는 var를 명시해주도록 하자.

변수명 작성 시 주의사항

1. 변수명은 대/소문자를 구분한다. 즉, var A와 var a는 다른 변수를 의미한다.
2. 변수명에는 영문자, 숫자, $, _를 사용할 수 있다. 하지만 변수명의 첫 글자는 숫자로 시작할 수 없다.
3. 자바스크립트에 설정된 예약어는 변수명으로 사용할 수 없다.(for, while, if, this, new 등)

저작자표시

'홈페이지제작 > Javascript' 카테고리의 다른 글

자바스크립트 - 타이머함수 (0)	2018.07.03
[JavaScript/자바스크립트] 조건문(if 문, if ~ else, else if문 ] (0)	2018.03.13
[자바스크립트]javascript / 연산자(operator) (0)	2018.03.09
[자바스크립트] 변수 선언 및 할당 - var (0)	2018.03.07
[JavaScript 강좌 ] 비교 연산자 (0)	2018.02.01

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS DIV 메뉴만들기

홈페이지제작/CSS 2018. 3. 16. 12:37

CSS DIV 메뉴만들기

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*       { margin:0; padding:0;}
#top    { width:800px; height:50px; background-color: bb99ff; margin:auto;}
#top>ul { border:1px #333; margin-left:200px; }
li      { float:left; margin-right:30px; margin-top:50px;}

</style>

</head>

<body>

</body>
</html>

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

css기초 마진(Margin)과 패딩(padding) (0)	2018.03.10
[CSS 기초강좌] 아이디 선택자(ID Selector) (0)	2018.03.08
[CSS 기초] 클래스 선택자 (0)	2018.03.06
[CSS 강좌] 아이디 선택자 (0)	2018.03.06
[CSS 강좌] CSS Margin 속성 (0)	2018.03.05

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

HTML/DreamWeaver CS5 (드림위버)

홈페이지제작/드림위버 2018. 3. 13. 15:43

HTML/DreamWeaver CS5 (드림위버)

홈페이지 전달기능, 미적기능, 인터렉티브한 기능을 충족할 수 있는 홈페이지를 작성하는 시간입니다.

홈페이지 제작의 기본을 이루는 HTML을 기초로 웹 페이지를 만들고 웹에 게시할 수 있도록 합니다. 또한 홈페이지 제작 도구인 드림위버로 서버와 클라이언트간의 상호작용으로 멀티미디어, 스타일시트,템플릿,라이브러리,자바스크립트를 효과적으로 다룰 수 있도록 합니다. HTML과 드림위버의 핵심 기능을 체계적으로 심도 있게 다루는 시간이 될 것입니다.

체계적 수업 지도로 디자인을 전공/비전공 하신 분 모두가 쉽게 홈페이지를 완성 하도록 합니다. 스타일시트와 자바스크립트로 역동적인 홈페이지를 만듭니다. 웹디자이너의 포트폴리오,웹마스터의 사이트구축에 필요한 실무 예제로 수업이 이루어집니다. 드림위버를 이용한 개인포트폴리오,회사의 사이트 관리, 쇼핑몰 구축에 사용하는 고급 시능을 재밌게 수업합니다^^

드림위버란?

어도비 드림위버(Adobe DreamWeaver)는 매크로미디어가 개발한 웹 개발 응용프로그램이며, 현재 2005년에 매크로미디어를 인수하였던 어도비 시스템즈 소유 드림위버는 맥과 윈도 운영 체제를 둘다 지원 최근에 나온 버전들은 CSS, 자바스크립트, 다양한 서버 사이드 스크립팅, 그리고 ASP,NET,콜드 퓨전,자바 서버 페이지,PHP 등의 프로그래밍 언어 및 프레임 워크과 같은 웹 기술에 대한 지원을 포함. 현재는 어도비 크리에이티브 클라우드에서 무료로 다운로드하여 사용

드림위버는 툴을 다루는 것과 스킬습득, 연습이 중효합니다!

배우는 방법은 독학을 통해 배우거나 관련학교 학과,학원을 통해서 배울수 있습니다. 컴퓨터 능력이 어느정도 있고 시간이 여유로우시고,그림이 손으로 된다면 독학을 통해서 가능하답니다.

하지만! 내가 조금 부족하고 시간이 많이가 않아 체계적으로 배우고 싶다 하시는 분들은 학원을 추천드립니다

저작자표시

'홈페이지제작 > 드림위버' 카테고리의 다른 글

웹 퍼블리셔 과정 HTML/DreamWeaver CS5 (드림위버) (0)	2018.07.06
홈페이지또는 블러그에 구글지도 넣는 방법 자세히 알아봅니다. (0)	2017.05.09

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[JavaScript/자바스크립트] 조건문(if 문, if ~ else, else if문 ]

홈페이지제작/Javascript 2018. 3. 13. 15:32

[JavaScript/자바스크립트] 조건문(if 문, if ~ else, else if문 ]

조건문

조건문이란 특정 조건에 따라서 프로그램이 다르게 작동하도록 제어하는 문법을 의미한다.
JavaScript에서는 크게 두 종류의 조건문을 지원한다. if 문과 switch ~ case 문이다.

if 문

if 문을 정의하는 방법은 아래와 같다.

위와 같이 if 뒤에는 괄호가 오고 조건식이 온다. 조건식은 Boolean 형인 true나 false의 값을 리턴하는 값만이 올수 있다. 이 조건식이 참(true)일 경우에만 블록 안의 코드가 실행된다

if ~ else 문

if 문은 참(true)의 조건만을 출력한다. 조금 더 다양한 동작을 하기 위해서는 if ~ else 문을 사용할 수 있다. if ~ else 문을 정의하는 형식은 아래와 같다.

if 절은 똑같다. 조건식이 참인 경우에 코드를 실행한다. else 절에는 조건식이 거짓(false)인 경우에 코드가 실행된다

if ~ else if ~ else 문

다양한 조건에 따라서 실행되는 조건문을 정의하기 위해서는 else if 문을 사용하면 된다. 정의하는 형식은 아래와 같다.

위와 같이 if ~ else 사이에 else if 절을 추가하면 된다. else if는 몇 개가 와도 상관없다. 주의할 점은 if와 else 사이에서만 정의할 수 있다. 또한 조건식이 여러 개를 만족하는 경우라도 조건을 먼저 만족하는 절에서만 실행이 되고 조건문은 종료된다. 즉, 1개의 블록만이 실행된다. 참고로 else는 생략하여도 상관없다.

저작자표시

'홈페이지제작 > Javascript' 카테고리의 다른 글

자바스크립트 - 타이머함수 (0)	2018.07.03
[자바스크립트] 변수 선언 및 할당 (0)	2018.03.17
[자바스크립트]javascript / 연산자(operator) (0)	2018.03.09
[자바스크립트] 변수 선언 및 할당 - var (0)	2018.03.07
[JavaScript 강좌 ] 비교 연산자 (0)	2018.02.01

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

css기초 마진(Margin)과 패딩(padding)

홈페이지제작/CSS 2018. 3. 10. 11:45

css기초 마진(Margin)과 패딩(padding)

마진(margin)과 패딩(padding)에 대해서 알아보도록 하겠다.
마진과 패딩은 콘텐츠를 배치하기 위해서 자주 사용된다.
CSS 마진과 패딩은 그림으로 보면 아래와 같이 표현할 수 있다.

자세한 내용은 각 부분에서 알아보도록 하겠다.

태그와 태그 사이의 여백 - margin

CSS 마진(margin)은 태그와 태그 사이의 여백, 현재 요소 주변의 여백 간격을 조절하기 위해서 사용한다.
마진(margin) 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있으며
margin 속성을 사용하면 네 가지 방향 모두(top → right → bottom → left)를 한 번에 지정할 수 있다.
속성값으로는 크기(px, em 등)나 백분율(%), auto 등의 값을 지정한다.

콘텐츠와 테두리 사이의 여백 - padding

CSS 패딩(padding)은 콘텐츠와 테두리 사이의 여백, 테두리 내부의 여백을 조절하기 위해서 사용한다.
패딩(padding) 속성에는 padding-top, padding-right, padding-bottom, padding-left가 있으며,
네 가지 속성을 한 번에 지정하기 위해서는 padding 속성을 사용한다.
속성값은 크기(px, em 등), 백분율(%), auto 등을 지정할 수 있다.

예제
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        margin: 10px 0px;
        border: 1px solid #bcbcbc;
      }
      div.a {
        padding: 10px;
      }
      div.b {
        padding: 10px 20px;
      }
      div.c {
        padding: 10px 20px 30px;
      }
      div.d {
        padding: 10px 20px 30px 40px;
      }
    </style>
</head>
<body>
    <div class="a">
      <code>padding: 10px;</code>
    </div>
    <div class="b">
      <code>padding: 10px 20px;</code>
    </div>
    <div class="c">
      <code>padding: 10px 20px 30px;</code>
    </div>
    <div class="d">
      <code>padding: 10px 20px 30px 40px;</code>
    </div>
</body>
</html>

위 코딩의 결과값은 아래와 같습니다.

저작자표시

'홈페이지제작 > CSS' 카테고리의 다른 글

CSS DIV 메뉴만들기 (0)	2018.03.16
[CSS 기초강좌] 아이디 선택자(ID Selector) (0)	2018.03.08
[CSS 기초] 클래스 선택자 (0)	2018.03.06
[CSS 강좌] 아이디 선택자 (0)	2018.03.06
[CSS 강좌] CSS Margin 속성 (0)	2018.03.05

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[자바스크립트]javascript / 연산자(operator)

홈페이지제작/Javascript 2018. 3. 9. 13:07

[javascript/자바스크립트] 연산자(operator)

자바스크립트 연산자(operator)

이번 포스팅에서는 javascript에서 사용되는 연산자에 대해서 알아보도록 하겠다. 연산자란 값에 대해 작업을 컴퓨터에게 지시하기 위해 사용되는 기호를 의미하며, 아래와 같은 종류들이 있다.

연산자와 연산자 기호

산술 연산자

+, -, *, /, %

대입 연산자

=, +=, -=, /=, *=, %=, >>=, <<=, &=, |=

관계 연산자

>, >==, <, <==, ==, ===, !=

조건 연산자

조건식?구문1:구문2

논리 연산자

!, &&, ||

증감 연산자

++, --

산술 연산자

산술 연산자는 말 그대로 숫자를 더하거나 빼는 등의 수학적 용도의 연산자를 의미한다. 다른 언어에서도 동일하게 사용되며, 대부분 알고 있는 기호일 것이다.

산술연사자 기호 와 내용

+

더하기

-

빼기

*

곱하기

/

나누기

%

나머지

대입 연산자

대입 연산자는 변수에 특정 값을 저장하기 위해 사용하는 연산자를 의미한다. 프로그래밍 언어 공부가 처음이라면 어렵고 생소할 수 있으나 굉장히 많이 사용되며 편리하다.

연산자와 연산자 설명

a=b

우항(b)을 좌항(a)에 대입

a+=b

좌항(a)과 우항(b)을 더한 후 좌항(a)에 대입(a = a + b)

a-=b

좌항(a)을 우항(b)으로 뺀 후 좌항(a)에 대입(a = a - b)

a/=b

좌항(a)을 우항(b)으로 나눈 후 a에 대입(a = a / b)

a*=b

좌항(a)을 우항(b)과 곱한 후 a에 대입(a = a * b)

a%=b

좌항(a)을 우항(b)으로 나눈 후 나머지를 a에 대입(a = a % b)

a>>=b

a만큼 b를 오른쪽 시프트 연산 수행 후 결과를 a에 대입

a<<=b

a만큼 b를 왼쪽 시프트 연산 수행 후 결과를 a에 대입

a&=b

a와 b를 AND 연산 후 a에 대입

a|=b

a와 b를 비트 OR 연산 후 a에 대입

저작자표시

'홈페이지제작 > Javascript' 카테고리의 다른 글

[자바스크립트] 변수 선언 및 할당 (0)	2018.03.17
[JavaScript/자바스크립트] 조건문(if 문, if ~ else, else if문 ] (0)	2018.03.13
[자바스크립트] 변수 선언 및 할당 - var (0)	2018.03.07
[JavaScript 강좌 ] 비교 연산자 (0)	2018.02.01
[JavaScript 강좌] 데이터 타입 문자열(String) (0)	2018.01.30

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[HTML기초] 표만들기

홈페이지제작/HTML 2018. 3. 9. 12:59

[HTML기초] 표만들기

오늘은 html기초
<table> <tr> <td> <th> colspan rowspan에 대하여 각각 알아보도록 하겠습니다.

HTML 웹 문서에서 표(table)를 만드는 방법은

table 요소는 엑셀과 같이 데이터를 표 형태로 나타내기 위해 사용되며.
이전에는 table 요소를 이용하여 레이아웃을 만들 때 사용하기도 했지만 좋은 방법이 아니다.
그러면 표를 만들기 위해 사용되는 태그들에 대해서 알아보도록 하겠다.

기본적인 테이블을 만들기 위해서는 <table>, <tr>, <td>, <th> 태그를 이용한다.
<table>은 표 형태를 만들며 <tr>은 행(row), <td>는 열(column), <th>는 표 제목을 정의하기 위해 사용된다

colspan, rowspan - 행 및 열의 개수를 합침

행(row)이나 열(column)을 합치기 위해서는
<td> 또는 <th> 태그에 rowspan 또는 colspan 속성을 사용하며 합칠 셀의 수를 지정한다.

<!DOCTYPE>
<html>
    <head>
    </head>
    <body>
       <table width="500"border="1">
           <tr>
               <th colspan="2">구 분</th>
           </tr>
           <tr>
               <th>태그</th>
               <th>설명</th>
           </tr>
           <tr>
               <td>table</td>
               <td>표의 정의</td>
           </tr>
           <tr>
               <td>tr</td>
               <td>행의 정의</td>
           </tr>
           <tr>
               <td rowspan="2">td</td>
               <td>열의 정의</td>
           </tr>
           <tr>
               <td>속성 : rowspan, colspan</td>
           </tr>
           <tr>
               <td rowspan="2">th</td>
               <td>표의 제목을 정의</td>
           </tr>
           <tr>
               <td>속성 : rowspan, colspan</td>
           </tr>
       </table>
    </body>

위 코드의 결과값은 아래와 같습니다.

저작자표시

'홈페이지제작 > HTML' 카테고리의 다른 글

html display:inline 속성에 대하여 (0)	2018.03.23
[html] 태그 div 이해하기, style 이해활용 (0)	2018.03.23
iframe 태그 사용법과 유튜브 동영상 삽입하기 (0)	2018.03.07
HTML5 기본 이해하기 (0)	2018.03.02
[HTML] 홈페이지에 오디오 삽입 방법 (0)	2018.02.06

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

'홈페이지제작'에 해당되는 글 148건

한국형 워드프레스 ,쇼핑몰만들기, 초기화면 만들기

'홈페이지제작 > 워드프레스' 카테고리의 다른 글

html display:inline 속성에 대하여

'홈페이지제작 > HTML' 카테고리의 다른 글

[html] 태그 div 이해하기, style 이해활용

'홈페이지제작 > HTML' 카테고리의 다른 글

[자바스크립트] 변수 선언 및 할당

'홈페이지제작 > Javascript' 카테고리의 다른 글

CSS DIV 메뉴만들기

'홈페이지제작 > CSS' 카테고리의 다른 글

HTML/DreamWeaver CS5 (드림위버)

'홈페이지제작 > 드림위버' 카테고리의 다른 글

[JavaScript/자바스크립트] 조건문(if 문, if ~ else, else if문 ]

'홈페이지제작 > Javascript' 카테고리의 다른 글

css기초 마진(Margin)과 패딩(padding)

'홈페이지제작 > CSS' 카테고리의 다른 글

[자바스크립트]javascript / 연산자(operator)

'홈페이지제작 > Javascript' 카테고리의 다른 글

[HTML기초] 표만들기

'홈페이지제작 > HTML' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

itworldkorea

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31