레드의 달콤한 비밀

IT & WEB/HTML 쉽게 따라하기 → (12)건

html 문서 연결하기

[HTML 쉽게 따라하기] 문서 연결하기 오늘은 표 속성에서 문서를 연결하는 방법에 대해 알아보겠습니다. 문서를 연결하기 위해서는 경로를 설정해 줘야 하는데요, 경로 설정에는 절대 경로와 상대 경로가 있어요. 그럼 이게 뭔가 한번 자세히 알아볼까요. 문서를 연결하기 위한 경로 설정 방법 1> 절대 경로 절대경로를 이용해서 문서를 연결하는 방법은 해당 파일의 문서 경로를 모두 써줘야 한다는 것을 의미합니다. 이때 각 디렉토리는 ' / '를 이용해서 구분해 주면 되요. 예를 들면 exampe.png 파일을 연결한다고 할때 이 파일이 디렉토리가 a폴더 안에 b폴더 그리고 다시 그 안의 c폴더에 존재한다면 경로는 '웹주소/a/b/c/exampe.png' 가 되는데요, 앞의 웹주소는 파일을 업로드한 웹 공간이 있..
IT & WEB/HTML 쉽게 따라하기 2018. 8. 16. 12:18

html 표 속성 정하기 - 표 테두리 표 선굵기 내부선 조절 및 표 제목 붙이기

[HTML 쉽게 따라하기] 표 속성 정하기 오늘은 표 속성을 정하는 방법에 대해 알아보겠습니다. 표 속성 태그로 표 둘레의 테두리, 표 전체의 선의 굵기, 표의 내부 선 조절 그리고 표에 제목을 붙일 수 있는데 이들에 대한 속성이 무엇인지 보겠습니다. 1> 표 둘레의 테두리 표 둘레의 테두리를 지정하기 위해서는 다음과 같이 border 속성을 이용하여 나타냅니다. 테두리를 지정하기 위한 사용법은 아래와 같습니다. 위 태그는 테이블 둘레의 테두리를 나타낼 때 사용되며, n값은 테두리의 굵기를 지정합니다. n값을 0으로 입력하면 테두리가 나타나지 않게 됩니다. 2> 표 전체의 선의 굵기 셀과 셀 사이에 여백을 주기 위해서 cellspacing 속성을 사용합니다. cellspacing 사용법은 다음과 같습니다..
IT & WEB/HTML 쉽게 따라하기 2018. 7. 24. 15:28

html 테이블 만들기에서 표 편집 칸 합치기와 줄 합치기

[HTML 쉽게 따라하기] 테이블 만들기 표 편집 속성들 - 칸합치기(COLSPAN) 와 줄 합치기(ROWSPAN) 지난시간에 간단한 테이블을 만들어 보았는데요, 오늘은 표를 편집하는 속성들에 대해서 알아보겠습니다. 표 편집하기 1> 칸 합치기 표를 편집하는데 칸을 합할 경우가 있습니다. 이러한 경우에 COLSPAN라는 속성을 이용하는데 이때 사용법은 다음과 같습니다. COLSPAN=n COLSPAN 속성은 셀을 옆으로 합하고자 하는 개수를 지정해 주며 기본적으로 1이 지정되어 있습니다. 즉, n 값으로 합칠 셀의 개수를 정해줄 수 있습니다. 다음은 아래의 표와 같은 형식으로 셀을 합하는 예입니다. [예시 1]-----------------------------------------------------..
IT & WEB/HTML 쉽게 따라하기 2018. 7. 2. 13:37

HTML 테이블 표 만들기 태그

[HTML 쉽게 따라하기] HTML 테이블 표 만들기 태그 테이블이란 쉽게 말해 문서에서 표와 같은 기능입니다. 테이블을 사용하는 이유는 테이블 없이 문자로만 복잡하게 구분된 문서를 만들어 낸다면 홈페이지가 조금은 산만하게 보일 수 있기 때문에 테이블을 이용해서 간결하고 보기 좋게 문서를 표현하는 것입니다. 그럼 테이블을 만들어 볼까요. 테이블의 기본 구조 테이블의 기본 구조는 다음과 같습니다. [예시 1]---------------------------------------- 표 ........ ...... ------------------------------------------------- 예시1 을 보면 테이블 태그 안에 여러 태그가 사용된 것을 알 수 있습니다. 그 중 가장 기본적으로 알아야 ..
IT & WEB/HTML 쉽게 따라하기 2018. 6. 14. 15:39

HTML 이미지 넣고 링크 걸기

[HTML 쉽게 따라하기] 이미지 넣고 링크 거는 방법 블로그를 꾸미거나 홈페이지를 꾸밀때 이미지를 넣는 일은 당연히 들어간다. 글로만 들어간다면 너무나 밋밋하지 않겠는가? 오늘은 이미지를 넣는 태그와 넣은 이미지에 링크를 거는 방법을 알아 보겠다. 이미지를 넣는 html 태그 이미지를 넣는 기본 소스는 아래와 같다. ----------------------------------------------------------------------------------------- 이미지를 넣었어요!!! -------------------------------------------------------------------------------------------------- 전체 소스에서 빨간색 부분이 이..
IT & WEB/HTML 쉽게 따라하기 2018. 4. 11. 01:00

티스토리를 활용하여 웹 저장 공간을 만들어 보자

