'CSS' 태그의 글 목록

웹 퍼블리셔 과정 HTML/DreamWeaver CS5 (드림위버)

홈페이지제작/드림위버 2018. 7. 6. 09:15

HTML/DreamWeaver CS5 (드림위버)

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

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

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

드림위버란?

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

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

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

저작자표시

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

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

itworldkorea

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

,

[MS SQL] SQL 기초 학습 / SQL이란?

프로그래밍/MS-SQL 2018. 6. 24. 18:49

SQL 기초 학습 / SQL이란?

웹프로그래머가 알아야할 것들은?

프로그램의 공부는 정말 끝이 없는듯 합니다.

웹프로그램만 하더라도 공부해야 할 것들이 JSP, ASP, PHP, Database, Javascript, jQuery, SQL, CSS, HTML 등등 그 이외에도 더 많이 있지만 저렇게 많은 공부를 해야 인터넷이라는 공간에 집을 지을수 있습니다.

SQL 언어가 중요하고 필수적으로 알아야 하는 이유는 데이터베이스를 조작하고 엑세스할수 있기 때문입니다. 인터넷에 있는 모든 글은 데이터베이스에 저장되게 되는데 SQL 언어를 모르면 앙꼬없는 찐빵이겠죠.

SQL 은 아래 내용처럼 많은 것들을 할 수 있습니다.

- SQL은 데이터베이스에 대해 쿼리를 실행할 수 있습니다
- SQL은 데이터베이스에서 데이터를 검색 할 수 있습니다
- SQL은 데이터베이스에 레코드를 삽입 할 수 있습니다
- SQL은 데이터베이스의 레코드를 업데이트 할 수 있습니다
- SQL은 데이터베이스에서 레코드를 삭제할 수 있습니다
- SQL은 새 데이터베이스를 만들 수 있습니다
- SQL은 데이터베이스에 새 테이블을 만들 수 있습니다
- SQL은 데이터베이스의 저장 프로 시저를 만들 수 있습니다
- SQL은 데이터베이스에서 뷰를 만들 수 있습니다
- SQL 테이블, 프로 시저 및 뷰에 대한 권한을 설정할 수 있습니다

SQL 언어는 표준 언어이지만 데이터베이스 마다 각각 사용법이 조금씩 다릅니다. 그렇지만 표준을 준수하기 위해서 기본적인 명령어는 똑같이 사용됩니다. 예를들어서 SELECT, UPDATE, DELETE, INSERT, WHERE 처럼 말이죠.

PHP 포스팅을 하면서 SQL에 대해 조금 다루긴 했지만 이번 SQL 포스팅에선 좀더 구체적으로 SQL에 대해서 알아보기로 하겠습니다.

우선 SQL 소개 부분이니 여기까지만 설명을 드리고 다음 포스팅에선 SQL Syntax 에 대해서 포스팅하겠습니다.

저작자표시

'프로그래밍 > MS-SQL' 카테고리의 다른 글

MS SQL기초 SQL 기본 구문과 SQL 표현법 (0)	2018.06.24
[MS SQL] SUM() 함수에 대하여 (0)	2018.04.02
SQL 기본 구문 ( SQL 기본 명령어) (0)	2018.03.30
[ 테이터베이스] SQL이란 ? (0)	2018.03.29
[SQL 연산자] LIKE, 와일드카드, SQL정렬 (오름차순, 내림차순) (0)	2018.03.17

itworldkorea

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

,

[CSS 기초강좌] 아이디 선택자(ID Selector)

홈페이지제작/CSS 2018. 3. 8. 10:35

[CSS 기초강좌] 아이디 선택자(ID Selector)

아이디 선택자

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.
속성값 앞에 #을 붙여 아이디임을 나타냅니다.

예를 들어

#abc {
color: red;
}

는 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

아래 <예제>를 보시면

<예제>

id 값으로 abc를 갖는 요소를 빨간색으로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      #abc {
        color: red;
      }
    </style>
</head>
<body>
    <p id="abc">이르되 주예수를 믿으라 그리하면 너와 네집이 구원을 받으리라 하고" (행 16:31)</p>
    <p>이르되 주예수를 믿으라 그리하면 너와 네집이 구원을 받으리라 하고" (행 16:31)</p>
