728x90 HTML&CSS48 [CSS] CSS 사용자 지정 변수 사용하기 CSS 변수 ? CSS에 변수를 만들고 사용할 수 있다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있다. 기존의 CSS 일반 속성과 눈에 뛰는 차이점이라면 CSS 사용자 속성은 이름이 --로 시작해야 한다는 것이다. 사용자 지정 변수는 두 개의 붙임표(--)로 시작하는 속성의 이름과 함께, 유효한 CSS 값이라면 아무거나 그 값으로 지정해 선언한다. 주의할 점은 변수는 대소문자를 구별하기 때문에 main-bg-color와 main-Bg-color를 다르게 인식한다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의한다. 변수 사용 property: v.. 2023. 5. 17. [CSS] 반응형 웹 미디어쿼리 사용하기 반응형 웹이란? 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 반응형 장점 ? 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술? 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)가 있다. 미디어.. 2023. 5. 15. [CSS] background에 fade color 배경에 페이드컬러 넣기 카드에 배경화면을 넣고 linear-gradient를 넣어 페이드 효과를 주는 방법이다. background shortcut을 사용하여 1. 그라디언트 2. 이미지 url 순서로 넣어서 효과를 완성할 수 있다. 페이드인? 페이드아웃? 장면이 시작될 때 검은색이나 흰색에서 서서히 본 영상이 나타나게 하는 기법을 페이드 인이라고 하며, 장면이 끝날 때 검은색이나 흰색으로 서서히 바뀌는 것을 페이드 아웃이라고 한다. 방향 .card-fade-bg-right { background: linear-gradient(to right, #000F, #0000), url('image url'); } .card-fade-bg-left { background: linear-gradient(to left, #000F, #00.. 2023. 5. 14. [CSS] 스크롤 스냅 - 자바스크립트 없이 css로 풀페이지 만들기 Scroll Snap 스크롤 스냅 (Scroll Snap) ? 위의 애니메이션처럼 스크롤 하면 틀에 맞게 스크롤 되는 것을 스크롤 스냅 (Scroll Snap) 이라고 한다. 이 스크롤 스냅도 자바스크립트 없이 오직 CSS로 만들 수 있다. .scroll-box.horizon { flex-direction: row; overflow: auto hidden; scroll-snap-type: x mandatory; } .scroll-box.vertical { flex-direction: column; overflow: hidden auto; scroll-snap-type: y mandatory; } .item { scroll-snap-align: start; min-width: 100%; } .scroll-box가 부모 elem.. 2023. 5. 13. [CSS] 크기 단위 px, em, rem px em rem 단위 ? CSS에서는 요소의 크기를 지정할 때, px, em, rem 단위를 주로 사용한다. 절대적 단위 px (픽셀) px 단위는 주변에 어떠한 상관관계 없이 지정한 값만큼 크기가 고정되어 표시된다. 어떠한 기기에서든 같은 크기로 보이는 단위이므로 고정된 크기의 값을 표현할 때 사용하면 적합한 단위이다. 모바일 기기에서 보든 영화 스크린에서 보든 똑같은 크기로 보인다. 상대적 단위 em, rem 상대적 단위인 em, rem은 기준으로 하는 대상이 다르다. em은 자신이 속한 부모 요소의 폰트 사이즈를 기준으로 자신의 크기가 결정된다. em 단위 - 부모 요소의 폰트 크기 : 16px - 자식 요소의 폰트 크기를 2em - 자식 요소 폰트 사이즈를 px로 계산하면 32px em 단위는 .. 2023. 5. 12. [HTML] 시멘틱 마크업이란? Semantic Markup 시멘틱 마크업이란 Semantic Markup ? 시맨틱(Semantic)은 "의미론적인"이란 뜻을 가진 단어이며, 문서의 의미에 맞게 구성된 웹을 뜻한다. 시맨틱 웹으로 작성하는 이유 검색 엔진 최적화(SEO) 웹 브라우저에 검색을 하게 되면 검색색엔진을 통해 정보를 제공하는데 이때, 로봇이 프로그램을 이용해 검색엔진의 크롤러가 웹 사이트 정보를 수집하는데 이 행위를 크롤링이라고 한다. 웹 접근성 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 하는 것 코드 가독성 단순히 div 태그를 주로 사용한다면, 구조적으로 파악하기 어려움으로 코드 가독성이 좋아진다. 시멘틱 마크업 관련 태그 태그는 소개 및 탐색에 도움을 주는 영역으로 제목, 로고, 검색 폼, 작성자 이름 등의 요소.. 2023. 5. 11. [CSS] Bootstrap 부트스트랩 기본 개념 정리 Bootstrap ? 부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 라이브러리이다. 부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있다. DOM, CSS의 상속관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해 필요. react, vue 와 같은 프론트엔드 프레임워크에서 기본 Bootstrap 을 사용하는 방법도 있지만 jQuery 사용에 따른 문제점이나 기타 프레임워크 구조를 일관되게 적용하기 위해 해당 프레임워크용으로 별도 제작된 Bootstrap 플러그인을 사용하기도 한다. react-bootstrap, bootstrap-vue 등이 이에 해당한다 시작하기 1. Bootstrap CDN 외부 스타일시트를 사이에 추가 하면 바로 부트스트랩을 사용할 수 있다. 2... 2023. 5. 6. [CSS] 버튼 오버 효과주기 (마우스호버mousehover) HTML hover me hover me hover me hover me hover me CSS * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; color: rgb(85,75,85); background-color: rgb(255,255,255); } :active, :hover, :focus { outline: 0!important; outline-offset: 0; } ::before, ::after { position: absolute; content: ""; } .btn-holder { display: flex; flex-wrap: wrap; justify-content: ce.. 2023. 4. 28. 이전 1 2 3 4 5 다음 728x90
