반응형

html 13

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

Image 태그

Image - - src는 source 약자이고 이미지 링크를 넣습니다. - alt는 alternactive text의 약자이고 이미지가 보이지 않을 때 대신 보일 텍스트 입니다. (무조건 써줘야 합니다.) - 왜 써줘야 하냐면, 시각장애인분들이 웹을 이용할 때 screen을 읽어주는 시스템을 사용하는데 이때 이미지가 어떤 이미지인지 설명할 때 alt에 들어있는 텍스트를 읽어줍니다. ※ Image를 넣어주는 폴더의 이름은 image가 1개여도 images 라고 씁니다. 실습 파일: Image/img.html

HTML 2022.02.16

Heading & Paragraph 태그

1. 태그 안에 적힌 내용에 따라서 마크업이 달라진다. - 그 중 중요한 것이 attr=속성이라는 의미이다. - attr은 태그만으로 설명하기 어려울 때 부가적으로 설명할 수 있는 속성입니다. //러시아어라는 의미 Привет //나라마다 어떤 언어로 사용되는지 알고 싶다면 여기 방문하기 //https://www.w3schools.com/tags/ref_language_codes.asp 2. heading 태그 - - 이때 어떤 제목에 어떤 레벨의 헤딩태그를 사용해야되는지 고민이라면 신경쓰지 않아도 된다. - 주제목과 소제목이 무엇인지 구분하고 거기에 맞게 사용하면 된다. 2. paragraph 태그 - - 문단 태그이다. 실습 파일01: HTML-CSS/HTML/Heading&Paragraph/Groo..

HTML 2022.02.16

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

출처: 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
반응형