728x90 반응형 생활코딩css17 [생활코딩] CSS 수업 정리 (17) 미니파이의 목표 : css 코드를 작게 압축해서 서버와 클라이언트 사이에 주고받는 데이터의 크기를 줄이는 것 코드 경량화(minify) - CSS (opentutorials.org) 코드 경량화(minify) - CSS CSS는 네트워크를 통해서 전송됩니다. 자연스럽게 CSS의 크기가 커지면 컨텐츠의 생산자와 소비자 모두에게 손해입니다. 코드의 크기를 줄이는 것을 통해서 이런 문제를 완화해주는 도구가 minify opentutorials.org 왼쪽에 있는 코드를 clean-css라고 하는 도구를 이용해서 minify 한 것 원래 original 소스는 1186 문자가 있었는데 minify 된 후에 793 문자로 축소 프로퍼티가 없기 때문에 있으나 마나한 코드가 돼서 무.. 2023. 7. 24. [생활코딩] 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. [생활코딩] 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 다음 728x90 반응형
