코딩이나 HTML을 공부하려면 

꼭 필요한게 HTML편집기입니다.

많은 html편집기와 html 에디터 중에서

최고를 뽑으라고 하면 

아톰 에티더를 추천합니다.

아톰 에디터 아톰 에디터


아톰 에디터는

직접 사용을 해보면 장점이 많은 프로그램입니다.


아톰 에디터의 가장 큰 장점은

무료이면서 강력한 퍼포먼스입니다.


아톰 에디터는 오픈소스이기때문에 

다양한 확장기능과 

윈도우 뿐만 아니라 리눅스 등 다양한 os와 

대부분의 PC 환경에서 사용을 할 수 있는 장점이 있습니다. 


운영하는데 살짝 무겁기는 하지만

그래도 어지간한 pc에서는 대부분 사용이 가능합니다.


그럼 지금부터 

html편집기!!!

아톰 에디터 Atom editor 설치를 해보겠습니다.

 

구글에서 아톰에디터를 검색합니다.

아톰 에디터 아톰 에디터

아래 링크를 클릭하면 아톰 에디터를 다운 로드 받을 수 있습니다.

검색 후 아톰 에디터 공식 사이트로 점속을 하거나 

아래를 클릭해서 다운로드를 실행합니다.


아톰에디터 다운로드 

아톰 에디터 아톰 에디터

아톰 에디터 공식 홈페이지가 실행 되면 

우측 하단의 다운로드 버튼을 눌러서 아톰 에디터를 받을 수 있습니다

아래와 같은 파일이 다운 로드하고 관리자 권한으로 실행을 해줍니다.

관리자 권한으로 실행을 하면

설치 화면이 보입니다.

알아서 설치를 해주니까 

설치 되는 동안 잠깐만 기다리면 됩니다.

아톰 에디터 아톰 에디터

안내문구나 나오는데

그냥 Open Setup log를 클릭하면 됩니다

아톰 에디터 아톰 에디터

Open Setup log을 클릭하고 잠시 기다리면

설치가 완료 됩니다.


아톰 에디터 아톰 에디터

생성된 아이콘을 클릭하면 다음과 같은 화면이 나입니다.

위의 파란 박스는 시간 나실 때 꼭 읽어보시가 바랍니다.

지금은 아톰 설치를 하는게 중요하니 

그냥 YES를 클릭합니다.

아톰 에디터 아톰 에디터

아주 간단하죠.

이제 open a Project를 클릭하고 

프로젝트를 진행하면 됩니다.

아톰 에디터 아톰 에디터


html편집기!!!

아톰 에디터 Atom editor 설치하기였습니다









저작자표시 비영리 변경금지

'IT > HTML5' 카테고리의 다른 글

html5언어 구조_index.html  (0) 2018.08.25
HTML의 기본 문법 (Basic HTML Grammar)  (0) 2018.08.20
엑셀 함수 정리  (0) 2018.04.10
[html 소스]전화번호 문자 보내기 링크 걸기  (0) 2018.03.17

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기


티스토리와 구글 애드센스

네이버 블로그, 다음 블로그, 티스토리, 구글 블로그등 여러가지 형태의 블로그들이 있습니다.

이러한 블로그 중에서도 설치형 블로그가 있는데 티스토리나 워드프레스등으로 만드는 블로가가 대표적인 설치형 블로그라고 할 수 있습니다.


많은 분들이 티스토리를 하죠.

티스토리는 하면 할 수록 빠져들고 분명히 매력적인 블로그인것 많은 확실합니다.

네이버 블로그도 아주 좋지만 만지기 좋아하고 자기만의 개성있는 블로그를 만들고 싶어 하는 블로거들에게는 아주 매력적인것은 도구입니다.


자동차 관련 네이버 블로그를 운영하고 있지만 티스토리도 제대로 한번 운영을 해볼까합니다...ㅎㅎ

티스토리와 네이버 블로그의 가장 큰 차이점은 광고 수익 시스템인데요.

티스토리와 구글 애드센스등과 같은 매체와 연결이 가능합니다.


티스토리 에드센스 광고 삽입하기

티스토리 에드센스 광고 삽입하기에 대해서 알아보겠습니다.


일단 구글 애드센스 계정이 필요하겠지요.

