목록css (11)

블로그 이름을 입력해주세요

[CSS] mediaquery 반응형 레이아웃

웹사이트를 pc에서만 만드는 것은 아니다 요즘은 대부분 스마트폰, 태블릿pc와 같은 기기를 많이 사용하기에 html/css를 작성할때 호환성을 염두에 두고 만들어야 한다 그럴 때 사용하는것이 css mediaquery(미디어 쿼리) 반응형 레이아웃이다 일반적으로 만든 웹사이트 css 예를 들어 여기서 페이지 비율을 줄였다, 늘렸다 하게 되면 폰트 사이즈라던지 아이콘의 가로정렬 등 화면의 비율은 모바일인데 pc 비율을 계속 유지하다 보니 모양? 이 상당히 예쁘지 않다 그럴 때 미디어쿼리를 사용해 보자 코드 @media screen and (max-width: 1200px) { .main-title { font-size: 40px; } } 보통 css 제일 하단에 사용한다 그래야 말끔하게 작동할 수 있다 여..
CSS 2022. 1. 25. 00:27
[CSS] pseudo-class hover(호버), focus(포커스), active(액티브)

우리가 버튼을 만들어 봤다고 하자 그렇게 버튼을 만들고 CSS로 버튼을 디자인 하면 예쁜 버튼을 만들 수 있다 하지만 버튼을 클릭해도 클릭하는 별 효과가 없다는 것! 그럴 때 쓸 수 있는 것이 css의 hover, focus, active 알아보자 이렇게 예쁘게 만들어 놓은 버튼(button)이 있다 HTML 구매하기 CSS .btn { padding: 15px; font-size: 20px; border: none; border-radius: 10px; background-color: coral; color: white; cursor: pointer; } 이것을 마우스를 가져다 놓거나 클릭 했을 때 나올 수 있는 효과를 줘보자 hover : 커서를 가져다 놓을 때 active : 클릭 했을 때 focu..
CSS 2022. 1. 23. 01:58
[CSS] 배경(backgroundimage)에 검은색 틴트 주기

웹 사이트를 만들다 보면 화면의 전체가 이미지를 덮고 있고 그 안에 텍스트를 넣고 싶을 때가 많이 있다 하지만 그렇게 하면 배경의 이미지가 너무 쨍해? 텍스트가 잘 안 보일 경우가 있기 때문에 배경 이미지에 검은색 블라인드 처리를 하여 텍스트가 강조되게 할 수 있는 방법을 알아보자 블라인드(틴트)를 주기 전 텍스트가 배경 이미지의 밝음 때문에 잘 보이지 않는다. 코드 background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../background1.jpg); css에 linear-gradient를 줘보자! 블라인드(틴트) 후 이렇게 텍스트는 잘 보이고 뒤에 배경 이미지는 어두워 진 것을 확인 할 수 있다 끝 출처 - 코..
CSS 2022. 1. 23. 00:48
이전 Prev 1 2 Next 다음