</body>
</html>

저작자표시

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

CSS DIV 메뉴만들기 (0)	2018.03.16
css기초 마진(Margin)과 패딩(padding) (0)	2018.03.10
[CSS 기초] 클래스 선택자 (0)	2018.03.06
[CSS 강좌] 아이디 선택자 (0)	2018.03.06
[CSS 강좌] CSS Margin 속성 (0)	2018.03.05

itworldkorea

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

,

인터넷에 다양한 언어 소스코드를 업로드 할 수 있다

유용한 툴/UTIL 2018. 2. 6. 14:09

어디든지 여러분의 소스코드를 보기좋게 올리세요

Color Scripter로 Action Script, ASP, C, C#, CSS, HaXe, HTML, Java, JavaScript, JSP, Objective C, Perl, PHP, Python, Ruby, SQL, Swift, Visual Basic 등
다양한 언어를 하이라이트하여 소스코드를 더 보기좋게 블로그등에 업로드 할 수 있습니다.

Color Scripter는 네이버 블로그등 <script> 태그가 지원되지 않아 Syntax HighLighter를 사용할 수 없는 곳에서도 사용할 수 있으며,
간단한 설정만으로 자신이 원하는 방식으로 소스코드를 하이라이팅 할 수 있습니다.

위치는 https://colorscripter.com/

디자인

보다 더 깔끔하게 코드를 볼 수 있게 디자인을 변경했습니다.
특히 HTML과 CSS가 더 다양한 색상을 지원하여 더 보기 좋게 하이라이트 됩니다.

<html>
    <head>
        <title>Untitled 1</title>
    </head>
    <body>
        <p align="center">
            Hello World!
        </p>
    </body>
</html>

package{
    public class Class1{
        public static void main(String arg[]) {
            System.out.println("Hello World!");
        }
    }
}

툴바

최대한 간단하면서 편리하게 제작했습니다.
키보드나 마우스 모두 어떤 것을 사용하더라도 편하며 검색기능을 이용하면 더욱 빠르게 언어를 선택할 수 있습니다.

스타일패키지를 선택하기 전에 대략적인 색상을 파악할 수도 있습니다.

확장 스토어

이제 확장스토어에서 언어팩이나 스타일패키지를 적용하거나 제작 및 업로드 할 수 있습니다.
확장스토어에서 플러그인 적용 후 colorscripter.com 사이트를 새로고침 하면 바로 사용 가능합니다

저작자표시

'유용한 툴 > UTIL' 카테고리의 다른 글

hp무한잉크 사용후 문제 해결방법 (0)	2018.04.18
TTS 글 읽어주는 프로그램 네오스피치 소개 (0)	2018.01.18
내컴퓨터 인터넷 속도측정 ,웹접속테스트,경로추적 (0)	2018.01.15
인기있는 유용한 util 댕댕콘 만들기 (0)	2017.12.23

itworldkorea

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

,

기초 CSS 문법 강좌

홈페이지제작/CSS 2017. 11. 23. 12:13

CSS 문법은 다음과 같습니다.
selector {
property: value
}

selector(선택자)로 어떤 요소를 꾸밀지 정하고, property(속성)로 어떤 모양을 꾸밀지 정합니다. value(값)에는 모양의 값을 넣습니다.

property와 value를 합쳐서, 즉
property: value

를 declaration(선언)이라고 합니다.

예를 들어 다음과 같은 코드가 있다고 할 때,
h1 {
color: red
}

선택자(selector)는 h1으로 h1 요소를 꾸미겠다는 뜻입니다. 속성(property)은 color로 색을 바꾸겠다는 것이고, 값(value)이 red이므로 빨간색으로 만듭니다.

여러 개의 선언

선언(declaration)은 여러 개 넣을 수 있습니다. 선언과 선언 사이에는 세미콜론(;)을 넣어 구분합니다.

선언이 하나만 있거나, 여러 개의 선언이 있을 때 마지막 선언에는 세미콜론은 넣지 않아도 되나, 보통은 선언 뒤에 항상 세미콜론을 붙입니다.
selector {
property: value;
property: value;
...
property: value;
}

값에 공백이 있는 경우