애드센스 계정 만들기도 별도로 포스팅을 하겠습니다.

오늘은 티스토리에 애드센스 광고 삽입하는 방법을 배워야 하니까...ㅎㅎ

티스토리 애드센스 광고 삽입하기


티스토리 플러그인

티스토리 로그인을 하고 좌측 카테고리 하단에 플러그인이라고 있습니다.

이 플러그인은 티스토리의 아주 중요한 기능중에 하나니까 꼼꼼하게 살펴보시길 바랍니다.

플러그인을 클릭하면 메인 화면에 여러가지 플러그인이 나타납니다.

캡처 화면에는 3개가 나오지만 상단의 전체 플러그인 갯수에는 44개가 있군요.

물론 플러그인은 용도에 따라서 더 만들수도 있습니다.

하지만 딱히 더 만들지 않아도 티스토리 플러그인 44를 다 사용하기도 벅차기때문에 있는 것만 잘 활용해도 아주 좋은 효과를 만들수 있습니다.

스크롤 바를 아래로 죽~내려도 찾을 수가 있지만 상단 [광고]라고 검색을 하면 광고 플러그인이 검색됩니다.

티스토리 애드센스 광고 삽입하기

[광고]라고 검색을 하니까 7개의 광고 플러그인이 나오는군요.

그중에 구글 애드센스는 PC, 모바일, 반응형 세가지 플러그인이 나옵니다.

요즘 대세가 반응형이죠.

저도 반응형 티스토리를 사용하기때문에 반응형 구글 애드센스 광고를 삽입해보겠습니다.


티스토리 애드센스 광고 삽입하기


구글 애드센스 새 광고 단위 만들기

구글 애드센스 pc 버전 플러그인을 클릭하니 위와 같은 화면이 나오는군요.

구글 애드센스 pc광고는 상단과 하단에 할 수 있습니다.

물론 여기에는 애드센스에서 요구하는 규정이 있기때문에 그 규정을 꼭 준수해주시기 바랍니다.

광고 배치 유형 중에 1 가지를 선택해주세요. 상단/하단 각 1개씩 선택 가능합니다.

광고 코드 입력창에 애드센스 광고 코드를 넣어주어야 하는데 애드센스 광고 삽입의 중요한 포인트는 꼭 사이즈를 맞추어야 한다는 것입니다.

사이즈가 안맞으면 엑박이 나오거나 광고부분이 하얗게 아무것도 안나오는 경우가 있습니다.

그럼 구글 애드센스로 넘어가서 광고를 만들어 보겠습니다.

티스토리 애드센스 광고 삽입하기

구글 애드센스에 접속을 해서 좌측에 내 광고>>>광고 단위를 클릭해서 광고 단위 아래 [새 광고 단위]를 하나 만들줍니다.

이미 광고를 하고 있기때문에 몇 개의 광고가 보이는데 이 광고들은 샘플 광고들이고 설정에서 내 광고를 보이게도 할 수 있고 보이지 않게 할 수 있는 기능도 있습니다.


일단 새로운 광고를 하나 만들어 보겠습니다.

티스토리 애드센스 광고 삽입하기

텍스트 및 디스플레이 광고, 

일치하는 콘텐츠. 

인피드 광고,

콘텐츠 내 자동 삽입광고 

이렇게 4가지 유형이 나옵니다.

가장 기보적인 [텍스트 및 디스플레이 광고]를 새 광고 단위로 만들어 보겠습니다.

가독성을 좋게 하기 위해서 상단에 720*90 사이즈의 새 광고 단위를 만들었습니다.

티스토리 애드센스 광고 삽입하기


티스토리에 광고 단위 삽입하기

광고코드가 생성 되었습니다.

이제는 저 광고 코드를 티스토리 구글 애드센스 플로그인에 붙복을 하고 적용 버튼을 누르면 설정이 완료됩니다.

티스토리 애드센스 광고 삽입하기

티스토리 애드센스 광고 삽입하기에 대해서 알아봤는데 생각보다 간단하죠.

이런식으로 몇 번 수정을 하다보면 내가 원하는 디자인으로 광고를 만들 수 있습니다.

