728x90 분류 전체보기530 [생활코딩] CSS 수업 정리 (16) 웹페이지 만들다 보면 여러 개의 웹페이지가 생기는데 여러 개의 웹페이지가 공통적으로 동일한 css를 갖게 되는 경우가 있는데 그걸 해결하기위한 방법 2개의 페이지와 (2개의 html) 1개의 동일 css 설정 page1 page2 h1 { color: red; } 링크의 중복 해결방법 link 사용 외의 다른 사용 방법 @import 2023. 7. 24. [생활코딩] CSS 수업 정리 (15) 전환 속성들의 값이 변경됐을 때 그 전환을 부드럽게 하는 기능 Click a { font-size: 3rem; } 사용자가 마우스를 클릭했을 때, 효과적용 하는 방법 = active 사용 display:inline-block 을 사용해야 transform transition이 적용된다 transform 이라고 하는 속성은 a 엘리먼트가 block level 엘리먼트 이거나, inline-block 인 경우에만 동작. inline 엘리먼트에서는 동작 X 부자연스러운 움직임 동작을 자연스럽게 하려면 = 전환 사용 a 태그에 대해서 모든 효과에 대해서 변화가 일어났을 때 전환이 일어난다 라는 의미 transition-duration:1s; 0.1s al.. 2023. 7. 24. [생활코딩] CSS 수업 정리 (14) 변형 엘리먼트의 크기(조절), 엘리먼트의 회전 또는 비틀기 h1이 화면 전체를 쓸 경우, 트랜스 폼 효과의 결과를 보기 어렵다. display:inline-block; 사용 transform 효과들 1 -> 2 transform:scaleX(2) 두 배 했다는 뜻 Hello Transform! h1 { background-color: aqua; /* 텍스트 사이즈 */ color: white; display: inline-block; padding: 5px; /* 폰트사이즈 3배 */ font-size: 3rem; margin: 100px; transform: scaleX(2); } 0.5 1/2 즉, 반으로 크기를 줄인 것 X 의미 : X축으로 변형 일어난 것 y 축 또한 .. 2023. 7. 23. [생활코딩] CSS 수업 정리 (13) blend 클래스 태그 생성 style 효과 background-image, background-color 생성 img 는 표시되는데 background color 가 표시 안되는 이유 : img가 위에 있는 것 같은 상태이기 때문 blend : 혼합하려는 대상 있어야 함 background img 하고 background color 를 혼합 혼합할 때 사용하는 것 : background-blend-mode background-size:cover; css 효과 적용 rgb의 젤 끝에는 투명도 지정 가능 r: red g: green b: blue 빨간색(255)는 빨간색인데 투명도 0.5 라는 의미 blend-hover 사용 transition.. 2023. 7. 23. [생활코딩] CSS 수업 정리 (12) 그래픽 대상에게 여러가지 효과를 줄 수 있는 기능 img 불러오기 img에 필터 주기 webkit : 크롬이나, 사파리에서 사용하는 벤더 프리픽스 ( 최신이라 지원하는 경우가 적을 때 사용하는 접두사 ) grayscale(100%) 적용 나머지 벤터 프리픽스도 적용 현시점 그냥 filter 만 써도 적용된다. 텍스트에 filter 적용 blur은 효과의 강도를 px 로 준다 hover 적용 (마우스 올라갈 때 이미지 변환) 필터 효과를 부드럽게 적용하는 방법 transition 모든 효과에 대해서 1초 동안 장면전환을 한다 라는 뜻 codepen 사이트 활용 2023. 7. 22. [생활코딩] CSS 수업 정리 (11) background-image 배경 이미지 배경이 잘 안보이는 이유 : div의 크기가 작기 때문 font-size 를 주면 div 크기가 늘어남 두 가지를 동시에 나오게 하기 위해선 투명 값을 가지고 있는 이미지를 사용 png height 로 크기 조정 이미지의 반복 없애기 background-repeat : no-repeat; x 축만 반복하기 background-repeat : repeat-x; x 축만 반복하기 background-repeat : repeat-y; 기본 값 텍스트의 양이 많아지면 background-image 는 scroll 이 된다. 이미지는 scroll 안되고 자기 위치를 고수하게 하는 방법 background-attachment:fixed div 태그와 text .. 2023. 7. 22. 이전 1 ··· 71 72 73 74 75 76 77 ··· 89 다음 728x90
