728x90 반응형 CSS/생활코딩10 [CSS] transform/transition transform transform은 엘리먼트의 크기,위치,모양을 변경하는 속성 scaleX(2) scaleY(2)를 하면 가로로 2배 세로로 2배 하는 효과를 줄 수 있다. rotate(45deg)를 하면 45도 회전한다. transform-origin transform-origin을 사용하면 h1에 마우스를 갖다댔을 때 오른쪽 bottom을 기준으로 1.5배 늘어난다. transform-origin은 백분율을 이용해 값을 나타내는 방법도 있는데 관련 링크를 아래에 걸어두겠다. https://www.tabmode.com/homepage/transform-origin.html 초보자를 위한 Windows(윈도우즈), HTML과CSS를 사용한 홈페이지 작성과 엑셀(EXCEL),메일(outlook mail).. 2022. 3. 31. [CSS기초] 그래픽 (+ 반응형 웹 단위 ) 반응형 웹 관련 https://nykim.work/85 반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성 프롤로그 지난 글에는 반응형을 위해 필요한 뷰포트 메타태그와 미디어 쿼리에 대해 다뤘었는데, 이번에는 CSS 속성을 통해 좀 더 편하고 쉽게 반응형을 만드는 방법을 알아보려고 합니다 🤟 히 nykim.work 레이아웃 크기 지정할 때 반응형으로 만들고 싶었는데 px, %,rem 등 단위가 너무 다양해서 글을 찾아보다가 좋은 글을 발견해서 링크를 걸어둔다. 아무튼 오늘 해야할거는 바로 그래픽이다! background color 투명배경이미지와 배경색깔을 같이 하고 싶을 때가 있다. 그럴때는 background 이미지를 url로 받아오면 된다. 어피치 이미지를 반복.. 2022. 3. 31. [CSS기초] 미디어 쿼리 ,float ,다단 미디어 쿼리 화면의 종류와 크기에 따라서 디자인을 달리 줄수 있는 CSS의 기능이다. 500px 이하일때 배경을 red 501~600px 일때 배경을 green 601px~ 일때 배경을 blue로 줘보자. 하지만 이럴경우 red와 green은 범위가 겹치게 되면서(0부터 500까지) red의 효과가 나오지 않는다. 이유는 캐스캐이딩에 의해 더 늦게 나온 코드가 효과를 얻고 앞에 나온 코드는 묻히게 되기 때문이다. 만약 500px 미만은 글이 세로로 정렬되게 하고 500px 이상부터는 글이 가로로 정렬 되게 하려면 미디어쿼리를 이용해 어떻게 조정해줘야 할까? max-width:500까지는 세로로 나오게 하고 그 이상부터는 flex의 기본값이 가로로 나오게 한다. float 글의 본문에서 이미지 삽입할 때 .. 2022. 3. 29. [CSS기초] flex flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있다. 의 꼴로 이루어져 있다. container에 들어갈 수 있는 것 item에 들어갈 수 있는 것 display order --> 콘텐츠가 나오는 순서를 정해줌 / 아이템들의 순서 바꿀 때 flex-direction flex-grow flex-wrap --> 아이템들이 화면의 크기 이상일 때 줄바꿈 flex-shrink flex-flow flex-basis justify-content --> 수평과 관련된 정렬 flex align-items --> 수직과 관련된 정렬 align-self align-content 우선 flex를 쓰려면 부모 앨리먼트 안에 자식 앨리먼트가 있어야 한다. div 같은 블럭 앨리먼트들을 자유롭게 배치하고 싶을 때 fl.. 2022. 3. 29. 이전 1 2 3 다음 728x90 반응형