여러가지 모양으로 만들어보고 삽입해보고 하면 재미도 있고 많은 돈은 아니지만 쏠쏠하게 들어오는 광고료가 나름 재미도 있습니다.

2018/07/17 - [IT/엑셀] - 엑셀 피펏테이블 : 엑셀 피벗테이블!!!무엇에 쓰는 물건인고~~

2018/07/17 - [IT/엑셀] - 엑셀 피펏테이블 : 엑셀 피벗테이블!!!무엇에 쓰는 물건인고~~

2018/07/17 - [IT/엑셀] - 엑셀 피펏테이블 : 엑셀 피벗테이블!!!무엇에 쓰는 물건인고~~


티스토리 애드센스 광고 삽입되면 이런 식으로 수익이 창출되는데 구글 애드센스를 이해하면 또 다른 세상이 보일것입니다.

이미 앞서가는 크리에이터들은 이미 구글 애드센스에서 훌륭한 수익구조를 만들어 내고 있습니다.


우리도 한번 도전 해봅시다....ㅎㅎ

저작자표시 비영리 변경금지

'IT > 티스토리 꾸미기' 카테고리의 다른 글

티스토리[Tistory] 코드 소스 신텍스 하이라이터 SyntaxHighter 설치하기!!!설정과 활용  (0) 2018.08.26
html에 사용하는 GIF이미지들  (0) 2018.08.20
티스토리 글서식  (0) 2018.08.20
티스토리 사이트맵  (0) 2018.07.13

 본 내용은 함께 배우기 위한 글이기때문에 오류가 있을 수 있습니다.

오류나 오타가 발견되면 댓글이나 쪽지로 주시면 감사하겠습니다

ㅎㅎ
 

엑셀 피벗 테이블이 무엇인지에 대해서 알아보겠습니다.

피벗 테이블

피벗 테이블

피벗 테이블

엑셀의 가장 강력한 기능으로 모르는 사람은 모르고 아는 사람은 아는

몰라도 사는데는 지장이 없으나 알면 아주 편하게 살수 있는 입니다.


말은 이렇게 거창하게 하였으나 사실 간단한 것입니다.


피벗 테이블을 말하기 전에

OLAP라는 것을 말해야 할 것 같습니다

OLAP라는 것은 다차원적 정보를 분석하고 의사결정에 활용하는 것을 말합니다.

다차원적 정보???

이건 또 뭔 소리~

피벗 테이블이야기 하면서 먼 쓸데없는 소리냐~

빨리 피벗테이블이나 설명해라~

하시겠지만~


OLAP는 

피벗 테이블이란분이 OLAP를 위한 가장 간단한 도구라고 할 수 도 있기 때문이다.


저 위에 말중에 하나만 생각하면 됩니다..

다차원적 정보~


피벗 테이블을 알려면 

다차원적 정보란 놈을 이해 하는 것이 중요합니다.

1차원도 아니고 다차원적 정보라네요.


아주 쉽게~

원초적으로 생각하면~

어떤~어떤~ 

데이터가 있는데..

그 데이터는 나이, 성별, 사는 지역, 제품명, 구매개수, 구매액 정도가 있다고 생각하면..

이러한 놈들이 그냥 다차원적 정보입니다. 

엑셀 피펏테이블_1

위의 엑셀 파일을 보면 

첫번째 줄에 닉네임/ 나이 / 성별 / 지역 / 구매 제품/ 구매 수량 / 구매액이 있죠

닉네임도 하나의 차원,

나이도 하나의 차원, 

성별도 하나의 차원, 

지역도 하나의 차원, 

구매 제품도 하나의 차원,

구매 수량도 하나의 차원,

구매액도 하나의 차원, 

이렇게 모두

하나의 차원이라고 생각하면 

이 정보도 다차원적 정보입니다.


피벗 테이블은 이렇게 차원이 많은 데이터를 분석하기 위한 도구입니다.

만약 위 표를 나이를 세로로 성별을 가로로 하고 구매액 합계를 데이터 값으로 한다면.. 

엑셀 피펏테이블_2

피벗 테이블 기능을 사용하면

이렇게 원하는 데이터만 출력 할 수가 있습니다~


엑셀에서 위 표처럼 만드는 것이 피벗 테이블입니다.

엑셀 피펏테이블_3

