Jam's story

style에서 color을 지정할 수 있다. i 태그 사용 1.가장 간단한 방법 ? 아이콘 라이브러리 사용 fontawesome.com 가장 간단한 방법? 아이콘 라이브러리 fontawesome.com 2.구글 아이콘 Google cloud favorite attachment computer traffic 3.부트스트랩 Bootstrap

구글 글꼴 사용 100개 이상 무료 link 태그 설정 head 태그 안에, sty le태그 위에 이 링크를 걸어준다. 뒤에가 글꼴 이름이다. 태그를 두개 다 달 필요없이 | 연산자 이용 HTML 삽입 미리보기할 수 없는 소스 주의 ! 여러글꼴을 요청하면 속도가 느려진다

font-family 글꼴명 사이에 공백이 있다면 "" 를 줘야한다 . 예) font-family: Arial, Verdana, "Times New Roman"; font-size em 이란 단위가 있다. 2em - > 2배 브라우저 기본 텍스트 크기는 16px 1em==현재글꼴크기 2em==32px 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 개발자가 픽셀 대신에 em 단위를 사용한다. 브라우저의 기본단위를 바꾸면 따라 바뀌기 때문에 em을 쓴다. font-size:13px; font-size:xx-large; font-size:2em; font-weight font-weight: bold; 기본값은 400 font-variant small-caps - 작은 대문자로 변환 font-variant:..

text-shadow 3가지요소 양식: x축, y축, 색 / 수평, 수직 색 4가지요소 양식: 수평, 수직 색 h3{ text-shadow: 2px 2px red; } 번짐효과 추가 4가지요소. 번짐효과 추가 h3{ text-shadow: 2px 2px 10px red; } 번짐효과만 준다면 ? h3{ text-shadow: 0 0 10px red; } 번짐효과를 두개 주기 h3{ text-shadow: 0 0 10px red, 0 0 15px blue; } 번짐효과를 세 개 주기 h3{ text-shadow: 1px 1px 2px black, 0 0 25px pink, 0 0 5px blue; }

텍스트 양쪽 정렬 text-align: justify; 우측방향으로 글쓰기 style 속성에 추가 direction:rtl; unicode-bidi: bidi-override; vertical-align 텍스트에서 이미지의 수직정렬 vertical-align: baseline;이 기본값 img.a{vertical-align: baseline;} img.b{vertical-align: text-top;} img.c{vertical-align: text-bottom;} img.d{vertical-align: sub;} img.d{vertical-align: sup;} img.e{vertical-align:middle;} a태그 상태 a:link - 방문하지 않은 링크 a:visited - 사용자가 방문한 링..

pre{ border: 15px solid green; padding: 50px; margin:20px; width:300px; }

1.padding:50px; 2.padding: 50px 50px 50px 50px ; padding-left: 50px ; padding-right : 50px ; padding-top: 50px ; 3. padding-bottom: 50px ; 1,2,3 같다. ----- 1,2 같다. 1.padding: 25px 50px ; 2.padding: 25px 50px 25px 50px; ------------------------- top left/right bottom padding: 25px 50px 100px; box-sizing ex01은 그냥 width:300을 설정했고 ex02는 ex01에다 padding 10을 주어 width가 확장되었다 . box-sizing: border-box; 을 추..

부모꺼를 자식이 물려받는다. div{ border:1px solid red; margin-left:50px; } p.ex1{ border:1px solid blue; } 자식에 inherit 속성을 추가 div{ border:1px solid red; margin-left:50px; } p.ex1{ border:1px solid blue; margin-left: inherit; } p가 부모div의 속성을 물려받았다. 전체코드 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro suscipit vitae at recusandae sint itaque amet sit id numquam consequuntur dolor ipsa fugiat e..