WEB (53) [CSS] display와 visibility 차이 display 는 요소를 인라인 속성으로 보여줄지, 블록 속성으로 보여줄지 등 요소의 표시 방법을 지정합니다. visibility 는 요소의 표시 또는 숨김 여부를 지정합니다. display: none 과 visibility: hidden 이 속성들은 둘 다 요소를 숨겨 보이지 않게 합니다. 요소를 숨기는 기능은 똑같지만 차이점이 있습니다. display: none 은 요소의 영역까지 없애기 때문에, 마치 페이지에 해당 요소가 없는 것처럼 표시됩니다. visibility: hidden 은 요소는 숨기지만 영역은 그대로 남겨두므로, 해당 요소의 영역이 공백으로 표시됩니다. 다음 예시에서 빨강, 노랑, 초록 중 가운데 있는 노랑을 숨겨보겠습니다. 빨강 노랑 초록 display: none .yellow { d.. [CSS] 글자 간격(자간) 조절하기 글자 사이의 간격을 늘리거나 줄이고 싶다면 letter-spacing 속성을 사용할 수 있습니다. letter-spacing 속성의 기본값은 0 입니다. 속성 값에는 px, em 등의 단위를 사용할 수 있습니다. 자간을 늘리고자 한다면 아래와 같이 양수 값을 넣으면 됩니다. p { letter-spacing: 10px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquen.. [CSS] a 태그 스타일 적용 및 밑줄 제거 태그는 4가지 상태를 가지고 있습니다. a:link 사용자가 링크를 방문하지 않은 기본 상태 a:visited 사용자가 링크를 방문한 후의 상태 a:hover 사용자가 링크에 마우스를 올릴 때의 상태 a:active 사용자가 링크를 클릭하는 순간의 상태 각 상태별로 text-decoration , background , color , font-size 등 이외의 다양한 스타일 속성을 각각 적용할 수 있습니다. 스타일을 적용할 경우 상태의 순서는 반드시 아래와 같이 작성해주세요. a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-d.. [CSS] 줄바꿈 방지하기 내용이 길어 콘텐츠 영역을 넘어가게 되면 기본적으로 줄바꿈이 됩니다. 아래와 같이 설정하면 자동 줄바꿈을 방지할 수 있습니다. div { white-space: nowrap; } [jQuery] 간단한 이미지 갤러리 단순한 이미지 갤러리를 만드는 방법입니다. 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 3. CSS * { margin: 0; padding: 0; } .gallery { width: 100%; max-width: 600px; margin: 0 auto; } .thumb { width: 100%; margin-bottom: 3px; list-style: none; overflow: hidden; } .thumb li { width: 25%; float: left; text-align: center; } .thumb li img { width: 98%; } .main { width: 100%; text-align: center; } .main img { width: 99.5%; } 4. jQuery [CSS] 마우스 드래그 영역 색상 변경하기 마우스로 어떤 요소를 드래그했을 때, 드래그된 영역의 배경색은 대부분 파란색이지만 ::selection 선택자를 이용하면 아래 이미지처럼 원하는 배경색이나 텍스트 색상 등으로 변경할 수 있습니다. ::selection 선택자는 background , color , cursor , outline 과 같은 몇 가지 속성만 적용할 수 있습니다. 또한, IE9 이상의 브라우저에서 지원됩니다. ::-moz-selection { background: red; color: #fff; text-shadow: none; } /* Firefox */ ::selection { background: red; color: #fff; text-shadow: none; } 특정 요소에만 적용하고자 할 때에는 앞에 해당 요소의 클래.. [HTML] 모바일에서 자동 전화걸기 링크 제거 및 방지 모바일에서 숫자들이 나열되어 있으면 전화번호로 인식하여 자동으로 전화걸기 링크가 생성되는 것을 볼 수 있습니다. 이를 방지하려면 아래 코드를 태그 안에 삽입하면 됩니다. [HTML] 반응형 웹 - 메타 태그 Viewport(뷰포트) 설정 Viewport(뷰포트)는 데스크톱이나 모바일 기기 등 다양한 디바이스의 화면 크기에 맞게 웹 페이지의 크기를 조정할 때 사용합니다. 뷰포트를 설정하는 메타 태그는 태그 안에 추가하면 됩니다. width : 뷰포트 너비로, device-width는 디바이스 화면 너비에 맞게 페이지 너비가 자동 설정됨을 의미합니다. initial-scale : 페이지가 처음 로딩될 때의 확대/축소 수준을 설정합니다. 기본값은 1.0이며, 0~10.0의 값을 설정할 수 있습니다. maximum-scale : 페이지의 최대 확대/축소 수준을 설정합니다. 0~10.0의 값을 설정할 수 있습니다. (1.0로 설정하면 확대/축소 불가능하며, 2.0으로 설정하면 2배 확대/축소됩니다.) minimum-scale : 페이지의 최소 확.. 이전 1 2 3 4 5 6 7 다음
