목록분류 전체보기 (433)
whatisthis?
1/ background-color 배경색을 넣음 hex | rgb | rgba 2/ background-image 배경으로 이미지를 넣음 - url() 함수를 사용해야함. - url(이미지 경로) or url(이미지 주소) .selector { background-image: url(./assets/image.png); } 3/ backgroud-repeat 배경 이미지 반복 여부 repeat | no-repeat 대부분은 no-repeat 으로 함. ( default 값은 repeat임) 4/ background-size 배경 사이즈 (크기) contain | cover | custom contain 포함됨 (요소 안에 모든 면이 다 들어가게) - 빈공간 생겨도 cover 빈공간 없이 꽉 차도록 (사..
Typography Library 제작 하나의 라이브러리를 제작. 💡 라이브러리(library)란? 일종의 kit. 자주 사용하는 코드(CSS의 경우엔 클래스) 를 한번 적어놓고 계속해서 사용할 수 있게 함. 1/ Noto Sans KR import 해오기 - fonts.google 이용 font-size와 그에 어울리는 line-height, letter-spacing을 같이 묶어서 정의하는 경우가 많음. 2/ font-size에 대한 라이브러리 제작 (typography.css) /* Font size */ .fs-tiny { font-size: 12px; line-height: 1.3333333; letter-spacing: -0.015em; } 위와 같이 font-size는 12px로 하고, li..
웹 폰트(Web Font) 적용 방법 1 / 가져다가 쓴다. - 구글 폰트 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 다양한 웹폰트들이 제공되고 있다. 그냥 하라는대로 head에 link 붙여넣고 css에 font-family 붙여넣으면 끝! 방법 2 / 사용자에게 직접 제공한다. 우선, github에서 폰트 파일을 전부 다운받는다. https://github.com/innks/NanumSquareRound GitHub - innks/NanumSquareRound: 나눔스퀘어라운드 웹폰트입니다. NanumSquareRound webfont. 나눔스퀘어라운드 웹폰트입니다..
CSS - Typography Typography 설정 타이포그래피 - 활자의 서체나 글자 배치 등의 구성 및 표현. = 텍스트를 예쁘게 디자인. 정보(information)의 가독성을 위해서. 📌 font-size = 글자 크기 px 절대 단위 em 상대 단위 실제로 mywebproject.tistory.com 자주 사용하는 속성들 🔺 덜 사용하는 속성들🔻 📌 text-align left | right | center = 왼쪽 정렬 / 오른쪽 정렬 / 가운데 정렬 📌 text-indent 들여 쓰기 (문단 시작시) 예> text-indent: 100px; ** 음수(마이너스)값도 사용 가능 (왼쪽으로 밀려남) 📌 text-transform 알파벳 베이스의 문자들만. none Default. Yeon j..
Typography 설정 타이포그래피 - 활자의 서체나 글자 배치 등의 구성 및 표현. = 텍스트를 예쁘게 디자인. 정보(information)의 가독성을 위해서. 📌 font-size = 글자 크기 px 절대 단위 em 상대 단위 실제로 적용된 폰트 사이즈 (부모의 font-size) 의 N배 rem html 태그 기준 N배 보통은 px을 많이 사용함. 📌 line-height = 줄 간격 마찬가지로 px, em, rem 단위 사용. 여기서는 em을 많이 사용함. (해당 폰트사이즈의 N배만큼) (그냥 1.5라고 적는것이 관례. 1.5em 이라고 쓰지 X) line-height가 얼마가 되든간에 font-size에 해당하는 부분은 정 중앙에 위치하게 된다! 📌 letter-spacing = 자간 간격 p..
미디어쿼리 (Media Query) prac - 모바일 버전(가장 작은 화면) 먼저 하는것이 정설이다! - 모바일 먼저 구상하고, 점점 크기를 키워나감 🔺 이런식으로 모바일 기준으로 먼저 해야한다. (그중에서도 너비 가장 작은 애로 골라서) index.html 🚗 모집 임박! 8월 게스트 신청하기 Eat, pray, work 김버그의 디지털노마드 민박 #치앙마이 #8월예약오픈 민박 둘러보기 style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.01em; height: 3000px; } a { text-decoration: none; } .landin..
미디어쿼리 (Media Query) - 반응형 웹(Responsive Web) 을 만들기 위해 반드시 알아야함. 🔻 반응형 웹을 위한 충족조건 HTML viewport meta CSS media query ▪ [HTML] viewport meta 모바일에서와 pc에서의 viewport가 다르다. meta태그로 width=device-width (너비를 디바이스 너비로 설정함) 을 선언해야 반응형 웹이 정상적으로 작동 가능. ▪ [CSS] media query @media screen and (min-width: 768px) { /* 변경사항 * / } atRule을 사용해야함. (at media) 최소 가로가 768px 일때 /* 변경사항 */ 이 적용되게 해줌. >> 즉, 768 이상일때 적용됨. ❗ ..
Figma Created with Figma www.figma.com index.html Noah Madsen Copenhagen, Denmark Friends 730 Projects 3 Reviews 243 style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Muli", sans-serif; color: #273444; } .profile-name { font-size: 18px; font-weight: 600; line-height: 1.3333333333; } .profile-location { font-size: 14px; line-height: 1.4285714286; color: #8492a6; } .profile-d..
https://mywebproject.tistory.com/228(private) 지난번에 float 예제로 제작해본 것을 flex-box로 만들어보자! 🔻 style.css (float 사용시) * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.02em; } h1 { font-size: 16px; font-weight: 400; color: #1f2d3d; line-height: 1.25; } strong { font-size: 14px; font-weight: 400; color: #afb3b9; line-height: 1.4285714286; } p { di..
https://mywebproject.tistory.com/228(private) 지난번에 float 예제로 제작해본 것을 flex-box로 만들어보자! float 이용시 🔻 * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; letter-spacing: -0.02em; } a { font-size: 18px; line-height: 20px; color: #8492A6; text-decoration: none; } ul { list-style-type: none; padding-left: 0; } .tab-menu::after { content: ''; display: block; clear: left; } .tab-menu ..