반응형 Source34 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. 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. 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. bootstrap navigationbar navbar 부트스트랩 네비게이션바 네비바 소스 코드 안녕하세요. 부트스트랩은 여러가지 편의 기능을 제공합니다. 이번에 게시할 글은 부트스트랩의 네비바(navbar)입니다. 대부분 웹 페이지에 접속하시면 상단에 보이는 메뉴입니다. 사용자에게 웹 페이지의 기능을 편하게 제공합니다. 구현하기 위해서는 많은 코드가 필요하지만 부트스트랩에서는 작성자를 위한 간단한 코드를 제공합니다. 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 38 39 40 41 42 43 codeomni.tistory.com bootstrap navigationbar navbar 부트스트랩 네비게이션바 네비바 소스 코드 body { padding: 100px.. 2018. 8. 13. vegas 플러그인 풀스크린 배경 소스 코드 안녕하세요. html 문서에는 다양한 플러그인이 있습니다. 플러그인을 통해서 작성자에게 알맞는 홈페이지를 구현할 수 있습니다. Vegas 플러그인을 사용하시면 손쉽게 풀 스크린 홈페이지를 구현할 수 있습니다. https://vegas.jaysalvat.com/ Vegas 플러그인 홈페이지입니다. 접속하시면 다운로드와 사용 방법을 파악할 수 있습니다. 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 38 codeomni.tistory.com vegas 플러그인 풀스크린 배경 소스 코드 $(function(){ $('body').vegas({ slides:[ {src:'veg.. 2018. 8. 11. 이전 1 2 다음 반응형