위의 표처럼 남자들만 보고 싶으면..

10대 여자들만 보고 싶으면..


아님 지역별 남여, 나이 차이를 보고 싶다면.. 


손으로 일일이 위에처럼 만들지 말고 

피벗 테이블을 사용하면 됩니다.

그럼 이제 정말 피벗 테이블의 세계로

드루와~

드루와~





저작자표시 비영리 변경금지

'IT > 애드센스 관련' 카테고리의 다른 글

구글 애구글 애드센스를 그누보드5에 띄우는 법 2  (0) 2018.10.18

sitemap.xml


won,s factory의 티스토리 사이트맵 좌표입니다.



참고사이트

http://foxcg.com/546


http://prolite.tistory.com/828


저작자표시 비영리 변경금지

'IT > 티스토리 꾸미기' 카테고리의 다른 글

티스토리[Tistory] 코드 소스 신텍스 하이라이터 SyntaxHighter 설치하기!!!설정과 활용  (0) 2018.08.26
html에 사용하는 GIF이미지들  (0) 2018.08.20
티스토리 글서식  (0) 2018.08.20
티스토리 애드센스 광고 삽입하기  (0) 2018.07.20



1. 논리/조건함수[8개]

모두 TRUE면 TRUE

AND

함수 이름

AND

기능

인수가 모두 TRUE이면 TRUE를 출력한다.

함수식

=AND(인수 1, 인수 2, 인수 3...)

하나라도 TRUE면 TRUE

OR

함수 이름

OR

기능

인수 중 하나라도 TRUE이면 TRUE를 출력한다.

함수식

=OR(인수 1, 인수 2, 인수 3...)

TRUE 출력

TRUE

함수 이름

TRUE

기능

논리값 TRUE 를 출력한다.

함수식

=TRUE()

FALSE 출력　

FALSE

함수 이름

FALSE

기능

논리값 FALSE 를 출력한다.

함수식

=FALSE()

논리값을 반대로 출력

NOT

함수 이름

NOT

기능

수를 반올림한다.

함수식

=NOT(인수)

조건에 따라 값 구하기

IF

함수 이름

IF

기능

조건의 참/거짓 여부에 따라 서로 다른 값을 출력한다.

함수식

=IF(조건식,참일때 값,거짓일때 값)

조건에 맞는 값만 더하기

SUMIF

함수 이름

SUMIF

기능

주어진 조건에 의해 지정된 셀들의 합을 구한다.

함수식

=IF(조건 검사 셀,조건,합을 구할 셀)

조건에 맞는 셀의 개수

COUNTIF

함수 이름

COUNTIF

기능

범위에서 조건에 맞는 셀의 개수를 출력한다.

함수식

=COUNTIF(범위,조건)




2. 수학/계산 함수[10개]

덧셈 함수

SUM

함수 이름

SUM

기능

값들을 모두 더한 값을 출력한다.

함수식

=SUM(값 1, 값 2, 값 3...)

나눗셈의 몫

QUOTIENT

함수 이름

QUOTIENT

기능

피제수를 제수로 나눈 몫을 구한다.

함수식

=QUOTIENT(피제수(분자),제수(분모))

나눗셈의 나머지

MOD

함수 이름

MOD

기능

피제수를 제수로 나눈 나머지를 구한다.

함수식

=MOD(피제수(분자),제수(분모))

자연수로 내림하기

INT

함수 이름

INT

기능

수를 가장 가까운 자연수로 내림한 값을 출력한다.

함수식

=INT(수)

반올림하기

ROUND

함수 이름

ROUND

기능

수를 반올림한다.

함수식

=ROUND(수,소수점 이하 자릿수)

제곱근 구하기

SQRT

함수 이름

SQRT

기능

양의 제곱근을 구한다.

함수식

=SQRT(수)

난수 출력

RAND

함수 이름

RAND

기능

0부터 1까지의 난수를 출력한다.

함수식

