728x90 반응형 CSS41 [생활코딩] 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. [생활코딩] 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. [생활코딩] CSS 수업 정리 (8) 멀티 컬럼: 전통적인 레이아웃 기법 column-count=2; 화면이 두개로 분할 text-align: justify; 를 사용 column-count 대신에 column-width 사용 200px 정도 준다. 컬럼의 폭을 200px로 지정한 것 200px 라고 지정한 크기에 맞춰 단을 분할. 브라우저 크기를 조절하면 컬럼의 수를 조정하게 됨. 브라우저 크기를 줄이면 css 는 컬럼 하나 줄이는 걸 통해서, 200px 이상이면서 4개의 컬럼 이하인 상태를 유지하게된다. 만약, 컬럼의 폭을 중시하고 싶으면 count를 사용하지 않고 width만 사용하면 되고, column-count를 중요하게 처리하고 싶으면 width를 사용하지 않으면 됨. 컬럼의 빈 여백(간격) 처리 :.. 2023. 7. 17. [생활코딩] CSS 수업 정리 (7) holy grail layout header section(중간위치) footer section 내부 제일 상단 - nav nav 옆 - main 광고부분 - aside 수평으로 나란히 하려면, 우선 일단 flex를 사용하려면 container에다가 display:flex;를 사용해야 한다. 그럼 이렇게 수평으로 이동을 하게됨 이유: flex에 direction이 row로 디폴트 값으로 되어있기 떄문. column으로 바꿀 시, 헤더, 섹션, 푸터가 수직으로 바뀌게 된다. 아래쪽에만 border 적용 border-bottom: 1px solid 색상; 위쪽 border 적용 border-top: 1px solid gray; section에 있는 항목들.. 2023. 7. 17. 이전 1 2 3 4 5 다음 728x90 반응형
