css (10) [CSS] 마우스 오버시 이미지 확대 마우스 오버시 이미지가 확대되는 효과입니다. 이미지 출처 : Unsplash의 Mae Mu 1. CSS .img_list { list-style: none; width: 100%; overflow: hidden; }.img_list li { float: left; width: 33.3%; padding: 2%; box-sizing: border-box; }.img_list li:nth-child(3n+1) { clear: both; }.img_list li a { display: block; position: relative; width: 100%; height: 0; padding-top: 75%; border-radius: 20px; overflow: hidden; }.img_list li a.. [CSS] div 위로 올라오는 애니메이션 효과 페이지 실행시 해당 요소가 아래에서 위로 올라오는 애니메이션을 CSS로 구현합니다. Content 1. CSS .content { position: relative; animation: fade_up 1s; }@keyframes fade_up { 0% { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); }} 2. HTML Content [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; } [CSS] textarea 크기 조절 방지 textarea { resize: none; } textarea의 크기를 변경하지 못하도록 고정해줍니다. textarea { resize: both; /* 크기 조절 가능 */ resize: horizontal; /* 좌우로만 크기 조절 가능 */ resize: vertical; /* 상하로만 크기 조절 가능 */ } 상하, 좌우로만 부분 조절하게 할 수도 있습니다. [CSS] 그라데이션 배경 만들어주는 사이트 http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com 이전 1 2 다음