=RAND(

원하는 배수로 반올림

MROUND

함수 이름

MROUND

기능

수를 입력된 배수로 반올림한다.

함수식

=MROUND(수,배수)

거듭제곱하기

POWER

함수 이름

POWER

기능

수를 거듭제곱한다.

함수식

=POWER(밑,지수)

조합 수 구하기

COMBIN

함수 이름

COMBIN

기능

만들 수 있는 조합의 수를 구한다.

함수식

=COMBIN(개체수,각조합의개체수)



3. 날짜/시간 함수[10개]

'일' 출력

DAY

함수 이름

DAY

기능

값에 해당하는 날짜(일)를 출력한다.

함수식

=DAY(날짜/시간을 나타내는 값)

'월' 출력

MONTH

함수 이름

MONTH

기능

값에 해당하는 달(월)을 출력한다.

함수식

=MONTH(날짜/시간을 나타내는 값)

'년' 출력

YEAR

함수 이름

YEAR

기능

값에 해당하는 해(년)를 출력한다.

함수식

=YEAR(날짜/시간을 나타내는 값)

'초' 출력

SECOND

함수 이름

SECOND

기능

값에 해당하는 '초' 를 출력한다.

함수식

=SECOND(날짜/시간을 나타내는 값)

'분' 출력

MINUTE

함수 이름

MINUTE

기능

값에 해당하는 '분' 을 출력한다.

함수식

=MINUTE(날짜/시간을 나타내는 값)

'시' 출력

HOUR

함수 이름

HOUR

기능

값에 해당하는 '시' 를 출력한다.

함수식

=HOUR(날짜/시간을 나타내는 값)

현재 시각 출력

NOW

함수 이름

NOW

기능

현재 시각을 출력한다.

함수식

=NOW()

현재 날짜 출력

TODAY

함수 이름

TODAY

기능

현재 날짜를 출력한다.

함수식

=TODAY()

날짜의 요일 

구하기

WEEKDAY

함수 이름

WEEKDAY

기능

출력 방법에 따라 해당 날짜/시간의 요일을 구한다.

함수식

=WEEKDAY(날짜/시간을 나타내는 값,출력방법)

전체 작업일 

수 구하기

NETWORK

/DAYS

함수 이름

NETWORKDAYS

기능

시작 날짜와 끝 날짜 사이의 주 5일제 기준 전체 작업일 수를 구한다.

함수식

=NETWORKDAYS(시작날짜,끝날짜,휴일)



4. 통계 함수[12개]

평균 구하기

AVERAGE

함수 이름

AVERAGE

기능

평균을 출력한다.

함수식

=AVERAGE(인수1, 인수2, 인수3...)

값이 있는 

셀 개수 구하기

COUNTA

함수 이름

COUNTA

기능

범위 내의 셀들 중 값이 있는 셀의 개수를 출력한다.

함수식

=COUNTA(인수1, 인수2, 인수3...)

조화 평균 구하기

HARMEAN

함수 이름

HARMEAN

기능

양수 데이터의 조화 평균을 출력한다.

함수식

=HARMEAN(수1, 수2, 수3...)

기하 평균 구하기

GEOMEAN

함수 이름

GEOMEAN

기능

양수 데이터나 범위의 기하 평균을 출력한다.

함수식

=GEOMEAN(수1, 수2, 수3...)

모집단의 

분산 구하기

VARP

함수 이름

VARP

기능

전체 모집단의 분산을 구한다(논리값, 텍스트 제외).

함수식

=VARP(수1, 수2, 수3...)

모집단의 표준편차 구하기

STDEVP

함수 이름

STDEVP

기능

모집단의 표준 편차를 구한다(논리값, 텍스트 제외).

함수식

=STDEVP(수1, 수2, 수3...)

표본 집단의 분산 구하기

VAR

함수 이름

VAR

기능

표본 집단의 분산을 구한다(논리값, 텍스트 제외).

함수식

=VAR(수1, 수2, 수3...)

표본 집단의 

표준편차

STDEV

함수 이름

STDEV

기능

표본 집단의 표준 편차를 구한다(논리값, 텍스트 제외).

함수식

=STDEV(수1, 수2, 수3...)

중간값 

구하기

MEDIAN

함수 이름

MEDIAN

기능

주어진 값들의 중간값을 구한다.

함수식

=MEDIAN(수1, 수2, 수3...)

K번째로 큰 값

LARGE

함수 이름

LARGE

기능

K번째로 큰 값을 구한다.

함수식

=LARGE(범위,K)

K번째로 작은 값

SMALL

함수 이름

SMALL

기능

K번째로 작은 값을 구한다.

함수식

=SMALL(범위,K)

최빈값 

구하기

MODE

함수 이름

MODE

기능

최빈값을 구한다.

함수식

=MODE(수1,수2,수3...)



5. 데이터 베이스[12개]

열의 평균 구하기

DAVERAGE

함수 이름

DAVERAGE

기능

지정한 조건에 맞는 데이터베이스에서 열의 평균을 출력한다.

함수식

=DAVERAGE(데이터베이스,열번호,조건범위)

숫자가 있는 

셀의 개수

DCOUNT

함수 이름

DCOUNT

기능

지정한 조건에 맞는 데이터베이스에서 숫자가 있는 셀의 개수를 출력한다.

함수식

=DCOUNT(데이터베이스,열번호,조건범위)

비어있지 않은 

셀의 개수

DCOUNTA

함수 이름

DCOUNTA

기능

지정한 조건에 맞는 데이터베이스에서 비어있지 않은 셀의 개수를 출력한다.

함수식

=DCOUNTA(데이터베이스,열번호,조건범위)

하나인 경우 

개별 출력하기

DGET

함수 이름

DGET

기능

찾을 조건에 맞는 레코드가 하나인 경우 그 레코드를 출력한다.

함수식

=DGET(데이터베이스,열번호,조건범위)

가장 큰 값 구하기

DMAX

함수 이름

DMAX

기능

지정한 조건에 맞는 데이터베이스에서 필드 값들 중 가장 큰 수를 출력한다.

함수식

=DMAX(데이터베이스,열번호,조건범위)

가장 작은 값 

구하기

DMIN

함수 이름

DMIN

기능

지정한 조건에 맞는 데이터베이스에서 필드 값들 중 가장 작은 수를 출력한다.

함수식

=DMIN(데이터베이스,열번호,조건범위)

곱 구하기

DPRODUCT

함수 이름

DPRODUCT

기능

지정한 조건에 맞는 데이터베이스에서 필드 값들의 곱을 출력한다.

함수식

=DPRODUCT(데이터베이스,열번호,조건범위)

표본 집단의 

표준편차

DSTDEV

함수 이름

DSTDEV

기능

지정한 조건에 맞는 데이터베이스에서 표본 집단의 표준편차를 출력한다.

함수식

=DSTDEV(데이터베이스,열번호,조건범위)

모집단의 표준편차

DSTDEVP

함수 이름

DSTDEVP

기능

지정한 조건에 맞는 데이터베이스에서 모집단의 표준편차 출력한다.

함수식

=DSTDEVP(데이터베이스,열번호,조건범위)

열의 합 구하기

DSUM

함수 이름

DSUM

기능

지정한 조건에 맞는 데이터베이스에서 열의 합을 출력한다.

함수식

=DSUM(데이터베이스,열번호,조건범위)

표본 집단의 분산

DVAR

함수 이름

DVAR

기능

지정한 조건에 맞는 데이터베이스에서 표본 집단의 분산을 출력한다.

함수식

=DVAR(데이터베이스,열번호,조건범위)

모집단의 분산

DVARP

함수 이름

DVARP

기능

지정한 조건에 맞는 데이터베이스에서 모집단의 분산을 출력한다.

함수식

=DVARP(데이터베이스,열번호,조건범위)



저작자표시 비영리 변경금지

'IT > HTML5' 카테고리의 다른 글

html5언어 구조_index.html  (0) 2018.08.25
HTML의 기본 문법 (Basic HTML Grammar)  (0) 2018.08.20
html편집기!!!아톰 에디터 Atom editor 설치하기  (0) 2018.08.01
[html 소스]전화번호 문자 보내기 링크 걸기  (0) 2018.03.17

html 소스 전화번호 문자 보내기 링크 걸기

모바일 페이지에서 전화번호 링크거는 방법

*pc에서 볼때는 적용되지 않으나 모바일에서 볼 경우엔 적용이 됩니다.


모바일 페이지에서 sms링크 거는 방법

*모바일에서 링크 클릭하면 문자보내는 페이지로 전환됩니다.


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>모바일에서 전화걸기/문자보내기</title>

</head>




<body>

<h1>모바일기능</h1>

<h2>모바일에서 전화걸기</h2>

<p><a href="tel:01046689925">전화걸기</a>


<h2>모바일에서 문자보내기</h2>

<p><a href="sms:01046689925">문자보내기</a></p>


</body>

</html>





저작자표시 비영리 변경금지

'IT > HTML5' 카테고리의 다른 글

html5언어 구조_index.html  (0) 2018.08.25
HTML의 기본 문법 (Basic HTML Grammar)  (0) 2018.08.20
html편집기!!!아톰 에디터 Atom editor 설치하기  (0) 2018.08.01
엑셀 함수 정리  (0) 2018.04.10

cascsding style sheets 적용하기


스타일 시트(cascsding style sheets)

  • 작업 페이지마타 같은 스타일을 지정하여 일관성을 부여합니다.
  • 스타일을 미리 만들어 저장하고 필요한 ㅂ1ㅜ분에 정의 해주는 기능입니다.
  • 글자의 크기, 서체, 배경과 배열 위치 등을 선택하여 설정 할 수 있고 만들어진 스타일 시트는 삭제, 편집이 가능합니다.

외부 스타일 시트

확장자가 CSS가 붙어서 저장되는 독립된 파일입니다.

한번 저장해 놓으면 다른 파일에서 연결하여 사용 할 수 있습니다.


내부 스타일 시트

CSS를 정의한 문서에서만 사용이 가능합니다.

문서안에 포함되어 저장 되고 다른 파일에서는 연결하여 사용 할 수 없습니다.


스타일 시트 만들기

  • 인라인 스타일 : 태그에 직접 적용되고 한번만 사용할 수 있습니다. 어떤 태그에 적용되고 있는지 코드를 통해 확인 할 수 있고 속성 창에서 값을 정의합니다.
  • 클라스: CSS 디자이너 패널을 통해 정의하여 사용합니다.
    1. 새CSS 파일 생성 : 외부 스타일 시트 정의
    2. 기존 CSS 파일 첨부 : 저장된 외부 스타일 시트 연결
    3. 이 페이지에 정의 :  내부 스타일 시트


스타일 시트(cascsding style sheets) 적용하기

스타일 시트 만들기

메뉴 -> window -> CSS디자이너 


소스 부분에서 + 부호를 눌러 새로운 스타일 시트를 만들 수 있습니다.
선택기 부분에서 태그나 클라스의 이름을 적거나 선택할 수 있습니다
속성 부분에서 정의 하고자 하는 값을 선택합니다.











저작자표시 비영리 변경금지

'IT > 드림위버CC' 카테고리의 다른 글

드림위버 CC 배우기 프레임 셋 태그 사용하기  (0) 2018.03.16
드림위버 CC 배우기 문서를 연결하는 링크 설정하기  (0) 2018.03.16
드림위버 CC 비우기 이미지를 삽입하고 링크 설정하기  (0) 2018.03.16
트림위버CC 배우기 1 글자와 페이지의 속성값 알아보기  (0) 2018.03.16

프레임 셋 태그 사용하기

레이아웃을 잡기 위해 화면을 분할하여 각각 나누어진 화면에 html문서를 불러들여 여러개의 파일을 하나의 파일에서 볼 수 있도록 하는 기능입니다.


드림위버CC 버전부터 프레임을 설정 할 수 있는 메뉴와 패널이 배제되었으므로 코딩창에서 직접 코딩하여 사용 할 수 있습니다.


네비게이션 테스트에 많은 시간이 소요되고 북마크의 어려움 가변적인 페이지 디자인의 방해 요소 등 다양한 단점들로 인해 최근 사용 빈도가 줄고 있으며 페이지를 레이아웃 하는 요소에서 베제되고 있습니다.


<frameset>

row="128,418"  행으로 분할

cols="183,1367" 열로 분할

frameborder="yes" 프레임 테두리 설정 여부 yes / no

border="5" 프레임 테두리의 두께

bordercolor="#99ff99" 테두리의 색상


<frame src="a,html">

</frameset>



<frame>

src="불러들일 파일 명"

scrolling="스크롤바의 생성 여부" auto / no / yes

noresize="noresize" 프레임의 크기 조절 불가

marginheight="0" 상하의 여백

marginwidth="0" 좌우 여백

name="b" 프레임의 이름 설정

저작자표시 비영리 변경금지

'IT > 드림위버CC' 카테고리의 다른 글

드림위버 CC 배우기 cascsding style sheets 적용하기  (0) 2018.03.16
드림위버 CC 배우기 문서를 연결하는 링크 설정하기  (0) 2018.03.16
드림위버 CC 비우기 이미지를 삽입하고 링크 설정하기  (0) 2018.03.16
트림위버CC 배우기 1 글자와 페이지의 속성값 알아보기  (0) 2018.03.16

목록만들기


시작번호 바꾸기

    • 시작번호에 시작할 번호를 입력하면 목록이 만들어 질 때 설정한 번호가 첫번째로 매겨짐니다.
    • 다른 페이지에서 리스트를 연결하거나 같은 페이지에서 연결되지 않은 새로운 목록에 시작 번호를 바꿔 연결된 것처럼 사용합니다.

링크 사용하기


LINK

문서와 문서, 도는 사이트와 사이트 등 정확한 주소를 입력하여 연결을 걸어주는 것을 말합니다.

<a href="http://www.f1motors.co.kr>F1MOTORS로 이동하기</a>


link 걸기

속성창 링크 부분에 파일의 이름 또는 주소를 입력합니다.
작업중인 문서와 같은 폴더에 저장 된 경우 파일 명만 입력하고 다른 폴더에 있는 문서와 링크를 걸 경우에는 경로를 정확히 입력합니다.

E-mail link

보통 관리자에게 전자우편을 보낼 수 있도록 하는 링크로 mailto:라고 입력 후에 전자 우편 주소를 입력합니다.

삽입 패널의 전자우편 항목을 선택하여 사용 할 수 있습니다.



저작자표시 비영리 변경금지

'IT > 드림위버CC' 카테고리의 다른 글

드림위버 CC 배우기 cascsding style sheets 적용하기  (0) 2018.03.16
드림위버 CC 배우기 프레임 셋 태그 사용하기  (0) 2018.03.16
드림위버 CC 비우기 이미지를 삽입하고 링크 설정하기  (0) 2018.03.16
트림위버CC 배우기 1 글자와 페이지의 속성값 알아보기  (0) 2018.03.16

이미지를 삽입하고 링크 설정하기


이미지 삽입

    메뉴 - 삽입 - 이미지

    삽입패널 - 이미지

W와 H : 이미지의 가로와 세로의 크기를 보여주고 조절 할 수 있습니다.

Src : 삽입된 이미지의 경로와 파일명이 보여집니다.

제목 : 브라우저에서 마무스가 이미지로 위로 올라갔을 때 말풍선으로 보여지는 이미지의 제목을 말합니다.

그림 설명 : 미미지가 삭제 되거나, 경로 설정이 잘 못 되어 브라우저에서 이미지를 볼 수 없을 때 보여지는 설명글입니다.

링크 : 이미지를 연결 매개로 하여 웹 페이지를 연결 할 수 있습니다.

대상 : 연결된 링크를 열 때, 어디에서 열릴 것인지 설정 할 수 있습니다.

이미지로 링크 설정하기
이미지를 선택하고 링크 항목에 연결 될 웹페이지나 / 사이트의 주소/ 이메일 주소를 입력합니다.


이미지로 맵 사용하기

한장의 이미지에 여러개의 링크를 걸 수 있습니다.

사각형, 원형, 다락형 형태의 핫스팟 토구를 이용하여 링크가 길럴 영역을 만들 수 있습니다.

링크가 걸릴 대상을 적어주고 링크가 열링 대상과 그림 설명을 삽입 할 수 있습니다.

저작자표시 비영리 변경금지

'IT > 드림위버CC' 카테고리의 다른 글

드림위버 CC 배우기 cascsding style sheets 적용하기  (0) 2018.03.16
드림위버 CC 배우기 프레임 셋 태그 사용하기  (0) 2018.03.16
드림위버 CC 배우기 문서를 연결하는 링크 설정하기  (0) 2018.03.16
트림위버CC 배우기 1 글자와 페이지의 속성값 알아보기  (0) 2018.03.16

+ Recent posts

티스토리툴바