본문 바로가기

WEB (49)

[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..
[CSS] 테이블 셀 여백/간격 (table border, border-collapse) 예전에는 테이블을 만들 때 셀의 여백(cellpadding)이나 간격(cellspacing)을 표현하기 위해 위와 같이 HTML로 작성했었으나, 요즘(HTML5)은 아래와 같이 CSS로 대체하여 값을 적용합니다. border-collapse: separate; /* 기본값, 셀의 여백을 만들고 각 셀마다 테두리를 표시함 */ border-collapse: collapse; /* 셀의 여백을 없애고 테두리를 하나로 합쳐줌 */ border-collapse: initial; /* 이 속성을 기본값으로 설정함 */ border-collapse: inherit; /* 부모의 속성을 상속 받음*/ 셀의 여백을 만들기 위해 border-collapse: separate 를 사용할 경우에는 아래와 같이 border-..
[CSS] opacity(투명도) 적용 및 IE8 이하 브라우저 대응 opacity 속성은 IE8 이하의 브라우저에서 지원하지 않으므로, 크로스 브라우징을 위해 아래와 같이 별도로 투명도를 지정해야 합니다. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8 */ filter: alpha(opacity=50); /* IE5~7 */ zoom: 1; opacity: 0.5; opacity는 0~1의 값을 가지고, 0에 가까울수록 투명해지며 1에 가까울수록 불투명해집니다. filter는 0~100의 값을 가지고, 역시 0에 가까울수록 투명해집니다. opacity: 0.1 filter: alpha(opacity=10) opacity: 0.5 filter: alpha(opacity=50) opacit..
[CSS] border-radius 속성 (모서리 둥글게) border-radius 속성은 모서리 반경에 값을 주어, 해당 요소의 모서리를 둥글게 표현하도록 합니다. 이 속성은 IE9 이상의 브라우저에서 지원됩니다. 모든 모서리에 10px로 동일한 값이 적용됩니다. border-radius: 10px; 4개의 모서리에 각각의 값을 적용할 수 있습니다. border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; 각각 다른 값을 한 줄에 작성할 수도 있습니다. 첫 번째 40px은 상단 왼쪽 모서리, 두 번째 30px은 상단 오른쪽 모서리, 세 번째 20px은 하단 오른쪽 모서리, 네 번째 10px은..

티스토리툴바