반응형 javascript31 [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. 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. 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 rgb, rgba, hex 색상 단위 소스 코드 안녕하세요. 스타일시트는 html를 손쉽게 스타일을 적용할 수 있습니다. css3에서는 다양한 색상을 적용할 수 있도록 색상 단위를 제공합니다. - rgb(red, green, blue): RGB 색상 단위입니다. 0~255 사이의 숫자를 입력할 수 있습니다. - rgba(red, green, blue, alpha): RGBA 색상 단위입니다. 투명도를 사용할 수 있습니다. (0,0 투명) - #000000: HEX 코드 단위입니다. 16진수 단위를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 codeomni.tistory.com css rgb, rgba, hex 색상 단위 소스 코드 codeomni.tistory.com rgb(red, green, blue) RGB 색상 단위.. 2018. 8. 17. 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 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. css px pt ex em 글자 크기 값 소스 코드 안녕하세요. css에는 웹 페이지에 알맞은 여러 글자 크기의 단위를 제공합니다. 글자 크기의 단위를 사용하면 웹 페이지가 모바일에서도 작동합니다. - px: 일반적인 픽셀입니다. 모니터의 픽셀에 따른 상대적 크기입니다. - pt: 문서에서 사용하는 포인트 단위입니다. - em: 사용하고 있는 글꼴에서 대문자 M의 너비를 기준으로 적용합니다. - ex: 사용하고 있는 글꼴에서 소문자 x의 높이를 기준으로 적용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com css px pt ex em 글자 크기 값 소스 코드 codeomni 글자 크기 값 소스 코드 글자 크기 px 단위 글자 크기 pt 단위 글자 크기 ex 단위 글자 크기 em 단위 Colore.. 2018. 8. 15. 이전 1 2 다음 반응형
