728x90 반응형 CSS41 [CSS] 폰트 적용하기 (구글 폰트) 폰트 적용하기 (구글폰트) Browse Fonts - Google Fonts Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 해당 사이트 이용 사용할 폰트 검색 Get font 눌러주기 Get embeded code 눌러주기 @import 를 눌러주기 CSS 맨 위에 복사붙여주기 해주면 된다. 이렇게 CSS 맨 상단에 넣어줌. 그리고 적용하고 싶은 부분 font-family 찾아서 CSS 에 넣어주기 아이디 mclive 에 적용 font-weight 를 SemibBold로 적용하기 위해 600 으로 수정. 2024. 3. 27. [CSS] 자꾸 까먹는 가운데 중앙 정렬 텍스트 중앙정렬하기 맥도날드 라이브라는 글자를 중앙으로 오게하고싶음. HTML "MacDonald’s Live" style 태그를 추가해서 CSS 적용 text-align: center 이미지 중앙정렬 display:block; margin:auto; 2024. 3. 27. [JS / CSS] 햄버거 언더 메뉴바 만들기 (2) CSS 완성 후 할일 ☆ CSS 작성완료 후 숨겨놨다가 - 숨겨둔 모달을 보여주는 클래스 하나 생성 - 또는 버튼 클릭하면 숨겨둔 모달 보이게 하기. ☆ JS 를 통해서 햄버거모양을 누르면 보이게 해야함. 1) CSS 로 언더바메뉴 숨겨놓기 .under-menu { background-color: #fccf4b; display: none; } 2) 숨겨둔 모달 보여주는 클래스 생성 .show-under { display: block; } 3) 클래스를 떼었다 붙이는 토글 기능을 사용해서 자바스크립트로 작성. document.getElementById("menu-icon").addEventListener("click", function () { document .getElementsByClassName(.. 2024. 3. 26. [HTML / CSS] 햄버거 언더 메뉴바 만들기 (1) 언더 메뉴바 디자인 햄버거 버튼 누르면 아래로 내려오는 메뉴바 만들기. 돋보기하고 햄버거 클릭돼야 함. 기존 메뉴바 HTML 변경 대충 짜놨던 html 코드를 바꿔주기. ( 클릭 되게 ) MENU STORE WHAT'S NEW STORY 아이디 추가해줌. .search-icon .menu-icon 기존 메뉴바 CSS /* 써치하고 메뉴 아이콘 포인터 부여. */ .search-icon, .menu-icon { cursor: pointer; } 그리고 CSS 추가. - 눌러지는 듯한 손가락 효과. /*--- 우측 메뉴바 navbar 꾸미기 */ .navbar li { /* 옆으로 나열 */ display: inline-block; /* 가로 배열을 위해 inline 사용 */ margin-right: 33.. 2024. 3. 26. [JS / CSS] 캐러셀 만들기 (숫자 버튼) 캐러셀 만들기 - 버튼 클릭으로 이동 HTML 1 2 3 CSS /* 6) 캐러셀 만들기 이미지 사이즈 일정하게 만들기 */ .slide-box img { width: 100%; height: 300px; } .slide-box { width: 100vw; float: left; } .slide-container { width: 300vw; transition: all 1s; } .slide-box img { width: 100%; } 이미지 사이즈 일정하게 만들기 이미지 브라우저에 꽉 차게 만듦 .slide-box { width: 100vw; float: left; } .slide-container 너비를 300vw로 설정함으로써, 이 컨테이너는 뷰포트의 세 배 너비를 가지게 됩니다. 이는 세 개의 슬.. 2024. 3. 24. [CSS] display:none 대신 사용하는 visiblity CSS display=none; => 대상을 숨길 때 사용 => opacity: 0; 도 사용 가능 visibility : hidden 을 써야 애니메이션이 잘 먹는다. .black-bg { visibility : hidden; opacity : 0; } .show-modal { visibility : visible; opacity : 1; } opacity: 0; 의 반대는 opacity: 1; 을 사용 visilbility: hidden 반대로는 visible 을 사용해주면 된다. transition : all 1s; = 1초에 걸쳐서 천천히 변하게 해달라는 의미 2024. 3. 21. CSS 메모 보호되어 있는 글 입니다. 2024. 1. 12. [생활코딩] 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. 이전 1 2 3 4 5 다음 728x90 반응형
