블로그

eunyoe.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4%EB%B3%84-%ED%95%B4%EC%83%81%EB%8F%84-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B6%84%EA%B8%B0%EC%A0%90-%EB%A6%AC%EC%8A%A4%ED%8A%B8 [CSS] 반응형 웹 디바이스별 해상도 반응형 분기점 리스트 오늘은 반응형 웹 디자인을 제작하기 위한 미디어쿼리 해상도 분기점 리스트를 공유하려고 합니다. 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다. html 태그 eunyoe.tistory.com

See the Pen MWyBZBL by piouy1234 (@piouy1234) on CodePen.

See the Pen YzqjdEq by piouy1234 (@piouy1234) on CodePen.

1. nanati.me/css-button-design/#comment-200 css 버튼 디자인 모음 요즘에는 html, css, js등의 코드를 공개하여 모두가 함께 쓸 수 있도록 공유하는 사이트가 무척 많아졌습니다. 그 중에도 제가 자주 체크하는 사이트가 코드펜(codepen)이라는 사이트인데 오늘은 css nanati.me 2. GNB참고 ferrumpipe.com/ Ferrumpipe — Fences and security gates manufacture Assembly includes all hardware and accessories, including handles and locks for wickets, sliding gates, and fencing systems. ferrumpipe...

CSS 그라데이션: - 예전엔 배경이미지로 그라데이션을 만들었기에 여기서! (1) 방향지정 background-image:linear-gradient(방향,색1,색2,...) (2) 색상영역지정 background-image:linear-gradient(방향,색1 몇%,색2 몇%,...) (3) 각도지정 background-image:linear-gradient(각도,색1 몇%, 색2 몇%,...) - 방향: to top, to bottom, to right, to left - 각도:기울임각도 설정(단위:deg) www.w3schools.com/css/css3_gradients.asp CSS Gradients CSS Gradients Gradient Background CSS gradients let y..

반응형 웹이란? PC,TV,내비게이션,스마트 기기 등 기기마다 또는 환경마다 최적화된 웹사이트를 제공해주는 것을 말합니다. 뷰포트(Viewport) 화면에 보이는 영역을 제어하는 기술로, 미디어 쿼리로 수많은 기기의 화면 크기를 감지해야 할 때 꼭 필요합니다. 속성값 설명 width=device-width 페이지의 너비를 기기의 스크린 너비로 설정합니다. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 줍니다. initial-scale 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 합니다. 0~10 사이의 값을 가집니다. minimum-scale 줄일 수 있는 최소 크기를 지정합니다. 0~10 사이의 값을 가집니다. maximum-scale=1 늘릴 수 있는 최대 크기를 지정합..

홈페이지 코딩시 아이콘을 폰트로 넣을 수 있는 폰트어썸 https://fontawesome.com/ Font Awesome fontawesome.com 폰트어썸 홈페이지에서Start for Free버튼을 클릭하고 스크롤을 아래로 내려서다운로드를 클릭해준다! 폴더 이름을 font로 바꾼다 html 헤드에폴더 경로를 연결하고 위 메뉴에서icon텝을 클릭하고원하는 아이콘의 이름을 검색 진회색으로 활성화 된것만무료인듯하다 아이콘을 클릭하면해당 아이콘 이미지가 나오며위의 html소스를 복사해서붙여넣기 하면 끝!

배경 이미지를 여러 크기로 조절할 수 있다. 기본형) backgrund-size : auto; | contain | cover | | 속성 값 설명 auto 원래 배경 이미지 크기만큼 표시됩니다. contain 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소합니다. cover 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소합니다. 너비 값과 높이 값을 지정합니다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정합니다. 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대하거나 축소합니다. background-position 속성 - 배경 이미지 위치 조절하기 background-..