728x90 반응형 CSS8 [CSS] background 배경 이미지 관련 속성들 모음 - 배경이미지 넣기 background-image: url(' ') - 배경 이미지 크기 조정 background-size: 150px background-size: (가로)px (세로)px background-size: contain /* 요소의 크기보다 작거나 같게 */ background-size: cover /* 요소의 크기보다 크거나 같게 */ - 배경 이미지 위치 조정 background-position: (left/center/right) (top/center/bottom) px, %, cm 등 수치로도 입력 가능 - 배경 이미지 반복 제거 background-repeat: no-repeat 2021. 7. 22. [ CSS ] transition 애니메이션 효과 #m{ width:100px; height:100px; background:red; position: relative; transition:height 5s; } #m:hover{ height:300px; background:blue; } * 가로(width)와 세로(height) 중 한쪽방향으로만 transition 적용 가능. [ 참고 ] https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_speed https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 2020. 4. 5. [ CSS ] @keyframes 애니메이션 효과 #m{ width:100px; height:100px; background:blue; position: relative; animation: example1 5s infinite; } @keyframes example1{ from {top:0px;} 50%{left:100px;top:100px;} to{top:300px;left:300px;} } [ 참고 ] https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes_important https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes 2020. 4. 5. [CSS] display: inline-block; display: inline; display: block; display: inline-block; inline은 기본적으로 한 줄에 배치되는 것이고, block은 그와 다르게 매번 줄바꿈을 거쳐 배치되는 것입니다. 이 두 가지를 합친 display: inline-block;은 한글에서 도형을 '글자처럼 취급'한 것과 비슷한 효과처럼 보이는데요, 블럭의 형태는 유지한 채, 글자들과 함께 한줄에 존재하게 됩니다. https://www.w3schools.com/css/css_inline-block.asp 2019. 11. 27. [CSS] CSS 단위(unit) : vw CSS units(단위들)의 종류로는 유명한 px, cm, %, em, vh 이런 단위들이 있습니다. 오늘은 이러한 CSS 단위들 중 하나인 vw에 대해 소개하겠습니다. vw는 뷰포트* 너비의 퍼센트 만큼의 크기로 글자를 지정해 주는 것인데요, 이와 비슷하게 vh는 뷰포트의 높이의 퍼센트 만큼의 크기로 글자크기를 지정해줍니다. 세상에는 휴대폰 기종부터 태블릿, 패드, 노트북에 이르기까지 다양한 크기의 컴퓨터가 존재합니다. 그런 컴퓨터 위에서 동작하는 웹이 모든 기종에서 적당하고 조화로운 글자와 이미지의 크기롤 보여지기 위해서는 뷰포트의 값에 따라 유연하게 크기가 변경되는 단위를 사용하는 것이 좋을 것입니다. *뷰포트 : 사용자에게 보이는 브라우저 크기 https://www.w3schools.com/css.. 2019. 11. 27. [CSS] 글자 간격 조정 글자 간격 조정을 위한 CSS 프로퍼티 몇 가지를 소개해 보겠습니다. letter-spacing, line-height라는 프로퍼티들인데요. letter-spacing은 자간, line-height는 행간을 조정한다고 보시면 되겠습니다. letter-spacing의 속성값으로는 기본 normal, initial부터 부모로부터 상속되는 inherit까지, 그리고 양수부터 음수까지의 값들이 올 수 있습니다. line-height의 속성값도 위와 비슷한 유형의 값들이 오긴 하지만, 다양한 단위가 올 수 있다는 조금 다른 점이 있습니다. 예시로, line-height: normal; //디폴트값 line-height: initial; //초기값(디폴트값) line-height: inherit; //부모요소로부터.. 2019. 11. 27. 이전 1 2 다음 728x90 반응형