html 링크 걸기 및 새창 밑줄 속성
html 링크 걸기■ HTML5 에서 하이퍼링크 걸기와 몇 가지 속성에 대해서 알아보겠습니다. 여기서는 태그를 이용해서 '텍스트'와 '이미지'에 링크를 걸어보고 클릭했을 때 새 창이 열리면서 웹 페이지로 이동하는 과정과 텍스트 링크의 글자색과 밑줄을 제거하는 등의 속성을 알아보겠습니다. 먼저 하이퍼링크의 형식은 다음과 같습니다. "이미지" 또는 "텍스트" html에서 하이퍼링크의 기본 속성은 클릭했을 때 새로운 창이 뜨지 않고 기존의 창에서 웹 페이지로 이동하게 되구요. 글자색은 파란색이며 기본적으로 밑줄이 그려져 있습니다. 형식과 속성을 생각하면서 예제를 하나 만들어보겠습니다. ■ 태그를 이용해서 이미지와 텍스트에 링크를 걸었구요. 각각..
html 띄어쓰기
▣ html 띄어쓰기■ html 공부하면서 가장 처음으로 막혔던 부분이 이 부분이었던 거 같네요. ㅎ 분명히 '스페이스 바'를 여러 번 눌러서 여러 칸을 띄었는데도 결과는 한 칸만 띄어쓰기 되어 있을 거에요. html 태그 중에는 특수한 경우에 사용하는 문자들이 있는데요. ", ', <, > 등의 기호를 표시하기 위해서는 특수기호를 사용해야 합니다. 띄어쓰기 역시 특수 기호를 사용해야 합니다. 성격 급하신 분들을 위해서 띄어쓰기 태그부터 말씀드리자면.....  입니다. ■ 이번 글에서는 이 특수 기호들을 직접 입력해서 어떻게 출력이 되는지 확인해보겠습니다. 그림만 쭉 보셔도 될 거에요. html을 공부하고 계신다면 이 특수기호들은 따로 메모해놓으세요.(몇 번 입력해봐서 외워버리는게 더 좋겠죠?ㅎㅎ..
html 홈페이지 소스 보기
▣ html 홈페이지 소스 보기 ■ 홈페이지를 만들 때 디자인 때문에 고민하신다면 예쁘게 만들어진 웹 사이트들을 둘러보다가 괜찮은 곳의 소스를 확인하고 응용해서 사용할 수 있는데요. 이번 글에서는 잘 만들어진 웹 사이트의 html 소스를 확인하는 방법을 알아보고 참고로 내 컴퓨터에 저장된 html 파일을 메모장에서 열어서 확인해보겠습니다. 우리나라는 아직 인터넷 익스플로러와 크롬 브라우저를 많이 사용하고 계시기 때문에 두 브라우저에서 확인하는 방법을 정리해보겠습니다. 먼저 익스플로러부터 알아보겠습니다. ■ 홈페이지 소스를 보고 싶은 웹 페이지를 열고 [도구] 버튼을 클릭해서 나타나는 메뉴 중에서 "개발자 도구" 메뉴를 선택합니다. 단축키는 [F12] 입니다. ■ 이렇게 HTML, CSS, 스크립트 등의 ..
무료 html 편집기
▣ 무료 html 편집기■ 홈페이지를 만들 때 HTML 문서를 작성하게 되는데요. 이때 사용할 수 있는 편집기들은 많이 있지만, 정말 말 그대로 무료로 설치 없이 사용할 수 있는 대표적인 편집기는 바로 "메모장"이죠.^^ 하지만 메모장에서는 오타를 발견할 수 없습니다. 짧은 소스라면 관계없겠지만, 몇백 줄의 소스라면 오타 찾다가 하루가 다 갈 수도 있을 거에요. 그래도 메모장을 이용하실 분들을 위해서 메모장에 간단한 소스를 코딩해서 html 문서로 저장하는 과정만 살펴본 후 제가 사용 중인 "노트패드++"을 설치하는 과정과 몇 가지 설정을 변경해보겠습니다. 먼저 메모장에 간단하게 코딩한 후 html 문서로 저장해보겠습니다.■ 이 녀석을 html 파일로 저장할게요. ■ [파일 ▶ 저장] (Ctrl+S)를 ..
html 이미지 링크 넣기
▣ html 이미지 링크 넣기 ■ html에서 링크를 거는 방법을 알아보겠습니다. 글의 제목은 이미지에 링크 걸기이지만....먼저 글자에 일반 링크 거는 방법을 알아보구요. 이어서 이미지에 링크를 넣어보도록 하겠습니다. html에서 이미지 넣는 방법은 이 글에서 대충 설명하겠지만...좀 더 자세히 알고 싶으면 다음 글을 참고 하시구요. http://kd3302.tistory.com/351 ◀ html 이미지 넣기 먼저 일반 링크 걸기 위해서는 태그를 이용하는데요. 형식은 다음과 같습니다. ■ 위 형식대로 메모장에서 입력해보겠습니다. ■ 태그의 형식에 맞게 입력하고 네이버의 주소를 넣어 봤습니다. 인터넷 브라우저에서 실행해보겠습니다. ■ 이렇게 링크가 걸린 문장이 출력되구요..
html 이미지 넣기
▣ html 이미지 넣기 ■ 이번 글에서는 html에서 이미지 넣기 방법에 대해서 알아보겠습니다. 가장 많이 이용하는 이미지로 GIF와 JPG를 들 수 있는데요. GIF파일은 움직이는 사진까지 만들 수 있기 때문에 더 많이 이용하실 거에요. 좀 더 세부적인 내용은 나중에 살펴보기로 하고 여기서는 html 이미지 삽입 태그와 이미지를 설정할 수 있는 몇 가지 명령어들을 이용해서 직접 이미지를 넣어보겠습니다. 먼저 이미지 태그의 형식은 다음과 같습니다. 설명 ■ 조금 복잡해 보이나요? 천천히 하나씩 입력해보도록 할게요. 여러분도 직접 해보시면 쉽게..
HTML 폰트 태그
▣ HTML 폰트 태그■ HTML에서 글자의 크기를 조절하는 태그에 대해서 알아보도록 할게요. 글자의 크기를 조절하는 태그는 두 가지 정도인데요. 태그입니다. 먼저 은 #부분에 숫자 1부터 6까지 넣어서 글자의 크기를 조절할 수 있습니다. 1~6의 숫자를 넣을 때 숫자가 커질수록 글자의 크기는 작아지게 되는데요. 직접 예제를 하나 작성해보도록 할게요. ■ 메모장에 그림과 같이 예제를 작성하고 HTML 문서로 저장하고 브라우저에서 실행해보겠습니다. 'H숫자'와 글자크기를 잘 비교해보세요. ■ 출력된 내용을 보면 'H' 다음의 숫자가 커질수록 글자의 크기는 작아지는 걸 확인할 수 있습니다. 다음은 태그에 대해서 알아보겠습니다. 이 태그에..
HTML 주석 줄바꿈 띄어쓰기 태그 익히기
▣ HTML 주석 줄 바꿈 띄어쓰기 태그 익히기■ HTML 두 번째 공부하네요. ㅎ 지난번에는 HTML 태그의 기본 구조를 살펴보고, 저장 및 출력하는 방법에 대해서 알아봤었는데요. http://kd3302.tistory.com/337■ 이번에는 각종 기본 태그를 정리해보도록 하겠습니다. 먼저 문단에 사용하는 태그인 줄바꿈과 띄어쓰기 관련 태그부터 알아보고 예제에서 주석태그를 넣어서 테스트 해보겠습니다.

이 태그를 이용하면 한 줄을 띈 다음에 다음 문장을 시작하게 되는데요. 이 태그를 여러개 사용한다고 해서 여러줄이 띄어지는건 아니에요. 아무리 많이 써도 한 줄만 띄어줍니다.
이 녀석은 우리가 사용하는 [엔터]와 같은 역할을 하는데요. 한줄을 띄지는 않고, 그냥 다음 칸으로 내려가기만 합..