선택자(selector)나 속성(property)에는 공백이 없습니다. 하지만 값에는 공백이 있을 수 있습니다. 값(value)에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

예를 들어 문단의 글꼴을 Times New Roman로 하고 싶다면
p {
font-family: 'Times New Roman';
}

또는
p {
font-family: "Times New Roman";
}

와 같이 합니다.

공백

CSS 코드에서 공백은 의미가 없습니다. 즉,
selector {
property: value;
property: value;
}

와
selector {property: value; property: value;}

는 같은 결과를 만듭니다.

결과는 같지만, 줄바꿈과 띄어쓰기가 많을수록 파일 크기가 늘어납니다. 따라서 코드를 만들 때는 가독성있게 작업하고, 완성된 후에는 공백을 없애기도 합니다.

주석

주석(Comment)은 /*과 */ 사이에 씁니다.
/* Comment */

/*과 */ 사이에 줄바꿈이 있어도 모두 주석으로 인식합니다.
/*
Comment 1
Comment 2
*/

저작자표시

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

[CSS 기초] 타입 선택자(Type Selector) (0)	2017.11.25
[CSS 기초] 전체 선택자(Universal Selector) (0)	2017.11.25
CSS에서의 색상 설정 (0)	2017.11.18
CSS 텍스트에 굵기를 지정 (0)	2017.11.15
CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기 (0)	2017.11.15

itworldkorea

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

,

CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기

홈페이지제작/CSS 2017. 11. 15. 10:38

이 번 강좌에서는 배운 글씨체, 크기, 형태, 굵기, 칼라 등등 적용해봅니다

그렇게 하기 위해서 여러개의 요소를 넣는 법을 알아야 하는데요 방법은 간단합니다.
태그{font-family:값;line-height:20px;letter-spacing:30px;font-style:italic;text-decoration:underline}

위와 같이 {속성:값;속성:값;속성:값} 으로 진행 하시면 됩니다. 속성과 값을 입력하고 구분은 ;(세미콜론)을 사용하구요.^^

그럼 테스트 해봅시다.

텍스트에 스타일 적용

이번에는 텍스트에 스타일시트를 적용해 보도록 할게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
</head>
<body>
<p> hello world </p>
</body>
</html>

기본 소스는 위의 소스로 테스트를 할거구요.

글씨체 적용하기

글씨체를 적용할려면 font-family 속성을 이용 하면 됩니다.
셀럭터{font-family:글씨체1,글씨체2,글씨체3}

위의 css에서 셀럭터는 앞에서 설명한 .클래스명, 태그명 을 말합니다.

그리고 font-family는 글씨체를 적용하는 속성이구요, 값이 글씨체1,2,3가 있는 이유는 우선순위 입니다. 첫번재 글씨체가 없으면 그 다음 글씨체 적용 또 없다면 그 다음 글씨체 적용 이런 순입니다.

그럼 한번 적용해 보도록 합시다.
p{font-family:verdana}

위의 소스를 적용 하면 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-family:verdana}
</style>
</head>
<body>
<p> hello world </p>
</body>
</html>

위의 소스를 웹에디터나 본인의 에디터에 적용을 시켜보세요. 그리고 해당 CSS 를 없애서 차이를 비교해 보시면 됩니다.

글씨 크기 적용하기

이번에는 글씨 크기를 적용해 봅시다.
p{font-size:값}

위와 같이 적용을 합니다. 그리고 단위는 pt 와 px 가 있습니다. 더 있는데 일단 이것만 알아두도록 합시다.

pt는 절대값이고 px는 상대값 입니다. pt는 절대값이기 때문에 거의 쓰지 않고 px를 대부분 사용 합니다.

그 이유는 모니터 해상도에 따라서 글씨 크기가 적절히 변하고 모바일로 띄워도 맞게끔 크기를 변경해 줍니다.

그러므로 px(상대값)를 많이 사용 합니다.
p{font-size:12px}

적용해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-size:12px}
</style>
</head>
<body>
<p> hello world </p>
</body>
</html>

위의 소스를 테스트 해보시고 px값을 변경해서 테스트 해 봅시다.

글씨 형태 지정하기
p{font-style:값}

