본문 바로가기

분류 전체보기 (69)

[CSS] box-sizing 속성 box-sizing 속성을 통해 요소의 전체 width 와 height 에 padding 과 border 를 포함할 수 있습니다. 이 속성은 IE8 이상의 브라우저에서 지원됩니다. box-sizing: content-box; /* 기본값, width와 height에 content만 포함되며 padding과 border는 포함되지 않음 */ box-sizing: border-box; /* width와 height에 content와 더불어 padding과 border가 포함됨 */ box-sizing: initial; /* 이 속성을 기본값으로 설정함 */ box-sizing: inherit; /* 부모의 속성 값을 상속 받음 */ content-box(default) border-box 어떤 요소의 wid..
[CSS] rgba(투명도) 적용 및 IE8 이하 브라우저 대응 rgba는 opacity 속성과는 달리 배경색만 투명하게 변경할 수 있습니다. IE8 이하의 브라우저에서 지원하지 않으므로, 크로스 브라우징을 위해 아래와 같이 별도로 투명도를 지정해야 합니다. background: transparent; background-color: rgba(255, 255, 255, 0.5); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff); /* IE6..
[CSS] float 속성 float 속성은 요소를 특정 위치에 지정하고자 할 때 사용합니다. 이 속성을 적용할 경우, 이 다음에 오는 요소는 float 속성이 적용된 요소 주변으로 흐릅니다. float: none; /* 기본값, 요소가 그 위치 그대로 표시됨 */ float: left; /* 요소가 왼쪽에 떠있게 함 */ float: right; /* 요소가 오른쪽에 떠있게 함 */ float: inherit; /* 부모의 속성 값을 상속 받음 */ float 속성을 가진 요소 뒤에 오는 요소는 float 요소의 주변으로 배치되므로, 이를 방지하기 위해서 clear 속성을 사용할 수 있습니다. clear: none; /* 기본값, 양쪽 float 속성을 허용함 */ clear: left; /* 왼쪽 float 속성을 해제함 */..
[CSS] cursor(마우스 커서) 속성 ※ 예시 이미지는 이해를 돕고자 직접 제작한 이미지이므로 무단 사용 및 복제를 금지합니다. CSS 예시 설명 cursor: auto; 기본값, 브라우저가 커서를 자동으로 설정함 cursor: alias; 별칭이나 바로가기가 생성됨 cursor: all-scroll; 어떤 방향으로든 스크롤 가능함 cursor: cell; 셀(또는 셀 세트)을 선택할 수 있음 cursor: context-menu; 콘텍스트 메뉴를 선택할 수 있음 cursor: col-resize; 열의 크기를 가로로 조정할 수 있음 cursor: copy; 복사할 내용을 나타냄 cursor: crosshair; 십자 커서 cursor: default; 기본 커서 cursor: e-resize; 박스의 모서리가 오른쪽(동쪽)으로 이동함 cu..
[CSS] 웹폰트(Web Fonts) 사용하기 웹 폰트 적용하는 방법 웹 폰트를 통해 다른 사용자의 컴퓨터에 설치되지 않은 폰트를 사용할 수 있습니다. 구글의 'Noto Sans KR' 폰트를 예를 들어 설명하겠습니다. 여기를 클릭하시면 'Noto Sans KR' 폰트를 다운로드할 수 있습니다. CSS 내에 @font-face 규칙 정의하기 @font-face { font-family: 'Noto Sans KR'; /* 필수 항목 */ src: url('https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2') format('woff2'); /* 필수 항목 */ font-style: normal; /* 옵션 항목 */ font-weight: normal; /* 옵션 항목 */ font..
[jQuery] 우측 슬라이드 메뉴 버튼을 클릭하면 우측에서 메뉴가 슬라이딩 되는 동시에, 메뉴 밖의 영역은 검정색 반투명 마스크로 덮습니다. logo 메뉴 열기 메뉴 닫기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 1. 태그 안에 제이쿼리를 불러옵니다. 2. CSS #header { width: 100%; height: 52px; background: #447e65; position: relative; overflow: hidden; } #mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(o..
저작권 걱정 없는 무료 폰트 '안심 글꼴파일 서비스' 문체부에서 제공하는 '안심 글꼴파일 서비스'는 저작권 걱정 없이 무료로 자유롭게 이용 가능한 한글 폰트 모음입니다. 자세한 사항은 문화체육관광부 페이지를 확인하시기 바랍니다. 폰트를 다운로드 하시려면 아래 버튼을 클릭해주세요. 다운로드 하러 가기 → 다운로드 받을 수 있는 무료 폰트 목록입니다.
한글 로렘 입숨(Lorem Ipsum) 생성 사이트 로렘 입숨(Lorem Ipsum)은 출판이나 그래픽 디자인 분야에서 최종 결과물에 들어갈 텍스트 대신, 임시로 작성하는 의미 없는 텍스트입니다. 로렘 입숨을 줄여서 립숨(Lipsum)이라고도 합니다. 디자이너 분들은 시안을 만들 때 한 번씩은 필요로 하게 되므로, 한글로 만들어진 로렘 입숨 사이트 2개를 소개해드립니다. http://hangul.thefron.me/ 한글입숨 - 무의미한 한글 텍스트 생성기 한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다. hangul.thefron.me 간편하게 원하는 문단 수, 문단 길이를 선택하면, 「청춘예찬」과 「별 헤는 밤」을 소스로 하는 무의미한 텍스트을 생성할 수 있습니다. http://guny.kr/stuff/klorem/ 한글 Lorem Ipsum ..

티스토리툴바