WEB (49) [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의 아이콘입니다. 홈페이지에 파비콘을 적용하려면 태그 안에 아래 코드를 삽입하면 됩니다. [CSS] textarea 크기 조절 방지 textarea { resize: none; } textarea의 크기를 변경하지 못하도록 고정해줍니다. textarea { resize: both; /* 크기 조절 가능 */ resize: horizontal; /* 좌우로만 크기 조절 가능 */ resize: vertical; /* 상하로만 크기 조절 가능 */ } 상하, 좌우로만 부분 조절하게 할 수도 있습니다. [CSS] placeholder 스타일 적용 및 IE9 이하 브라우저 대응 대부분의 브라우저에서 placeholder 텍스트의 기본 색상은 밝은 회색이므로, 다른 색상으로 변경하고 싶다면 아래와 같이 할 수 있습니다. input::placeholder { color: red; } input::-webkit-input-placeholder { color: red; } /* Webkit, Chrome */ input::-moz-placeholder { color: red; opacity: 1; } /* Firefox 4~8 */ input:-moz-placeholder { color: red; opacity: 1; } /* Firefox 19+ */ input:-ms-input-placeholder { color: red; } /* IE 10+ */ Firefox의 경우는 plac.. [jQuery] 이미지 슬라이더 플러그인 bxslider 응용 https://bxslider.com/ 이미지 슬라이더 플러그인 bxslider 응용 방법입니다. 제목입니다. 부제 테스트입니다. 제목입니다. 부제 테스트입니다. 제목입니다. 부제 테스트입니다. 1. 태그 안에 제이쿼리와 bxslider 스크립트를 불러옵니다. 2. CSS .slide_wrap { width: 800px; height: 400px; position: relative; } .slide_img { z-index: 1; } .slide_img .img1 { width: 800px; height: 400px; background: url('이미지경로') center center no-repeat; background-size: cover; } .slide_img .img2 { width: 800.. [jQuery] 버튼 클릭 시 화면 중앙에 레이어 팝업 띄우기 버튼 클릭 시 레이어 팝업을 화면 중앙에 띄우는 방법입니다. 팝업 열기 팝업 내용 팝업 닫기 1. 태그 안에 제이쿼리를 불러옵니다. 2. CSS #mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opacity: 0.5; z-index: 9998; display: none; } .btn_open { padding: 5px 10px; background: #000; border: 0; color: #fff; cursor: .. 이전 1 2 3 4 5 6 7 다음