값에는 italic 와 normal 이 있으며 normal은 italic효과를 주지 않는 것이구요 italic를 주면 이탤릭 효과가 적용 됩니다.

font-style은 이탤릭 효과를 줄 때 사용 합니다.

그럼 예제로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-style:italic}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>

위의 소스를 에디터로 테스트 해보면 이탤릭 효과를 볼 수 있습니다.

저작자표시

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

CSS에서의 색상 설정 (0)	2017.11.18
CSS 텍스트에 굵기를 지정 (0)	2017.11.15
CSS에 텍스트에 굵기를 지정 (0)	2017.11.15
CSS에 텍스트(글씨)를 꾸미는 방법에 (0)	2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용 (0)	2017.11.14

itworldkorea

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

,

CSS에 텍스트에 굵기를 지정

홈페이지제작/CSS 2017. 11. 15. 10:36

텍스트에 굵기를 지정
p{font-weight:값}
값에는 bold, normal 그리고 100 ~ 900 까지의 숫자가 들어갑니다.
자료에는 100~900 까지 단계별로 굵기가 나타난다고 설명되어 있으나 테스트 해본결과 100~500까지는 normal
600~ 900 까지는 bold 로 처리되네요..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
.bold{font-weight:bold}
.normal{font-weight:normal}
.hundred{font-weight:100}
.fourhundred{font-weight:400}
.ninehundred{font-weight:900}
</style>
</head>
<body>
<p class="bold">i am bold</p>
<p class="normal">i am normal</p>
<p class="hundred">i am 100</p>
<p class="fourhundred">i am 400</p>
<p class="ninehundred">i am 900</p>
</body>
</html>

결과를 보면

bold

텍스트 자간 지정하기

글씨의 양옆 간격을 줄이거나 늘리거나 할때 letter-spacing를 사용합니다.
p{letter-spacing:px}
값은 px,pt,em등등 저는 px만을 사용 합니다. 상대값이라서 모니터 해상도에 따라 맞춰주니까요.

예문으로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{letter-spacing:10px}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>

위의 소스에서 px값들을 바꿔 가면서 테스트 해보시길 바라며, 혹시 위의 소스들을 그대로 복사 붙여넣기 하시는 분은 안계시겠죠?

기본 html구조를 다 숙지 하셨다면 괜찮은데 그렇지 않다면 손으로 쳐보면서 익히셔야 효과가 좋습니다. 이거구나 하고 넘어가는것보다
실제로 쳐보면 더 좋습니다.

기본 보다 더 붙이고 싶다면 -1px이런식으로 음수를 주셔도 됩니다.

줄간격 지정하기

줄간격을 컨트롤해봅시다.
p{line-height:값}
값은 %로 줄수도 있고 px로도 줄 수 있습니다.

테스트를 해봅시다. p태그의 폭을 300px로 맞춰서 해보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{width:300px;line-height:20px}
</style>
</head>
<body>
<p> 신용·체크카드 사용액 소득공제와 보험료, 의료비, 교육비 등 고소득 근로자의 세 부담 경감 효과가 큰 항목은 공제혜택을 없애거나 세액공제로 전환하고서 단계적으로 줄이겠다는 것이다.
</p>
</body>
</html>

위의 소스에서 px값을 달리하여 테스트도 해보고 %로 값을 주고 테스트 해보시기 바랍니다. 그럼 감 잡습니다.

텍스트에 줄 긋기

텍스트에 줄긋는것은 html 2강 심플스타일 태그에서 했는데요.

그 강좌는 이러한 것들이 있다는것을 알려주는것일 뿐이었고, 이것을 스타일시트로 제어를 해야 합니다.

그러므로 그 강좌는 그저 그러한 태그들이 있었다 정도로 사용여부는 본인이 결정하시면 됩니다.

필자는 되도록이면 css로 할수 있는것은 최대한 css로 한다는 생각을 갖고 있어서요.^^;

텍스트에 줄긋기를 적용 시킬려면 text-decoration을 사용한답니다.
p{text-decoraton:값}
값에는 underline : 밑줄긋기
none : 효과없음
overline : 텍스트 위에 선 긋기
line-through : 텍스트 가운데 선 긋기

그러면 텍스트에 줄을 그어 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{text-decoration:underline}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>

