HTML(17)
-
Web
2019.09.24
[Web] 부등호(< , >)를 < , > 로 바꿔주는 사이트
마크업기반의 코드에서는 부등호()가 인식되지 않습니다. html, xml같은 마크업기반의 언어에서는 부등호를 태그의 시작과 끝으로 인식을 하기때문입니다. 대표적으로 Spring Mybatis의 xml에서 부등호를 코드로 치환해주지 않고 그냥 쓰게되면 illegalargumentexception이라는 매퍼오류가 뜨는것을 예로 들 수 있습니다. 마크업기반의 언어에서 부등호를 사용하기 위해서는 부등호를 코드로 치환해주어야 합니다. 표현 기호기호의 코드값 뜻 < 오른쪽으로 열린 부등호A 마크업 기반의 코드에서 태그의 시작기호 사용 >>왼쪽으로 열린 부등호A > B로 표현할 시 A는 B보다 크다라는 뜻으로 사용마크업 기반의 코드에서 태그의 끝기호로 사용 부등호()를 < , > 로 바꿔주는..
-
Web/HTML, CSS
2018.06.30
5
[Html] 웹 폰트 아이콘 Font Awesome(폰트 어썸) 사용법
웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome의 사용법에 대해 다뤄보려 합니다. Font Awesome 공식 사이트 Font-Awesome의 장점 1. Html Font 속성이 모두 사용 가능하다. Font..
-
Web/HTML, CSS
2018.06.29
5
[Html] 으로 만드는 테트리스 게임
HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만드는 테트리스 게임입니다. 아래에 war파일 형태로 소스 첨부하오니 하시고 싶으신분은 import해서 한번 해보세요.!! 테트리스 게임 [Html] 으로 만드는 간단한 장애물 피하기게임
-
Web/HTML, CSS
2018.06.28
2
[Html] 으로 만드는 간단한 장애물 피하기게임
HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만든 간단한 총알 피하기 게임입니다. 처음에는 총알이 느리지만 시간이 갈수록 총알도 빨라지고 많이 나오기때문에 갈 수록 어려워집니다. 아래에 소스 첨부하오니 필요하신 분들은 Import해서 한번 해보세요. 장애물 피하기게임 [Html] 으로 만드는 테트리스 게임
-
Web/HTML, CSS
2018.06.27
1
[Html] Span 태그 사용법 & 예제
태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. 태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다. 태그 사용법 태그 속성 비고 display diplay요소 변경 width 가로크기 height 세로크기 background-color 배경색 변경 color 글자 색 변경 font-style 글자 형식 변경 margin 외부 여백설정 padding 내부 여백설정 border 테두리 설정 1. display는 태그의 요소를 변경..
-
Web/HTML, CSS
2018.06.25
2
[Html] Margin, Padding 속성의 차이점과 사용법
HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서는 같지만. 분명 다른점도 존재합니다. 이번 포스팅에서는 Margin, Padding 속성에 대해 정확히 알아보도록 하겠습니다. Margin과 Padding 두가지 속성의 차이점은 위 사진 하나로 충분히 설명이 가능합니다. Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다. 그럼 아래 예제를 보면 완벽히 이해할 수 있으실겁니다. 예제 100*100 nomal 100*100 margin 100*100 padding 100*100 marg..
-
Web/HTML, CSS
2018.06.23
2
[Html] 테이블안에 테이블 충첩하기
코딩은 응용하기에 따라 창의적인 결과물을 낼 수 있는 언어입니다. 혹시 테이블안에서도 테이블이 들어간다는 사실 알고 계신가요? 잘 사용하지는 않지만 이 방법도 적재적소에 적절히 사용하면 괜찮은 결과물을 얻어낼 수 있습니다. 예를 들어볼까요? 어떤 개발자는 레이아웃 기본 틀을 구성하는 방식으로 테이블안에 테이블을 넣어 위치를 조절한다고 합니다. 또 저는 웹사이트에서 사진갤러리를 만들때 테이블을 여러개 중첩해서 사진게시판을 구현한 적이 있습니다. 은근히 유용한 방법입니다. 테이블안에 테이블 넣기 [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) [Html] Pre태그 사용법 & 예제 [Html] Margin, Padding 속성의 차이점과 사용법 [Html] Div 태그 ..
-
Web/HTML, CSS
2018.06.22
7
[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)
HTML을 하다보면 굉장히 많이 사용하는 태그가 바로 일것입니다. 바로 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그중 하나입니다. 이번 포스팅에서는 HTML의 테이블을 만드는 모든 기법에 대해 다뤄보려 합니다. 테이블 만들기 주제 태그 비고 테이블의 구성 요소 테이블을 만드는 태그 테이블의 헤더부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 테이블을 만드는 순서는 다음과 같습니다. 먼저 제일 바깥쪽에는 태그가 들어갑니다. 그리고 가장 위에는 라는 테이블 헤더 태그를 사용합니다. Default값은 굵은..
-
Web/HTML, CSS
2018.06.21
[Html] 문단을 나누는 P태그 사용법
HTML에서 문단을 나누는 태그는 P태그입니다. Paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰여지는데 이 P태그를 활용하여 문단의 정렬, 배경색 등을 바꿀 수 있습니다. 많은 분들이 BR태그와 P태그를 동일한 태그라고 생각하시는 분들이 많은데 이 두가지 태그는 분명한 차이점이 있습니다. 바로 개행의 횟수죠. BR태그는 사용한 횟수만큼 개행을 합니다. 방금 4번을 했으니 개행을 4번을 했겠군요. 하지만 P태그는 아무리 많이 사용하더라도 한번만 개행합니다. 문단을 나누는 P태그 사용법 태그 속성 비고 align="left" 왼쪽정렬 align="right" 오른쪽정렬 align="center" 가운데정렬 align="justify" 맞춤정렬 P태그에서 가장 많이 사용하는 속성은 바로 al..
-
Web/HTML, CSS
2018.06.20
4
[Html] UL 태그, OL태그, DL태그, LI태그 사용법
이번 포스팅에서는 HTML의 각종 목록 태그에 대해서 알아보도록 하겠습니다. 목록태그를 잘 활용하신다면 웹사이트에서 보기 좋은 목록을 쉽게 만들 수 있습니다. 메뉴를 만들때, 안내표를 만들때 주로 사용합니다. UL태그, OL태그, DI태그, LI태그 사용법 속성 태그 비고 목록 태그 UL 글머리 기호를 앞에 붙여 목록을 만드는 형식 OL 번호를 앞에 붙여 목록을 만드는 형식 DL 기호 없이 문단으로 목록을 만드는 형식 LI UI와 OL내부에서 활용되는 태그 1. UL태그는 글머리 기호를 붙여 목록을 만드는 방식으로 순서가 필요없는 목록을 만들때 주로 사용합니다. 2. OL태그는 주로 순서가 필요한 목록을 만들때 사용하며 ol type="속성"을 줘 다양한 형태의 목록을 만들 수 있습니다. 3. DL는 기..
-
Web 2019.09.24[Web] 부등호(< , >)를 < , > 로 바꿔주는 사이트 마크업기반의 코드에서는 부등호()가 인식되지 않습니다. html, xml같은 마크업기반의 언어에서는 부등호를 태그의 시작과 끝으로 인식을 하기때문입니다. 대표적으로 Spring Mybatis의 xml에서 부등호를 코드로 치환해주지 않고 그냥 쓰게되면 illegalargumentexception이라는 매퍼오류가 뜨는것을 예로 들 수 있습니다. 마크업기반의 언어에서 부등호를 사용하기 위해서는 부등호를 코드로 치환해주어야 합니다. 표현 기호기호의 코드값 뜻 < 오른쪽으로 열린 부등호A 마크업 기반의 코드에서 태그의 시작기호 사용 >>왼쪽으로 열린 부등호A > B로 표현할 시 A는 B보다 크다라는 뜻으로 사용마크업 기반의 코드에서 태그의 끝기호로 사용 부등호()를 < , > 로 바꿔주는..
-
Web/HTML, CSS 2018.06.30 5[Html] 웹 폰트 아이콘 Font Awesome(폰트 어썸) 사용법 웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome의 사용법에 대해 다뤄보려 합니다. Font Awesome 공식 사이트 Font-Awesome의 장점 1. Html Font 속성이 모두 사용 가능하다. Font..
-
Web/HTML, CSS 2018.06.29 5[Html] 으로 만드는 테트리스 게임 HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만드는 테트리스 게임입니다. 아래에 war파일 형태로 소스 첨부하오니 하시고 싶으신분은 import해서 한번 해보세요.!! 테트리스 게임 [Html] 으로 만드는 간단한 장애물 피하기게임
-
Web/HTML, CSS 2018.06.28 2[Html] 으로 만드는 간단한 장애물 피하기게임 HTML5은 기존 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현·제공하도록 진화한 “웹 프로그래밍 언어“입니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 이 HTML5를 사용하면 웹게임을 쉽게 만들 수 있습니다. 아래는 Html으로 만든 간단한 총알 피하기 게임입니다. 처음에는 총알이 느리지만 시간이 갈수록 총알도 빨라지고 많이 나오기때문에 갈 수록 어려워집니다. 아래에 소스 첨부하오니 필요하신 분들은 Import해서 한번 해보세요. 장애물 피하기게임 [Html] 으로 만드는 테트리스 게임
-
Web/HTML, CSS 2018.06.27 1[Html] Span 태그 사용법 & 예제 태그는 아주 다방면으로 활용이 가능한 유용한 태그입니다. 주로 와 태그와 함께 웹페이지의 일부분에 스타일을 적용시키기 위해 사용됩니다. span 태그안에 아무런 컨텐츠가 없다면 해당 부분은 아무런 변화가 없지만 span태그 내부에 객체가 들어가면 그 객체의 크기만큼 공간이 할당이 됩니다. 태그로 요소를 감싸면 CSS나 Javascript로 그 부분을 변형시키는것이 가능해 집니다. 태그 사용법 태그 속성 비고 display diplay요소 변경 width 가로크기 height 세로크기 background-color 배경색 변경 color 글자 색 변경 font-style 글자 형식 변경 margin 외부 여백설정 padding 내부 여백설정 border 테두리 설정 1. display는 태그의 요소를 변경..
-
Web/HTML, CSS 2018.06.25 2[Html] Margin, Padding 속성의 차이점과 사용법 HTML이나 XML같은 언어를 사용하다보면 Margin과 Padding이라는 속성을 많이 보셨을겁니다. 몇몇분들은 이 두가지 속성의 의미를 잘 모르고 쓰시는 분들도 있더군요. 두 속성 다 여백을 주는 의미에서는 같지만. 분명 다른점도 존재합니다. 이번 포스팅에서는 Margin, Padding 속성에 대해 정확히 알아보도록 하겠습니다. Margin과 Padding 두가지 속성의 차이점은 위 사진 하나로 충분히 설명이 가능합니다. Margin은 Object와 화면과의 여백(외부여백)을 말하며 Padding은 Object내의 내부여백을 의미합니다. 그럼 아래 예제를 보면 완벽히 이해할 수 있으실겁니다. 예제 100*100 nomal 100*100 margin 100*100 padding 100*100 marg..
-
Web/HTML, CSS 2018.06.23 2[Html] 테이블안에 테이블 충첩하기 코딩은 응용하기에 따라 창의적인 결과물을 낼 수 있는 언어입니다. 혹시 테이블안에서도 테이블이 들어간다는 사실 알고 계신가요? 잘 사용하지는 않지만 이 방법도 적재적소에 적절히 사용하면 괜찮은 결과물을 얻어낼 수 있습니다. 예를 들어볼까요? 어떤 개발자는 레이아웃 기본 틀을 구성하는 방식으로 테이블안에 테이블을 넣어 위치를 조절한다고 합니다. 또 저는 웹사이트에서 사진갤러리를 만들때 테이블을 여러개 중첩해서 사진게시판을 구현한 적이 있습니다. 은근히 유용한 방법입니다. 테이블안에 테이블 넣기 [Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) [Html] Pre태그 사용법 & 예제 [Html] Margin, Padding 속성의 차이점과 사용법 [Html] Div 태그 ..
-
Web/HTML, CSS 2018.06.22 7[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등) HTML을 하다보면 굉장히 많이 사용하는 태그가 바로 일것입니다. 바로 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그중 하나입니다. 이번 포스팅에서는 HTML의 테이블을 만드는 모든 기법에 대해 다뤄보려 합니다. 테이블 만들기 주제 태그 비고 테이블의 구성 요소 테이블을 만드는 태그 테이블의 헤더부분을 만드는 태그 테이블의 행을 만드는 태그 테이블의 열을 만드는 태그 테이블을 만드는 순서는 다음과 같습니다. 먼저 제일 바깥쪽에는 태그가 들어갑니다. 그리고 가장 위에는 라는 테이블 헤더 태그를 사용합니다. Default값은 굵은..
-
Web/HTML, CSS 2018.06.21[Html] 문단을 나누는 P태그 사용법 HTML에서 문단을 나누는 태그는 P태그입니다. Paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰여지는데 이 P태그를 활용하여 문단의 정렬, 배경색 등을 바꿀 수 있습니다. 많은 분들이 BR태그와 P태그를 동일한 태그라고 생각하시는 분들이 많은데 이 두가지 태그는 분명한 차이점이 있습니다. 바로 개행의 횟수죠. BR태그는 사용한 횟수만큼 개행을 합니다. 방금 4번을 했으니 개행을 4번을 했겠군요. 하지만 P태그는 아무리 많이 사용하더라도 한번만 개행합니다. 문단을 나누는 P태그 사용법 태그 속성 비고 align="left" 왼쪽정렬 align="right" 오른쪽정렬 align="center" 가운데정렬 align="justify" 맞춤정렬 P태그에서 가장 많이 사용하는 속성은 바로 al..
-
Web/HTML, CSS 2018.06.20 4[Html] UL 태그, OL태그, DL태그, LI태그 사용법 이번 포스팅에서는 HTML의 각종 목록 태그에 대해서 알아보도록 하겠습니다. 목록태그를 잘 활용하신다면 웹사이트에서 보기 좋은 목록을 쉽게 만들 수 있습니다. 메뉴를 만들때, 안내표를 만들때 주로 사용합니다. UL태그, OL태그, DI태그, LI태그 사용법 속성 태그 비고 목록 태그 UL 글머리 기호를 앞에 붙여 목록을 만드는 형식 OL 번호를 앞에 붙여 목록을 만드는 형식 DL 기호 없이 문단으로 목록을 만드는 형식 LI UI와 OL내부에서 활용되는 태그 1. UL태그는 글머리 기호를 붙여 목록을 만드는 방식으로 순서가 필요없는 목록을 만들때 주로 사용합니다. 2. OL태그는 주로 순서가 필요한 목록을 만들때 사용하며 ol type="속성"을 줘 다양한 형태의 목록을 만들 수 있습니다. 3. DL는 기..