에디트플러스 HTML 도구 활용법 (1)

1. HTML 도구 모음

 

1) 도구 모음

 

• 편집기 상단에 아래 그림처럼 가로로 보이는 이콘(icon)들의 모음.

 

에디트플러스 도구모음

 

2) 사용의 이익

 

•     태그 입력 - 마우스를 클릭으로 빠르게(원스탑으로) 입력할 수 있다.
•     색상, 특수문자, 표, 오브젝트 등도 - 도구를 이용하여 입력 편리.

 

 3) 도구 설정 방법

 

•     기본 설정-도구 - 에서 옵션을 설정 가능. 
•     숨기거나 다시 보이게 하려면 - 보기 메뉴에서 설정.
•     도구 모음의 위치는 고정되어 있어서 사용자가 다른 위치로 옮기진 못한다.

 

2. 도구별 기능

 

1) 브라우저 1로 보기

 

: 입력 내용을 브라우저로 보는 기능

: 편집창에서 이 아이콘을 누르면 된다 (단축키를 쓰려면 ctrl+B)

 

브라우저1로 보기

 

2) 글자 굵게 하기

 

: 블록을 정하고 이 아이콘을 누르면 글자 양쪽에 <strong></strong> 태그가 붙는다.

<strong>과 <b>의 차이점

<strong>: 내용이 매우 중요한 텍스트.

<b>: 중요성 없이 굵은 텍스트=주의 환기

 

<strong> 태그

 

3) 글자 기울어지게 하기

 

: 블록을 정하고 이 아이콘을 누르면 글자 양쪽에 <em></em> 태그가 붙는다.

<em>과 <i>의 차이점

= <em> = 주변 텍스트에 비해 강조

<i> = 관용구, 생각, 기술 용어

 

 

<em>태그

 

 

4) 밑줄 치기

 

블록을 정하고 icon을 누르면 글자 양쪽에 <u></u> 태그가 붙는다.

 

 

<u>태그

 

 

5) 글꼴 설정

 

블록을 정하고 이 아이콘을 누르면 글자 양쪽에 <font></font> 태그가 붙는다.

 

 

<font>태그

 

6) 색상 코드 삽입 도구

 

원하는 색상을 선택하면 코드가 자동으로 삽입되는 기능.

 

<color> 속성

 

7) 줄 바꿈 도구

 

클릭하면 줄 바꿈 태그 <br>이 입력된다.

그 다음 입력하는 문자열은 줄 바꿈이 된다.

 

줄바꿈 <br>태그

 

 

8) 단락 도구

 

이 아이콘을 누르면 <p></p> 태그가 생기는데 그 사에에 텍스트를 입력하면 된다.

혹은 블록을 정하고 이 아이콘을 누르면 글자 양쪽에 <p></p> 태그가 붙는다.

뒤에 <br>이 오지 않아도 자동 줄 바꿈이 된다.

단락 전후에 자동 줄 간격 생성.

 

단락 <p>태그

 

 

9) 제목, heading 도구

 

이 아이콘을 누르면 <h1>~<h6></h1>~</h6> 태그가 생긴다.

그 사에에 제목을 입력하면 된다.

혹은 블록을 정하고 이 아이콘을 누르면 글자 양쪽에 <h2></h2> 태그가 붙는다.

뒤에 <br>이 오지 않아도 자동 줄 바꿈이 된다.

단락 전후에 자동 줄 간격 생성.

 

 

제목, <h2>태그

 

10) 이미지 삽입 도구

 

이 도구를 선택하면,

<img> 태그, <src 속성, width 속성, height 속성, alt 속성>을 입력할 수 있는 형식이 자동 입력된다.

 

<img>태그

 

 

11) 링크 도구

 

이 도구를 클릭하면, <a></a> 링크 태그와 <a href> 속성의 형식이 자동 입력된다.

 

링크, <a href>태그, 속성

 

링크 클릭 시=화면 이동

링크 클릭 화면

 

 

<참고= 향후 공부할 내용>

editplus를 활용한 텍스트 효과 등

(다음 글에 계속)