[HTML 쉽게 따라하기] 티스토리를 활용하여 웹 저장 공간을 만들어 보자 블로그를 꾸미거나 홈페이지를 만들다 보면 이미지가 당연히 사용된다. 그런데 이 이미지들이 웹상에서 보여지려면 당연히 웹에 저장되어 있어야 한다. 그렇다면 웹에 이미지를 어떻게 저장해야 하는 것일까? 크게 세가지 방법이 있다. ①PC의 하드를 구매해서 PC저장 공간을 만들 수 있듯이 돈을 주고 웹 저장 공간을 살 수도 있다. 그러나 정말 많은 공간이 필요한게 아니라면 굳이 돈주고 살 필요는 없다. ② 무료로 제공하는 웹저장공간을 이용해 보자. 보통 cafe24 같은 무료 홈페이지를 제공하는 회사들에 가입을 하여 분양을 받으면 홈페이지를 만들 수 있는 저장 공간을 준다. 큰 저장공간이 필요하다면 이것도 돈주고 사야 하지만 기본적으로 ..
IT & WEB/HTML 쉽게 따라하기 2018. 4. 5. 13:56

html 배경 이미지 넣는 방법

HTML 쉽게 따라하기 - 배경 이미지 넣는 방법 홈페이지에 배경 이미지를 넣기 위해서는 먼저 사용자가 삽입하고자 하는 배경 이미지가 존재해야 하며 그 위치를 반드시 알아두어야 한다. 배경 이미지를 넣기 위해 사용되는 형식은 다음과 같다. 위와 같이 배경 이미지를 넣기 위해서는 라는 속성을 사용한다. 그런 다음 이미지 파일의 경로명과 파일명을 입력해주면 배경 이미지를 홈페이지에 삽입할 수 있다. 배경 이미지를 이용하면 배경색을 이용한 방법보다는 좀 더 화려한 홈페이지를 만들 수 있다. 하지만 잘못 사용할 경우에는 통일성이 떨어지고 산만해지기 때문에 문서와 잘 조화되는 배경 이미지를 선정하는 것이 중요하다. 다음은 배경이미지를 삽입하는 예제이다. [예제1] --------------------- -----..
IT & WEB/HTML 쉽게 따라하기 2018. 2. 21. 17:13

Title, Alt 속성을 이용하여 이미지에 툴팁 나타내기

HTML 쉽게 따라하기 - title. alt 속성을 이용하여 이미지에 툴팁 나타내기 툴팁은 웹문서에서 이미지등에 포인터를 위치 시키면 조그마한 글상자가 나타나는 것을 볼 수 있으며 이것을 툴팁이라고 한다. 보통 말풍선 도움말 이라고 하며 이러한 툴팁을 나타내기 위해서는 title, alt 속성으로 만들 수 있는데 두가지는 사실 용도가 다르다. 오늘은 이 툴팁에 대한 title, alt 속성의 사용법에 대해 알아보겠다. Title 속성 다음은 title 속성을 이용해 이미지가 어떠한 역할을 하는지 나타낸 소스이다. title = "말풍선에 나타낼 설명" 예시1>---------------------------------------------------------------- ----------------..
IT & WEB/HTML 쉽게 따라하기 2018. 1. 8. 14:36

align 속성을 이용하여 이미지,문자 정렬하기

HTML쉽게 따라하기 - align 속성을 이용하여 이미지, 문자 정렬하기 저번 시간에 이미지를 넣는 방법에 대해 알아보았다. 이미지를 넣었으면 이제 자신이 원하는 위치로 정렬을 해야 하는데, 이미지를 정렬하기 위해서 align 속성을 사용하며 상하좌우로 이미지를 정렬할 수 있다. 또한 이미지뿐만이 아니라 문자와 이미지를 함께 정렬할 수도 있다. 다음은 align 속성을 이용해 이미지를 정렬하는 각 속성이다. ALIGN = "TOP / BOTTOM / MIDDLE / LEFT / RIGHT / TEXTTOP / ABSMIDDLE / BASELINE / ABSBOTTOM " 1) 이미지 중심 정렬 이미지 중심 정렬은 이미지를 중심으로 해서 문자를 정렬하는 방식이다. 각 속성에 대해 살펴보자. TOP : 이..
IT & WEB/HTML 쉽게 따라하기 2017. 12. 22. 12:41

HTML언어 쉽게 따라하기 - 이미지 넣는 태그

HTML언어 쉽게 따라하기 - 이미지를 넣는 태그 오늘은 이미지를 넣는 방법에 대해 알아보겠다. 웹 브라우저 문서에 이미지를 넣게 되면 자신의 홈페이지에 좀 더 화려한 효과를 줄 수 있다. 단순히 텍스트만 들어간 홈페이지 보다는 이미지를 추가해서 만든 보기 좋은 홈페이지가 좋을 것이다. 그럼 이미지를 넣기 위해선 어떤 태그가 들어가는지 보겠다. HTML 이미지 태그 이미지를 연결하는 태그는 태그 이다. 이미지를 html 문서에 연결하기 위해서는 다음과 같은 형식으로 사용된다. 위의 이미지를 html 문서에 삽입하는 방법을 보고 너무 복잡하다고 생각하는 경우가 많다. 그러나 하나하나 살펴보면 그리 어려운 내용은 없다. 단지 이미지를 연결하고, 정렬하고, 크기를 지정하고, 테두리를 지정하고, 마지막으로 이미..
IT & WEB/HTML 쉽게 따라하기 2017. 12. 14. 12:16
◀ 1 2 ▶

티스토리툴바