위 소스에서 text-decoration의 값을 overline, line-through, none으로 변경해가면서 테스트 해보세요.

저작자표시

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

CSS 텍스트에 굵기를 지정 (0)	2017.11.15
CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기 (0)	2017.11.15
CSS에 텍스트(글씨)를 꾸미는 방법에 (0)	2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용 (0)	2017.11.14
CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용 (0)	2017.11.14

itworldkorea

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

,

CSS에 텍스트(글씨)를 꾸미는 방법에

홈페이지제작/CSS 2017. 11. 15. 10:33

이제 텍스트(글씨)를 꾸미는 방법에 대해서 학습하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
</head>
<body>
<p> hello world </p>
</body>
</html>

기본 소스는 위의 소스로 테스트를 할거구요.

글씨체 적용하기

글씨체를 적용할려면 font-family 속성을 이용 하면 됩니다.
셀럭터{font-family:글씨체1,글씨체2,글씨체3}

위의 css에서 셀렉터는 앞에서 설명한 .클래스명, 태그명, 아이디를 의미합니다.

그리고 font-family는 글씨체를 적용하는 속성이구요, 값이 글씨체1,2,3가 있는 이유는 우선순위 입니다. 첫번째 글씨체가 없으면 그 다음 글씨체 적용 또 없다면 그 다음 글씨체 적용 이런 순입니다.

그럼 한번 적용해 보도록 합시다.
p{font-family:verdana}

위의 소스를 적용 하면 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-family:verdana}
</style>
</head>
<body>
<p> hello world </p>
</body>
</html>

위의 소스를 웹에디터나 본인의 에디터에 적용을 시켜보세요. 그리고 해당 CSS 를 없애서 차이를 비교해 보시면 됩니다.

글씨 크기 적용하기

이번에는 글씨 크기를 적용해 봅시다.
p{font-size:값}

위와 같이 적용을 합니다. 그리고 단위는 pt 와 px 가 있습니다. 더 있는데 일단 이것만 알아두도록 합시다.

pt는 절대값이고 px는 상대값 입니다. pt는 절대값이기 때문에 거의 쓰지 않고 px를 대부분 사용 합니다.

그 이유는 모니터 해상도에 따라서 글씨 크기가 적절히 변하고 모바일로 띄워도 맞게끔 크기를 변경해 줍니다.

그러므로 px(상대값)를 많이 사용 합니다.
p{font-size:12px}

적용해 봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-size:12px}
</style>
</head>
<body>
<p> hello world </p>
</body>
</html>

위의 소스를 테스트 해보시고 px값을 변경해서 테스트 해 봅시다.

글씨 형태 지정하기
p{font-style:값}

값에는 italic 와 normal 이 있으며 normal은 italic효과를 주지 않는 것이구요 italic를 주면 이탤릭 효과가 적용 됩니다.

font-style은 이탤릭 효과를 줄 때 사용 합니다.

그럼 예제로 테스트를 해봅시다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 꾸미기</title>
<style>
p{font-style:italic}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>

위의 소스를 에디터로 테스트 해보면 이탤릭 효과를 볼 수 있습니다

저작자표시

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

CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기 (0)	2017.11.15
CSS에 텍스트에 굵기를 지정 (0)	2017.11.15
[CSS강좌] 태그만 선언되게 하는 방법 /아이디를 선택자 사용 (0)	2017.11.14
CSS강좌 / 태그에 클래스 속성을 지정하여 선택자 사용 (0)	2017.11.14
[CCS강좌] CSS 셀렉터(선택자) 사용하는 법 (0)	2017.11.14

itworldkorea

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

,

windows 10에서 ATOM설치하기

프로그래밍/리눅스 2017. 10. 6. 10:37

ATOM 설치

코딩을 할 수 있는 에디터를 설치하겠습니다.

저는 에디터로 EditPlus에디터를 사용하고 있습니다.

우선 ATOM을 설치하겠습니다.

ATOM 다운로드를 위해 여기를 클릭하세요. [여기]

여기를 누르면 다음과 같이 아톰 홈페이지가 나타납니다.

화면에 보이는 Download Windows Installer을 눌러주세요.

다운로드 폴더에 가서 AtomSetup파일을 실행하면 설치가 끝난후 다음과 같이 에디터가 나타납니다.

