Jam's story

글꼴 파일은 ttf 트루타입글꼴 :1980년대 후반 Apple/MS 개발한 표준 글꼴 otf 오픈타입글꼴 woff 웹 오픈글꼴 형식 웹 글꼴 사용: 클라이언트에 설치되지 않은 글꼴을 웹 서버에서 글꼴 파일 자동으로 다운로드 -> 사용자 사용 font-face Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit reprehenderit est laudantium ut quo neque exercitationem optio quod alias expedita, mollitia fugit excepturi sapiente minus voluptatibus, temporibus, id esse repudiandae. NoteLorem, ipsum d..

text-overflow 문자 넘쳤을 때 word-wrap 단어 부수기 word-break 단어 부수기 writing-mode 쓰기모드 (가로/세로) white-space 줄바꿈금지 white-space :nowrap; 줄바꿈 하지 않는다. overflow:hidden 오버플로 된 부분 감추기 text-overflow 표시되지 않는 오버플로 콘텐츠가 사용자에게 어떻게 신호되어질 지 지정 clip p.text1{ overflow:hidden; text-overflow:clip; } ellipsis p.text2{ overflow:hidden; text-overflow:ellipsis; } word-wrap: break-word p.text3{ word-wrap: break-word; } p.text3{ w..

text-shadow:수평 그림자 , 수직 그림자 번짐효과 색상 예) text-shadow: 5px 5px 10px red; box-shadow: 0 0 3px red; box-shadow: 0 0 10px blue, 3px 3px 20px red; 그림자 색상을 두개 줄 수 있다. 그림자효과 (text-shadow) 박스 그림자 효과(box-shadow) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 h1{ color:white; text-shadow: -3px 0 black, 0 3px blue, 3px 0 red, 0 -3px green; } writing-mode: 가로로 쓰기, 세로로 쓰기 horizontal-tb; 가로로 쓰기 vertical-lr ,vertic..

[CSS 그라디언트 (gradient) 효과] 두 개이상의 지정된 색상간에 부드러운 전환 선형, 방사형, 원추형 그라디언트 유형 선형 그라디언트 형식: 선형 : 선처럼 부드러운 전환 background-image: linear-gradient (그라데이션 방향, 최소한 두개의 색상지정), 예) background-image: linear-gradient (그라데이션 방향, red, yellow); background-image: linear-gradient(45deg, rgba(255,0,0,0.5),yellow); background-image: linear-gradient(45deg, rgba(255,0,0,0.5),yellow, blue); 방사형 : 원처럼 부드러운 전환 background-ima..

background-size -contain: 가능한 크게 배경이미지 확대 / 비율적으로 채움 -cover: 콘텐츠 영역이 완전히 배경 이미지에 포함되도록 처리 배경사이즈:contain,cover -contain: 가능한 크게 배경이미지 확대 -cover: 콘텐츠 영역이 완전히 배경 이미지에 포함되도록 처리 contain,cover x Lorem ipsum dolor sit amet. contain Deserunt eos dicta natus in? cover Fugit illum repellat id explicabo. 배경사이즈 Lorem, ipsum dolor. Neque, eligendi eveniet! Accusantium, unde obcaecati? 배경이미지 여러개 ex01_03 여러배경 ..

자바스크립트로 x 표시(span) 없애기 Hong Gil Dong × 1번째 방법 : × 2번째방법: × 3번째방법: × 4번째방법: × 2.여러개 출력 Hong Gil Dong Java Developer Hong Gil Dong Java Developer Hong Gil Dong Java Developer Hong Gil Dong Java Developer Hong Gil Dong Java Developer Hong Gil Dong Java Developer Hong Gil Dong Java Developer 3 x버튼 누르면 위에 메뉴바 사라지기 hong × hong gil dong Java Developer

배경이미지 여러개 [CSS] 여러 배경이미지 (다중 배경) 추가 1.background-size 2.background-origin Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sint consequatur nihil atque. Distinctio cum incidunt vero assumenda nobis quibusdam quia nisi quidem iste architecto cumque rem magnam asperiores repellat! Esse et eum nihil cupiditate soluta ullam eaque illum omnis perspiciatis eos duci..

css 둥근 모서리 Lorem ipsum dolor. Optio eveniet quisquam. Sunt iure natus. HTML 삽입 미리보기할 수 없는 소스