html 링크 걸기 및 새창 밑줄 속성
html 링크 걸기 ■ HTML5 에서 하이퍼링크 걸기와 몇 가지 속성에 대해서 알아보겠습니다. 여기서는 태그를 이용해서 '텍스트'와 '이미지'에 링크를 걸어보고 클릭했을 때 새 창이 열리면서 웹 페이지로 이동하는 과정과 텍스트 링크의 글자색과 밑줄을 제거하는 등의 속성을 알아보겠습니다. 먼저 하이퍼링크의 형식은 다음과 같습니다. "이미지" 또는 "텍스트" html에서 하이퍼링크의 기본 속성은 클릭했을 때 새로운 창이 뜨지 않고 기존의 창에서 웹 페이지로 이동하게 되구요. 글자색은 파란색이며 기본적으로 밑줄이 그려져 있습니다. 형식과 속성을 생각하면서 예제를 하나 만들어보겠습니다. ■ 태그를 이용해서 이미지와 텍스트에 링크를 걸었구요. 각각 네이버와 Daum으로 이동하도록 했습니다. 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 이미지 삽입 태그와 이미지를 설정할 수 있는 몇 가지 명령어들을 이용해서 직접 이미지를 넣어보겠습니다. 먼저 이미지 태그의 형식은 다음과 같습니다. ■ 조금 복잡해 보이나요? 천천히 하나씩 입력해보도록 할게요. 여러분도 직접 해보시면 쉽게 이해가 되실 거에요. 먼저 테스트에 이용할 이미지를 하나 준비하겠습니다. ■ "test"라는 이름의 파일을 준비했구요. 바탕화면에 저장했습니다. 속성 창에서 경로를 복..
HTML 폰트 태그
▣ HTML 폰트 태그 ■ HTML에서 글자의 크기를 조절하는 태그에 대해서 알아보도록 할게요. 글자의 크기를 조절하는 태그는 두 가지 정도인데요. 과 태그입니다. 먼저 은 #부분에 숫자 1부터 6까지 넣어서 글자의 크기를 조절할 수 있습니다. 1~6의 숫자를 넣을 때 숫자가 커질수록 글자의 크기는 작아지게 되는데요. 직접 예제를 하나 작성해보도록 할게요. ■ 메모장에 그림과 같이 예제를 작성하고 HTML 문서로 저장하고 브라우저에서 실행해보겠습니다. 'H숫자'와 글자크기를 잘 비교해보세요. ■ 출력된 내용을 보면 'H' 다음의 숫자가 커질수록 글자의 크기는 작아지는 걸 확인할 수 있습니다. 다음은 태그에 대해서 알아보겠습니다. 이 태그에서는 숫자 부분에 1부터 7까지의 숫자를 넣을 수 있는데요. 숫자가..
HTML 주석 줄바꿈 띄어쓰기 태그 익히기
▣ HTML 주석 줄 바꿈 띄어쓰기 태그 익히기 ■ HTML 두 번째 공부하네요. ㅎ 지난번에는 HTML 태그의 기본 구조를 살펴보고, 저장 및 출력하는 방법에 대해서 알아봤었는데요. http://kd3302.tistory.com/337 ■ 이번에는 각종 기본 태그를 정리해보도록 하겠습니다. 먼저 문단에 사용하는 태그인 줄바꿈과 띄어쓰기 관련 태그부터 알아보고 예제에서 주석태그를 넣어서 테스트 해보겠습니다. 이 태그를 이용하면 한 줄을 띈 다음에 다음 문장을 시작하게 되는데요. 이 태그를 여러개 사용한다고 해서 여러줄이 띄어지는건 아니에요. 아무리 많이 써도 한 줄만 띄어줍니다. 이 녀석은 우리가 사용하는 [엔터]와 같은 역할을 하는데요. 한줄을 띄지는 않고, 그냥 다음 칸으로 내려가기만 합니다. pre..