이제 아톰에디터에 Hello World를 작성하고 이것을 웹페이지에 띄워보겠습니다.

Hello World를 작성해주세요.

이제 이 파일을 바탕화면에 web이라는 폴더를 만든 후 helloworld.html 파일명으로 저장해주세요.

이제 저장한 helloworld.html를 더블클릭하여 실행해 주세요

이제 HTML부터 시작해서 순차적으로 CSS, JavaScript, jQuery, MysQL, PHP를 배워봅시다.

저작자표시

'프로그래밍 > 리눅스' 카테고리의 다른 글

Bitnami로 내PC에 아파치웹서버 간단하게 구축하기 (0)	2018.01.22
[CentOS 리눅스] MySQL 설치하고 비밀번호 생성하기 (0)	2018.01.19
[집에서 리눅스서버설치] ubuntu 강좌 소개 (0)	2017.10.05
SSH 접속 프로그램 PuTTY 사용법과 Telnet 명령어 (0)	2017.05.29
리눅스 트리 계층구조( linux tree directory) 이해 (0)	2017.04.26

itworldkorea

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

,

div태그로 홈페이지 레이아웃 만들기

홈페이지제작/HTML 2017. 9. 25. 11:39

div태그로 홈페이지 레이아웃 만들기

웹디자인할 때 필수적으로 알아야 할 내요입니다.

처음 홈페이지의 구성도를 만들어서 작업을 해야하는데

이 때

최근 웹 표준 및 레이아웃 구현에 있어서 <table> 태그가 아닌 <div>가 필수적이라는 사실입니다. 기존의 table 태그의 속성 및 레이아웃 구성 방법은 완전히 이해하고 있지만,

div로 레이아웃을 할 때는 완전히 다르기 때문에 필히 아셔야 겠지요

위와 같은 레이아웃을 div 태그로 변환을 하고싶습니다. 정확히 어느부분을 <top>으로 구성하며 어느부분을 <section>으로 해야할지 알아봅니다.

특히 공지사항,이벤트,자유게시판의 상위 5개 레코드만 출력될 크기의 레이아웃 3개를 붙이는 것은 float 속성을 사용하는지도 알아봅니다.

Logo

</div>

</ul>

</header>

</div>

Notice

</div>

Event

</div>

Freeboard

</div>

Sub Banner 1

</div>

Popular Goods

</div>

Sub Banner 2

</div>

</scection>

<footer>

</footer>

해당 레이아웃과 HTML 코드에 맞게 CSS를 작성해서 사용하시고

안에 들어가는 내용들은 원하는 디자인에 맞게 기입하여 작업하시면 될 것같습니다.

직장을 다니면서 투잡 ( 재택알바 / 부업 )으로 월급만큼 수익을 얻을 수 있는 곳을 소개합니다.

저작자표시

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

HTML 5 를 시작해야하는 이유 (0)	2017.10.25
[홈페이지 제작 ] HTML 기초와 HTML 편집기 (0)	2017.10.17
[html] 테이블 태그 <table> </table> 태그 구조 (0)	2017.09.02
[html] 홈페이지에 이미지올리는 img태그 (0)	2017.09.02
HTML 기본 구조 (0)	2017.09.01

itworldkorea

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

,

'CSS'에 해당되는 글 19건

웹 퍼블리셔 과정 HTML/DreamWeaver CS5 (드림위버)

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

[MS SQL] SQL 기초 학습 / SQL이란?

'프로그래밍 > MS-SQL' 카테고리의 다른 글

[CSS 기초강좌] 아이디 선택자(ID Selector)

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

인터넷에 다양한 언어 소스코드를 업로드 할 수 있다

'유용한 툴 > UTIL' 카테고리의 다른 글

기초 CSS 문법 강좌

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

CSS에 글씨체, 크기, 형태, 굵기, 칼라 적용하기

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

CSS에 텍스트에 굵기를 지정

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

CSS에 텍스트(글씨)를 꾸미는 방법에

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

windows 10에서 ATOM설치하기

'프로그래밍 > 리눅스' 카테고리의 다른 글

div태그로 홈페이지 레이아웃 만들기

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

itworldkorea

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					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