HTML(17)
-
Web/HTML, CSS
2018.06.18
5
[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee)
요즘은 그렇게 많이 사용하지 않는 태그인데 전광판처럼 텍스트를 움직이게 만들 수 있는 태그가 있습니다. 텍스트뿐만 아니라 사진도 가능합니다. HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그는 바로 MarQuee태그인데요. 이번 포스팅에서는 HTML MarQuee태그를 사용하는 방법에 대해 알아보도록 하겠습니다. 옆으로 움직이는 텍스트 만들기 (MarQuee) 태그 속성 비고 bgcolor 배경색상 설정 width 가로 / 세로크기 설정 height 세로크기 설정 direction 스크롤의 움직임 방향 behavior 움직임의 속성 loop 움직임 반복횟수 scrollamount 스크롤 되는 거리간격 scrolldelay 스크롤의 속도 vspace 위 여백 hspace 아래 여백 MarQuee에는 ..
-
Web/HTML, CSS
2018.06.16
2
[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태)
하이퍼링크란 "연결된 개체"를 뜻합니다. 특정 부분을 클릭해 다른 페이지로 이동을 시켜주는 기능이며 여러 개의 HTML 문서를 하나의 고리처럼 연결할 수 있습니다. 인터넷의 특성상 모든 정보를 한 페이지에서 띄울 수 없어 정보가 여러페이지로 분산될 수 밖에 없는데 하이퍼링크를 사용하면 여러페이지를 하나의 고리처럼 엮을 수 있어 굉장히 다양하게 사용되고 있습니다. 이러한 하이퍼링크를 HTML의 A태그를 활용하여 간단하게 구현할 수 있습니다. 하이퍼링크 만들기 태그 속성 비고 하이퍼링크 태그 link 방문하지 않은 하이퍼링크의 색상 alink 마우스로 클릭한 하이퍼링크의 색상 vlink 이미 방문한 하이퍼 링크의 색상 href 클릭시 이동시킬 페이지 title 마우스 Over시 나올 링크의 설명 target..
-
Web/HTML, CSS
2018.06.15
1
[Html] 수평선 긋기 HR태그 사용법
문단을 나눌때 영역을 나누고 싶을때 자주 사용하는것이 바로 수평선 그리기 HR태그입니다. 닫는 태그 없이 한번의 태그 사용으로 간단하게 수평선을 구현할 수 있어 많이들 사용하는 방법입니다. 수평선에 색을 입히거나 비율 수평선의 굵기까지 지정할 수 있습니다. 수평선 긋기 HR태그 사용법 태그 속성 비고 태그 수평선 화면 비율/크기 조절 수평선의 색 교체 수평선 크기 조절 HR태그에는 여러가지 속성이 있으나 위의 3가지 속성이 대표적입니다. 1. width속성은 width="500px" 크기를 지정하거나 width="50%" 화면에 나타날 비율을 정할 수 있습니다. 2. color은 HR태그의 색상을 설정할 수 있습니다. 3. size속성을 활용하여 수평선의 굵기도 설정해줄 수 있습니다. 예제 1. 웹브라우..
-
Web/HTML, CSS
2018.06.14
1
[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등
HTML을 사용하다보면 글자의 속성을 바꿔주고 싶을때가 종종 있습니다. 하지만 이럴때마다 CSS를 사용해서 바꿔주는건 좀 귀찮죠. 이럴때 간편하게 사용할 수 있는 HTML 태그들을 소개합니다. Font 속성/스타일(굵기,기울기,밑줄선,취소선) 설정 속성 태그 비고 글꼴 속성/스타일 글자 굵기 글자 굵기 글자 기울기 취소선 긋기 밑줄긋기 위 첨자 밑 첨자 타자체 주변보다 크게 주변보다 작게 CSS없이 HTML에서 간단하게 구현할 수 있는 여러가지 태그들입니다. 1. 태그와태그는 글자를 진하게 만들어주는 태그로 서로 차이점은 없습니다. 2. 태그는 글자에 기울임을 줘서 이탤릭자처럼 만들어줍니다. 3. 태그는 글자에 취소선을 그어주는 태그입니다. 4. 태그는 글자에 밑줄을 그어주는 역할을 합니다. 5. 와는 ..
-
ETC./Spring
2017.10.19
4
[Spring] 스프링에서 BootStrap적용하기
이번 포스팅에서는 스프링 프로젝트에서 BootStrap을 연동하는 방법에 대해서 한번 알아보도록 하겠습니다. BootStrap이란 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음입니다. 기본적인 디자인이 다 되어있는 오픈소스로 되어있기 때문에 디자인 능력이 부족한 개발자이거나 단기간에 웹사이트를 만들어야 하는 경우 요긴하게 사용할 수 있습니다. 스프링에서 BootStrap적용하기 1. BootStrap을 쓰기 위해서는 자신이 원하는 소스코드를 다운로드하아야 합니다. BootStrap을 다운로드하는 홈페이지를 두 군데 소개해드리겠습니다. 부트스트랩 무료 오픈소스 링크 바로가기 1 부트스트랩 무료 오픈소스 링크 바로가기 2 위에 링크된 사이트에서 자신이 원하는 오픈소스를 다..
-
Web/HTML, CSS
2017.10.12
2
[Html] input type 종류 & 예제 총정리
1. input type = "text" , input type = "password" 이름 : 비밀번호 : 2. input type = "radio" 치킨 피자 짜장면 짬뽕 3. input type = "checkbox" CPU Memory 하드디스크 CDROM GRAPIC_CARD 4. select option 가장 재미있는 것을 선택해 주세요. HTML 자바스크립트 CSS HTML 자바스크립트 CSS 5. input type ="button" ,input type = "submit", input type = "reset" 6. input type ="image" 이미지: 7. input type ="file" 파일명:
-
Web/HTML, CSS
2017.10.10
7
[Html] Form태그 회원가입양식 메일 보내기
이번 포스팅은 HTML을 활용한 회원가입 양식에다가 SUBMIT버튼을 누르면 전자메일도 구현되는 기능을 한번 구현해보도록 하겠습니다. 전자메일 기능은 폼 태그에서 mailto 함수를 걸어서 처리하였고, 회원가입 양식은 html으로 제작하였습니다. Form태그 회원가입양식 메일 보내기 회원 기본 정보 아이디 : 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 : 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인 : 4~12자의 영문 대소문자와 숫자로만 입력 메일주소 : 예)id@domain.com 개인 신상 정보 주민등록번호 : 예)1234561234567 생일 : 년 1 2 3 4 5 6 7 8 9 10 11 12 월 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1..
-
Web/HTML, CSS 2018.06.18 5[Html] 옆으로 움직이는 텍스트 만들기 (MarQuee) 요즘은 그렇게 많이 사용하지 않는 태그인데 전광판처럼 텍스트를 움직이게 만들 수 있는 태그가 있습니다. 텍스트뿐만 아니라 사진도 가능합니다. HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그는 바로 MarQuee태그인데요. 이번 포스팅에서는 HTML MarQuee태그를 사용하는 방법에 대해 알아보도록 하겠습니다. 옆으로 움직이는 텍스트 만들기 (MarQuee) 태그 속성 비고 bgcolor 배경색상 설정 width 가로 / 세로크기 설정 height 세로크기 설정 direction 스크롤의 움직임 방향 behavior 움직임의 속성 loop 움직임 반복횟수 scrollamount 스크롤 되는 거리간격 scrolldelay 스크롤의 속도 vspace 위 여백 hspace 아래 여백 MarQuee에는 ..
-
Web/HTML, CSS 2018.06.16 2[Html] 하이퍼링크 A태그 사용법 (색상변경,링크설명,창 형태) 하이퍼링크란 "연결된 개체"를 뜻합니다. 특정 부분을 클릭해 다른 페이지로 이동을 시켜주는 기능이며 여러 개의 HTML 문서를 하나의 고리처럼 연결할 수 있습니다. 인터넷의 특성상 모든 정보를 한 페이지에서 띄울 수 없어 정보가 여러페이지로 분산될 수 밖에 없는데 하이퍼링크를 사용하면 여러페이지를 하나의 고리처럼 엮을 수 있어 굉장히 다양하게 사용되고 있습니다. 이러한 하이퍼링크를 HTML의 A태그를 활용하여 간단하게 구현할 수 있습니다. 하이퍼링크 만들기 태그 속성 비고 하이퍼링크 태그 link 방문하지 않은 하이퍼링크의 색상 alink 마우스로 클릭한 하이퍼링크의 색상 vlink 이미 방문한 하이퍼 링크의 색상 href 클릭시 이동시킬 페이지 title 마우스 Over시 나올 링크의 설명 target..
-
Web/HTML, CSS 2018.06.15 1[Html] 수평선 긋기 HR태그 사용법 문단을 나눌때 영역을 나누고 싶을때 자주 사용하는것이 바로 수평선 그리기 HR태그입니다. 닫는 태그 없이 한번의 태그 사용으로 간단하게 수평선을 구현할 수 있어 많이들 사용하는 방법입니다. 수평선에 색을 입히거나 비율 수평선의 굵기까지 지정할 수 있습니다. 수평선 긋기 HR태그 사용법 태그 속성 비고 태그 수평선 화면 비율/크기 조절 수평선의 색 교체 수평선 크기 조절 HR태그에는 여러가지 속성이 있으나 위의 3가지 속성이 대표적입니다. 1. width속성은 width="500px" 크기를 지정하거나 width="50%" 화면에 나타날 비율을 정할 수 있습니다. 2. color은 HR태그의 색상을 설정할 수 있습니다. 3. size속성을 활용하여 수평선의 굵기도 설정해줄 수 있습니다. 예제 1. 웹브라우..
-
Web/HTML, CSS 2018.06.14 1[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등 HTML을 사용하다보면 글자의 속성을 바꿔주고 싶을때가 종종 있습니다. 하지만 이럴때마다 CSS를 사용해서 바꿔주는건 좀 귀찮죠. 이럴때 간편하게 사용할 수 있는 HTML 태그들을 소개합니다. Font 속성/스타일(굵기,기울기,밑줄선,취소선) 설정 속성 태그 비고 글꼴 속성/스타일 글자 굵기 글자 굵기 글자 기울기 취소선 긋기 밑줄긋기 위 첨자 밑 첨자 타자체 주변보다 크게 주변보다 작게 CSS없이 HTML에서 간단하게 구현할 수 있는 여러가지 태그들입니다. 1. 태그와태그는 글자를 진하게 만들어주는 태그로 서로 차이점은 없습니다. 2. 태그는 글자에 기울임을 줘서 이탤릭자처럼 만들어줍니다. 3. 태그는 글자에 취소선을 그어주는 태그입니다. 4. 태그는 글자에 밑줄을 그어주는 역할을 합니다. 5. 와는 ..
-
ETC./Spring 2017.10.19 4[Spring] 스프링에서 BootStrap적용하기 이번 포스팅에서는 스프링 프로젝트에서 BootStrap을 연동하는 방법에 대해서 한번 알아보도록 하겠습니다. BootStrap이란 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음입니다. 기본적인 디자인이 다 되어있는 오픈소스로 되어있기 때문에 디자인 능력이 부족한 개발자이거나 단기간에 웹사이트를 만들어야 하는 경우 요긴하게 사용할 수 있습니다. 스프링에서 BootStrap적용하기 1. BootStrap을 쓰기 위해서는 자신이 원하는 소스코드를 다운로드하아야 합니다. BootStrap을 다운로드하는 홈페이지를 두 군데 소개해드리겠습니다. 부트스트랩 무료 오픈소스 링크 바로가기 1 부트스트랩 무료 오픈소스 링크 바로가기 2 위에 링크된 사이트에서 자신이 원하는 오픈소스를 다..
-
Web/HTML, CSS 2017.10.12 2[Html] input type 종류 & 예제 총정리 1. input type = "text" , input type = "password" 이름 : 비밀번호 : 2. input type = "radio" 치킨 피자 짜장면 짬뽕 3. input type = "checkbox" CPU Memory 하드디스크 CDROM GRAPIC_CARD 4. select option 가장 재미있는 것을 선택해 주세요. HTML 자바스크립트 CSS HTML 자바스크립트 CSS 5. input type ="button" ,input type = "submit", input type = "reset" 6. input type ="image" 이미지: 7. input type ="file" 파일명:
-
Web/HTML, CSS 2017.10.10 7[Html] Form태그 회원가입양식 메일 보내기 이번 포스팅은 HTML을 활용한 회원가입 양식에다가 SUBMIT버튼을 누르면 전자메일도 구현되는 기능을 한번 구현해보도록 하겠습니다. 전자메일 기능은 폼 태그에서 mailto 함수를 걸어서 처리하였고, 회원가입 양식은 html으로 제작하였습니다. Form태그 회원가입양식 메일 보내기 회원 기본 정보 아이디 : 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 : 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인 : 4~12자의 영문 대소문자와 숫자로만 입력 메일주소 : 예)id@domain.com 개인 신상 정보 주민등록번호 : 예)1234561234567 생일 : 년 1 2 3 4 5 6 7 8 9 10 11 12 월 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1..