WEB (53) [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은.. [CSS] display 속성 display 속성에는 5가지가 있습니다. display: none; /* 해당 요소를 보여주지 않음 */ display: block; /* 해당 요소를 블록 요소로 보여줌 */ display: inline; /* 해당 요소를 인라인 요소로 보여줌 */ display: inline-block /* 블록 요소와 인라인 요소의 특성을 동시에 가진 형태 */ display: inherit /* 부모의 속성을 상속 받음 */ 블록 요소와 인라인 요소에 대해 알고 싶다면 아래 링크를 참조하세요. [HTML] 블록 요소와 인라인 요소 [HTML] 블록 요소와 인라인 요소 블록 요소(Block-level Elements) 블록 요소는 항상 새로운 줄에서 시작하여 가로 너비의 100%를 차지하므로, 블록 요소 다음에는.. [HTML] 블록 요소와 인라인 요소 블록 요소(Block-level Elements) 블록 요소는 항상 새로운 줄에서 시작하여 가로 너비의 100%를 차지하므로, 블록 요소 다음에는 항상 줄 바꿈이 됩니다. 블록 요소는 vertical-align 과 text-align 속성을 적용할 수 없습니다. display: inline 속성을 적용하여 인라인 요소로 변경할 수 있습니다. HTML의 블록 요소 - 인라인 요소(Inline Elements) 인라인 요소는 새로운 줄에서 시작하지 않으며, 필요한 만큼의 너비만을 차지합니다. 인라인 요소는 블록 요소를 포함할 수 없습니다. width 과 height , margin-top 과 margin-bottom 속성을 적용할 수 없습니다. display: block 속성을 적용하여 블록 요소로 변경할 .. [jQuery] 간단한 탭 메뉴 간단한 탭 메뉴입니다. menu 1 menu 2 menu 3 1 첫 번째 메뉴 내용입니다. 2 두 번째 메뉴 내용입니다. 3 세 번째 메뉴 내용입니다. 1. 태그 안에 제이쿼리를 불러옵니다. 2. CSS .tab_box { width: 600px; margin: 0 auto; } .tab_menu { margin: 0; padding: 0; list-style: none; overflow: hidden; } .tab_menu li { float: left; margin: 0 1px 0 0; padding: 10px 15px; background: #eee; color: #555; cursor: pointer; } .tab_menu li.on { background: #000; color: #fff; } .. [HTML] 파비콘(favicon) 적용 방법 파비콘은 16 x 16 사이즈로 확장자 .ico의 아이콘입니다. 홈페이지에 파비콘을 적용하려면 태그 안에 아래 코드를 삽입하면 됩니다. 이전 1 2 3 4 5 6 7 다음
