본문 바로가기

[Front-End] 프론트엔드/[html5]20

[html5] br 줄 바꾸기 enter 엔터 소스 코드 예제 안녕하세요. html5에서는 사용자의 편의를 위한 다양한 태그를 지원합니다. 태그는 웹 페이지에서 줄을 바꿔주는 기능을 합니다. 태그를 통한 웹 페이지의 텍스트를 입력할 경우 텍스트 편집기의 enter를 인식하지 못합니다. 태그는 닫는 태그가 없이 단독으로 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 codeomni.tistory.com html5 br 줄 바꾸기 enter 엔터 소스 코드 예제 body { background-color: #4571a0; } codeomni html5 br 줄 바꾸기enter 엔터 소스 코드 예제 Colored by Color Scripter cs 실행 화면입니다. 태그에서 줄 바꿈을 확인할 수 있습니다. 2018. 8. 30.

[html5] radio button 라디오 버튼 삽입 소스 코드 예제 안녕하세요. html5에서는 다양한 타입의 입력을 지원합니다. 그 중에 라디오 버튼은 회원 가입과 선택 항목에서 많이 볼 수 있습니다. ~ 태그를 통해 사용가능합니다. 새로운 선택을 할 경우 기존에 선택된 버튼은 취소합니다. -name: 이름을 지정합니다. -value: 서버에 사용되는 값을 지정합니다. -checked: 선택된 상태로 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 codeomni.tistory.com html5 radio button 라디오 버튼 삽입 소스 코드 예제 body { background-color: #4571a0; } codeomni YES NO Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 30.

[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.

[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.

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.

html5 a 하이퍼링크 태그 소스 코드 예제 안녕하세요. 워드프로세서나 웹 페이지에서는 하이퍼링크를 사용할 수 있습니다. html5에서도 하이퍼링크를 지원하는 ~ 태그를 사용할 수 있습니다. 하이퍼링크 태그는 여러 속성일 있습니다. - 절대 경로: 접속한 페이지의 위치와 상관없이 웹 페이지의 파일의 위치를 사용합니다. - 상대 경로: 접속한 페이지의 위치로 결정되는 웹 페이지의 파일을 사용합니다. - 아이디 경로: 접속한 페이지의 다른 태그의 id를 사용합니다. - 메일 경로: 메일 주소를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com html a 하이퍼링크 태그 소스 코드 예제 body { background-color: #316097; } codeom.. 2018. 8. 19.

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.

html5 img 이미지 넣기 소스 코드 안녕하세요. HTML5에서는 기존 프로그래밍 언어보다 쉽게 이미지를 넣을 수 있습니다. 스타일 시트(css)를 이용하여 원하는 스타일을 지정할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 codeomni.tistory.com html img 이미지 넣기 소스 코드 Colored by Color Scripter cs src: 이미지 파일의 경로를 지정합니다. 다른 폴더도 지정할 수 있습니다. 웹 서버를 통해 이미지를 가져올 수 있습니다. alt: 이미지가 출력할 수 없을 경우 대체하는 글자를 지정합니다. width: 이미지의 너비를 지정합니다. height: 이미지의 높이를 지정합니다. ▲ 실행화면입니다. 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.

html favicon icon 아이콘 소스 코드 안녕하세요. 접속한 웹 페이지의 탭 부분을 보면 해당 사이트에 로고나, 아이콘을 볼 수 있습니다. 파비콘(favicon)으로 웹 사이트를 대표하는 아이콘입니다. html 코드 중 태그를 이용하여 간단하게 구현할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 codeomni.tistory.com html favicon icon 아이콘 소스 코드 html favicon icon 소스 코드입니다. Colored by Color Scripter cs ▲ 아이콘의 크기는 16*16 픽셀로 제작합니다. ▲ 실행 화면입니다. 2018. 8. 10.

html 글자 모양 태그 소스 코드 안녕하세요. html5에는 다양한 글자 모양 태그를 사용할 수 있습니다. 웹 페이지를 작성할 때 필요한 곳에 해당 태그를 사용하세요. 글자 모양 태그는 제목 글자 태그~, 본문 글자 태그와 함께 사용 가능합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com html 글자 모양 태그 소스 코드 b 태그 i 태그 small 태그 sub 태그 sup 태그 ins 태그 del 태그 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 9.

html 뷰포트 소스 코드 viewport 스마트폰 안녕하세요. 뷰포트는 데스크탑과 스마트폰에서 웹 페이지나 문서가 모두 표시되는 기능입니다. 1 cs 태그는 웹 문서의 내용을 요약합니다. 사이에 작성됩니다. name은 viewport로 지정하였고 width=device-width는 사용자의 매체의 px크기에 맞게 웹 문서를 실행합니다. initial-scale=1은 웹 문서를 실행할 때 배율을 1로 설정하여 너비를 지정합니다. 2018. 8. 7.

html 이미지 풀 스크린 배경 소스 코드, 제작, 만들기 안녕하세요. 페이지에 정보를 효과적으로 전달하기 위해 이미지나 동영상을 풀 스크린으로 지정하여 사용합니다. 코딩 방법은 css를 사용해서 크기를 지정합니다. 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 codeomni.tistory.com 풀 스크린 소스 코드 html { background: url(background.png) no-repeat center center fixed; background-size: cover; } body { font-family: Fixedsys; color: #d9cbb3; } div { margin-top: 100px; padding:200px 100px; } h1 제목입니다. conten.. 2018. 8. 6.

정말 간단한 홈페이지 만들기 소스, 코드 안녕하세요. html로 홈페이지를 쉽게 만들 수 있는 방법이 있습니다. 먼저 , 텍스트 편집기를 실행합니다. 일반적으로 Windows(윈도우) 컴퓨터에서는 메모장을 사용하고 Mac 사용자는 텍스트/편집을 사용합니다. 전문 html 편집기를 사용하여 웹 페이지를 만들고 수정할 수 있습니다. 그런 다음 html 쓰기를 작성하거나 일부 html을 메모장에 복사합니다. 그런 다음 html페이지를 저장합니다. 파일을 컴퓨터에 저장합니다. 1 2 3 4 5 6 7 8 9 10 탭 부분 표시 제목 부분입니다. 일반 글 부분입니다. cs 2018. 8. 5.

이전 1 다음

티스토리툴바