study 코딩하자

CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다. 그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다. 애니메이션 장점 CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대..

방법 li > a에 포지션 relative를 주고, transition을 0.3으로 자연스럽게 한다. 마우스 오버와 마우스 오버하지 않을 때의 차이를 주기 위하여 미세하게 컬러를 바꿔주었다 .footer_menu >div li a { color: rgb(57,57,57); transition: all 0.3s; } .footer_menu >div li a:hover { color: #000; } 가상요소를 주기 위하여 li > a 에 position:relative를 주고, 가상요소에는 position: absolute를 한다. 그리고 transform: sacleX(0)을 0으로 한다 .footer_menu >div li a { position: relative; } .footer_menu >div l..

개요 가끔, 제목이 길거나 적당히 띄어주지 않으면 내 레이아웃을 넘어서 저 어딘가로 글이 나아가고 있다 그 때 주는 것이 한줄 효과 즉, 한 줄로 나타내는 것인데 이것을 분해해보겠다 분해 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } overflow: hidden; 글이 넘치는 걸 숨겨준다! 정해진 크기에 맞게 딱 없었던 것 처럼 잘라 쓰기 편하다 white-space: nowrap; white-space란, 공백 문자를 처리하는 방법이다. nowrap을 하게 되면 줄글이 밑으로 가지 않게 한다 text-overflow: ellipsis; 출처 : https://aboooks.tistory.com/382 text-overflow는..

반응형 웹 반응형 웹은 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라서 화면 크기가 자동으로 변하게 해준다. 미디어 쿼리(Media Query)는 접속하는 장치에 따라서 CSS 스타일을 변경한다.( 다른 프로그래밍 언어의 if 조건문과 비슷한 개념) PC로 접속하면 PC화면에 맞게, 스마트폰으로 접속하면 스마트폰 화면에 맞게 레이아웃을 변경한다. view port 뷰 포트(View Port)는 작은 화면의 스마트폰에서 PC의 웹 페이지 표시할 때 전체적인 페이지의 배율을 조정해준다. 뷰 포트 설정 width=device-width 페이지의 가로 길이를 기기의 스크린 가로 길이로 설정한다. height=device-height 페이지의 세로 길이를 기기의 스크린 세로 ..

css로 table을 꾸미는 6가지 방법 1. 테두리 border 속성은 기본적으로 상속되지 않습니다. 따라서 table, tr, th td 중 어디에 테두리를 만들지 전략을 짜고 각 태그에 테두리를 달리 적용한다. 그리고 table 태그에 border-collapse: collapse 속성 값이 있어야 tr, th 태그의 border속성 디자인이 제대로 적용되기 때문에 tr, th 태그에 border 속성이 있다면 필수적으로 넣어야 한다.html5에서는 유일하게 a태그안에 블록요소가 들어가면 a태그는 자동으로 블록요소가 됩니다. 2. 배경색 교차로 색상을 바뀌게 만들어 주고 싶으면 홀수 행과 짝수 행을 각각 따로 선택하는 가상선택자를 사용하면 됩니다. tr 태그에 tr:nth-child(odd)와 tr..

position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다. position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다. position: relative ..

스페이스와 탭 줄바꿈 자동 줄바꿈 normal 병합(띄어 쓰기는 여러줄이든 한칸 사용) 병합 O nowrap 병합 병합 X pre 보존(입력된 그대로) 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O white-space: normal; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor. white-space: nowrap; Lorem ipsum dolor sit amet, consectetur adipis..

속성 설명 background-color 기본값은 transparent, 즉 투명이며 색상명이나 색상 코드를 사용할 수 있습니다. background-image 기본값은 none, 즉 없음이며 이미지의 위치를 상대 경로 또는 절대 경로를 사용하여 나타낼 수 있습니다. background-repeat 배경 이미지가 주어진 영역에 꽉 차지 않는 경우 이미지를 반복할 방식을 결정합니다. 기본값은 repeat인데 배경 이미지를 가로와 세로 모든 방향으로 반복을 해줍니다. repeat-x는 가로 방향으로만 repeat-y는 세로 방향으로만 배경 이미지를 반복합니다. no-repeat는 반복을 원하지 않을 때 사용합니다. background-position 배경 이미지가 주어진 영역에서 어디에 위치할지를 결정합니다..