본문 바로가기

웹페이지22

[css3] a link 하이퍼링크 밑줄 없애기 소스 코드 예제 안녕하세요. html5에서 하이퍼링크를 통해 다른 웹 페이지를 쉽게 이동할 수 있습니다. 하이퍼링크는 기본적으로 밑줄이 되어 있습니다. 밑줄을 제거하거나 색상의 변경을 :link 속성을 사용하여 다양하게 적용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 codeomni.tistory.com css3 a :link 하이퍼링크 밑줄 없애기 소스 코드 예제 body { background-color: #9adaca; } a:link { color: black; text-decoration: none; } codeomni.tistory 하이퍼링크 밑줄 지우기 Colored by Color Scripter cs 실행한 화면입니다. 2018. 8. 26.

[html5] input image button 이미지 버튼 소스 코드 예제 안녕하세요. html5의 태그는 다양한 속성을 지원합니다. 태그를 사용하여 사용자의 입력을 처리할 수 있습니다. 태그의 type="image" 속성을 사용하여 이미지를 넣을 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 codeomni.tistory.com html5 input image button 이미지 버튼 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 25.

[html5] caption 태그 표 제목 삽입 소스 코드 예제 안녕하세요. html5에서는 표를 만드는 여러가지 태그를 지원합니다. 그 중에 태그를 사용하여 표에 제목을 삽입할 수 있습니다. 태그는 ~ 태그 사이에 사용가능합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 codeomni.tistory.com html5 caption 태그 표 제목 삽입 소스 코드 예제 body { background-color: #9adaca; } table { width: 300px; } codeomni 표 제목 caption 표 제목 부분 1-1 1-2 1-3 2-1 2-2 2-3 Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 24.

[html5] internet explorer 인터넷 익스플로러 호환 소스 코드 예제 안녕하세요. 윈도우에서 제공되는 인터넷 익스플로러는 업데이트 되면 렌더링 방식이 변화되어 태그를 통해 content 속성으로 렌더링 방식을 지정해야합니다. -IE=7: IE7 표준 모드 렌더링 방식 -IE=8: IE8 표준 모드 렌더링 방식 -IE=7: IE8 표준 모드 렌더링 방식 이상 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 codeomni.tistory.com html5 internet explorer 인터넷 익스플로러 호환 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory 인터넷 익스플로러 호환 Colored by Color Scripter cs 2018. 8. 24.

[html5] button 버튼 소스 코드 예제 안녕하세요. html5에는 ~ 태그를 사용하여 버튼을 만들 수 있습니다. 버튼의 type 속성을 사용하면 다양한 기능을 사용할 수 있습니다. -submit: 제출합니다. -reset: 입력된 내용을 모두 초기화합니다. -button: 버튼 모양으로만 설정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 codeomni.tistory.com html5 button 버튼 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory submit 버튼 reset 버튼 button 버튼 Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 23.

[html5] iframe 태그 외부 문서 삽입 소스 코드 예제 안녕하세요. html5에서는 외부 문서를 현재 접속한 페이지에 삽입할 수 있습니다. ~태그를 사용하면 다른 웹 문서를 가져올 수 있습니다. 태그는 다양한 속성을 사용하여 가져올 수 있습니다. -seamless: 구분하는 테두리를 제거합니다. 속성의 값을 지정하지 않습니다. -src: 가져올 문서의 주소를 지정합니다. -width: 인라인 프레임의 너비를 지정합니다. -height: 인라인 프레임의 높이를 지정합니다. -name: 이름을 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 codeomni.tistory.com html5 iframe 태그 외부 문서 삽입 소스 코드 예제 body { background-color: #9adaca; } codeomni.tis.. 2018. 8. 23.

[html5] a 하이퍼링크 태그 새 창 새 탭에서 열기 소스 코드 예제 안녕하세요. ~ 태그로 하이퍼링크를 사용할 수 있습니다. 하이퍼링크를 클릭 했을 경우 기본창에서 링크됩니다. 다른 웹 페이지나 파일을 열 경우에는 ~ 태그의 속성을 사용합니다. target 속성에서는 다양한 링크 열기를 할 수 있습니다. -_blank: 새 탭, 창 -_self: 현재 탭, 창 -_parent: 부모 탭, 창 -_top: 최상위 탭, 창 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com html5 a 하이퍼링크 태그 새 창 새 탭에서 열기 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory 새 창, 탭 열기 현재 창, 탭 열기 부모 탭, 창 최상위 탭,.. 2018. 8. 23.

[html5] 주석 태그 소스 코드 예제 안녕하세요. html5에서는 코드를 설명, 요약하는 주석이 있습니다. 주석 태그는 입니다. 주석은 프로그램을 설명하거나 코드를 보는 사람을 위한 것으로 웹 페이지에서는 볼 수 없습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com html5 주석 태그 소스 코드 예제 body { background-color: #9adaca; } codeomni 주석 태그 Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 23.

[css3] 스타일시트 box-shadow 박스 모서리 둥글게 만들기 모서리 곡선 효과 속성 소스 코드 예제 안녕하세요. html4, css2에서는 모서리를 둥글게 만들기 위해서 자바스크립트나 외부 프로그램을 이용하였습니다. CSS3에서는 모서리 부분을 둥글게 할 수 있는 속성을 지원합니다. border-radius 속성을 사용하면 편하게 변경할 수 있습니다. 속성 값으로는 크기 단위와 %(백분율) 단위를 사용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 codeomni.tistory.com css3 스타일시트 box-shadow 박스 모서리 둥글게 만들기 모서리 곡선 효과 속성 소스 코드 예제 body { padding: 100px 50px; background-color: #9adaca; } #box { border: 3px so.. 2018. 8. 22.

[css3] 스타일시트 text-indent 텍스트 들여쓰기 소스 코드 예제 안녕하세요. css3를 사용하여 웹 페이지의 디자인을 쉽게 할 수 있습니다. 워드프로세서에 있는 들여쓰기 기능을 text-indent 속성을 사용하여 만들 수 있습니다. 속성의 값으로는 크기 단위나 % 단위를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 codeomni.tistory.com css3 스타일시트 text-indent 텍스트 들여쓰기 소스 코드 예제 body { background-color: #cce0d6; } h2 { text-indent: 20px; } p { text-indent: 40px; } codeomni 들여 쓰기 codeomni 20px 들여 쓰기 codeomni 40px 들여 쓰기 Colo.. 2018. 8. 22.

[html5] progress 태그 상태 바 진행 소스 코드 예제 안녕하세요. html5에서 사용자에게 진행 상태를 보여주는 태그를 사용할 수 있습니다. 작업이나 요청의 시간, 상태를 나타납니다. 태그는 속성을 사용합니다. -value: 부동 소수점을 사용합니다. 0~설정값 사이로 지정합니다. -max: 범위를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com html5 progress 태그 상태 바 진행 소스 코드 예제 body { background-color: #9adaca; } codeomni progress 태그 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 22.

[css3] mark 태그 형광펜 마크 색상 변경 소스 코드 예제 안녕하세요. css3에서는 html5에서 새로 지원하는 형광펜 태그의 색상을 변경할 수 있습니다. 스타일시트 부분에서 태그 선택자를 이용하여 변경하시면 됩니다. background-color 속성을 사용하세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com css3 mark 태그 형광펜 마크 색상 변경 소스 코드 예제 body { background-color: #9adaca; } codeomni mark 태그 소스 codeomni mark 태그 소스 Colored by Color Scripter cs ▲ 실행 화면입니다. ▲ 기본 색상은 노란색입니다. 2018. 8. 21.

html5 mark 태그 형광펜 마크 소스 코드 예제 안녕하세요. html5에서는 html4에서 지원하지 않는 태그를 사용할 수 있습니다. 태그의 색상을 변경하기 위해서는 스타일시트의 background-color 속성을 사용해야 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 codeomni.tistory.com html mark 태그 형광펜 마크 소스 코드 예제 body { background-color: #9adaca; } codeomni mark 태그 소스 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 21.

[css3] 스타일시트 box-shadow 박스 그림자 속성 소스 코드 예제 안녕하세요. css3에는 html5를 디자인 할 수 있는 다양한 스타일을 지원합니다. 글자에 그림자 속성을 사용한 것처럼 박스에도 box-shadow 속성을 적용할 수 있습니다. 사용 방법은 box-shadow: 오른쪽 아래 흐림도 색상 순서입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 codeomni.tistory.com css3 스타일시트 box-shadow 박스 그림자 속성 소스 코드 예제 body { background-color: #cce0d6; } #box { border: 3px solid; width: 400px; padding: 10px; box-shadow: 10px 5px 10px #a89c86; } codeomni 박스.. 2018. 8. 20.

css3 스타일시트 text-shadow 텍스트 그림자 속성 소스 코드 예제 안녕하세요. css3에는 사용자가 쉽게 디자인을 할 수 있도록 그림자 속성을 지원합니다. text-shadow는 글자에 그림자를 적용하는 속성입니다. 사용 방법은 text-shadow: 오른쪽 아래 흐림도 색상 입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com css3 스타일시트 text-shadow 텍스트 그림자 속성 소스 코드 예제 body { background-color: #316097; } h1 { color: #d9cbb3; text-shadow: 10px 5px 10px #a89c86; } codeomni 텍스트 그림자 속성 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 20.

css3 스타일시트 font 글꼴 속성 소스 코드 예제 안녕하세요. css3를 통해 html로 제작된 페이지를 다양한 디자인을 할 수 있습니다. 스타일시트에서 지원하는 폰트 속성으로 폰트를 적용할 수 있습니다. -color: 글자의 색상을 지정합니다. -font-size: 글자의 크기를 지정합니다. -font-family: 글꼴을 지정합니다. -font-style: 글자의 스타일을 지정합니다. -font-weight: 글자의 두께를 지정합니다. -text-align: 글자의 정령 방식을 지정합니다. -line-height: 글자의 높이를 지정합니다. -text-decoration: 하이퍼링크의 글자를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 codeomni.tistory.com c.. 2018. 8. 19.

css 스타일시트 background 배경 속성 소스 코드 예제 안녕하세요. html5은 다양한 css3(스타일시트)를 지원합니다. 많은 웹 페이지에서 배경을 효과적으로 사용합니다. css에서 배경 속성을 지원하기 때문입니다. background: 배경의 속성을 한 번에 사용합니다. background-image: 배경에 사용할 이미지를 지정합니다. url()를 사용합니다. background-size: 이미지의 크기를 지정합니다. (너비, 높이) background-repeat: 이미지의 반복을 지정합니다. (가로, 세로 반복) background-attachment: 이미지의 부착하는 형태를 지정합니다. background-position: 이미지의 위치를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 co.. 2018. 8. 18.

html 목록 ul ol li 태그 소스 코드 예제 안녕하세요. 네비게이션을 만들 때 html5에서는 목록 태그를 사용합니다. 목록 태그는 편의를 위해서 다양하게 지원합니다. 스타일시트를 사용해서 기호를 변경할 수 있습니다. - : 글머리 기호 목록 태그입니다. - : 순서 번호 목록 태그입니다. - : 목록 요소입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com html 목록 ul ol li 태그 소스 코드 예제 codeomni.tistory 글머리 기호 목록 태그 순서 번호 목록 태그 순서 번호 목록 태그 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 18.

css 외부 스타일 시트 사용 소스 코드 안녕하세요. css 시트는 html로 작성한 웹 페이지의 스타일을 적용합니다. 스타일시트는 내부 스타일시트와 외부 스타일시트가 있습니다. 내부 시내일 시트는 태그를 사용해 html 문서 안에 작성하는 방법입니다. 외부 스타일시트는 태그에 href속성을 사용하여 html로 불러 사용합니다. 외부 스타일시트는 협업을 할 경우, 프로젝트 단위가 클 경우 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 codeomni.tistory.com css 외부 스타일 시트 사용 소스 코드 codeomni.tistory.com css 외부 스타일 시트 사용 소스 코드 Colored by Color Scripter cs ▲ html 소스 코드입니다. 1 2 3 4 5 6 7 body { background.. 2018. 8. 16.

html5 특수기호 특수 문자 소스 코드 안녕하세요. html5로 웹 페이지를 제작할 때 특수 문자가 필요한 경우가 있습니다. 특수문자를 입력할 경우는 html5에서 제공하는 코드를 사용해야 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 codeomni.tistory.com html 특수기호 소스 코드 codeomni html 특수기호 소스 코드 &amg; " | ( ) , - ´ Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 15.

bootstrap tooltip 부트스트랩 툴 소스 코드 안녕하세요. 부트스트랩은 웹 페이지를 구성하는 좋은 기능들이 있습니다. 툴팁은 웹 페이지의 방문자에게 추가적인 정보를 쉽게 전달할 수 있습니다. 또한 정보를 요약해서 UI를 개선할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 codeomni.tistory.com bootstrap tooltip 부트스트랩 툴 소스 코드 body { padding: 100px 100px; } codeomni 위 툴팁 아래 툴팁 오른쪽 툴팁 $(function () { $('[data-toggle="tooltip"]').tooltip() }) Colored by Color S.. 2018. 8. 14.

html bootstrap popover 부트스트랩 팝오버 소스 코드 안녕하세요. 부트스트랩에는 웹 페이지를 쉽게 구현할 수 있는다양한 기능들이 있습니다. 기능들은 사용자에게 편의를 주고 시각적인효과를 줍니다. 팝 오버는 웹 페이지에 메모처럼 추가적인 내용을효과적으로 표현합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 codeomni.tistory.com bootstrap popover 부트스트랩 팝오버 소스 코드 body { padding: 100px 100px; } Popover button $("#pop").popover(); Colored by Color Scripter cs ▲ 실행 화면입니다. 참고 문헌 Popovers . (Aug 12 2018). http://boo.. 2018. 8. 12.

이전 1 다음

티스토리툴바