728x90 CSS46 [생활코딩] 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. [생활코딩] CSS 수업 정리 (10) 이미지를 자연스럽게 삽입. 또는 레이아웃을 잡을 때도 사용. float 활용 이미지를 오른쪽에 두고싶다면 float: right; 사용 p 태그에 border 값 적용 이미지에 floating 효과를 주면 이미지 뒤에 나타나는 엘리멘트들은 모두가 이미지를 피해가도록 되어있다. 피해가지 않도록 하려면 style="clear:both;" 적용 clear:both에 올 수 있는 속성의 값은 left도 있고 right 도 있다. (이미지의 float 속성에 따라 일치하게 적용) img의 float:left;이면 left 적용한다 CSS position float flex float Lorem ipsum dolor sit amet co.. 2023. 7. 18. [생활코딩] CSS 수업 정리 (9) 미디어쿼리: 반응형 디자인의 심장과 같은 역할을 함 @media : 미디어쿼리의 시작 화면크기가 500px이 됐을 때, body태그의 background-color을 붉은색으로 지정한다는 뜻. 더 크거나 작아지면 아무런 색깔 X max-width 의 사용 max = 최대 최대 500px일 때, 즉 최대 500px 이하일 때 미디어쿼리 실행. min-width를 사용하면 min = 최소 500px 이상일 때 배경색 설정됨 이유: 500px 이하 구간에서는 red 와 green 모두 영향을 주고 있는 상태 색 지정할 땐 우선순위 생각하기 601픽셀 이상의 색상 지정하기 나머지는 빨간색 모바일 화면 적용 show media queries 2023. 7. 17. 이전 1 2 3 4 5 6 7 8 다음 728x90
