반응형

CSS 11

em과 rem을 사용하면 좋은 점

요즘 반응형 웹을 만들면서 em과 rem을 배운 지식들을 포스팅해 볼 것입니다. 📌 em과 rem을 사용하는 이유 사용자가 임의로 브라우저의 폰트 크기를 변경했을 때, 그 설정에 맞게 웹의 폰트 크기도 변해야 합니다. 그러기 위해 사용하는 것이 em과 rem입니다. (px은 크기가 고정적이라서 저는 반응형 웹을 만들 때 사용하지 않고 있습니다.) (폰트 크기에만 사용하는 것이 아니라 크기를 변경할 때 다 사용 가능합니다.) 📌 em이란 부모의 폰트 크기에 영향을 받는 것이 em입니다. 예를 들어, 부모의 폰트 크기가 16px입니다. 이때 자식 폰트에 2em을 사용하면 16 * 2 = 32px이 됩니다. 가나다라1 가나다라2 가나다라3 📌 rem 이란 브라우저 폰트 크기에만 영향을 받는 것이 rem입니다...

CSS 2023.10.04

화면 크기에 따라 텍스트 변경하기

프로젝트를 하던 도중 데스크탑에선 잘 보이던 텍스트가 모바일 화면에선 줄바꿈이 되어 보기 불편해지는 현상이 발생한 경험이 있습니다. 이를 해결하기 위해 after를 활용한 예시를 보여드리겠습니다. 📌 ::after CSS에서 요소의 맨 마지막 자식으로 또 다른 하나의 요소를 만들어 줍니다. 요소에 장식용 콘텐츠를 추가할 때 자주 사용됩니다. 📌 코드 구현 /* CSS */ .store-vegetable-data > span::after {/* 모바일 화면일 때 적용됩니다. */ content: "채식"; font-size: 0.97em; padding: 1px 5px; border-radius: 12px; border: 1px solid var(--main-color); } @media screen an..

CSS 2023.08.30

React에 TypeScript 적용하기

API를 이용한 프로젝트를 하다보니 사용하는 데이터의 양이 늘어나면서 이들을 더 구체적으로 표현하면 좋은 코드가 될 것 같아 시작하게 되었습니다. 📌 React에 TypeScript 적용하기 React 프로젝트를 생성하기 전일 때 npx create-react-app 프로젝트명 --template typescript React 프로젝트를 생성한 후일 때 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 📌 결과 TypeScript를 적용하기 전인 React 프로젝트의 파일들입니다. 확장자명은 js, css로 이루어져 있는걸 확인할 수 있습니다. TypeScript를 적용한 후인 React 프로젝트의 파일입..

TypeScript 2023.08.30

채팅창 만들기 CSS

프로젝트에서 상대방과 대화하는 창을 만들어야 하는데 style 주기 너무 어려워서 고생하다가 해결해서 포스트 남깁니다! 📌 코드 진행 순서 1. input 태그에 원하는 메시지를 입력합니다. 2. 전송 버튼을 클릭하면 화면에 사용자가 입력한 메시지가 보이게 됩니다. (이때 '' 일 땐 보이지 않게 합니다.) 3. 이렇게 계속 진행됩니다. 📌CSS 코드 해석 1. myChat 클래스: 사용자가 입력한 메시지를 모두 감싸고 있고, 여기서 텍스트 오른쪽 정렬을 합니다. 2. chatBox 클래스: 사용자가 입력한 메시지와 보낸 시간을 감싸고 있고, 보낸 시간은 이 클래스를 기준으로 배치될 수 있도록 position: relative; 를 줍니다. 3. chatTime 클래스: 메시지를 보낸 시간을 감싸고 있고..

CSS 2023.01.01

Google font 기능 잘 활용하기

1. 원하는 font를 검색할 수 있습니다. 2. 생각나는 font가 없을 때 사용할 문장을 입력해서 어울리는 것을 찾을 수 있습니다. 3. font 크기를 조절할 수 있습니다. 1. 원하는 font를 찾으면 Select this style을 클릭합니다. 2. 자신이 클릭한 font가 무엇인지 보여줍니다. 3. CSS 파일에서 어떻게 사용할 것인지 와 @import 를 선택할 수 있습니다. - import를 많이 사용합니다. - 3번 밑에 있는 이 font를 사용할 때 어떤 font-family를 사용해야하는지 알려줍니다. ※ 이상으로 Google font 기능 잘 활용하기 였습니다!

WebDesign 2022.02.13

처음 웹 사이트를 만드는 사람들에게 추천하는 공부 방법

출처: Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 [특별부록] 1. 웹 디자인 기능사 자격시험의 실기 기출 문제를 풀자. - 처음 웹 사이트를 만들 때 웹 사이트를 모방해서 하는 것도 좋습니다. 하지만 초보자에게는 복잡하고 어렵습니다. - 아래 url에 들어가서 문제를 다운받으면서 감을 잡아 나갑니다. - http://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&gId=&artlSeq=5199079&brdId=Q006&code=1204 공개문제 자료실 상세 | Q-net BODY { FONT-SIZE: 10pt; FONT-FAMILY: Malgun Gothic; COLOR: #000000; MARGIN: 0px } P { MARGIN-BOTTOM..

WebDesign 2022.02.13
반응형