본문 바로가기

분류 전체보기83

CSS font-size, 텍스트 크기 조절을 위한 속성 FONT-SIZE 속성이란? font-family와 함께 다니는 속성인 필수 도구입니다. 웹페이지의 텍스트 크기를 조절하는 중요한 역할을 합니다. 결국 컨텐츠를 잘 보여주기 위해서는 폰트 컬러, 글꼴 유형 뿐만 아니라 크기도 잘 정의해야 해요. 웹페이지의 가독성과 사용자 경험에 큰 영향을 미치기 때문입니다. 사용법 h1 { font-size: 32px; } p { font-size: 16px; } h1 요소와 p 요소의 텍스트 크기를 정한 예시입니다 font-size 속성 뒤에 픽셀을 입력합니다. 예시에서는 픽셀을 입력했지만 다른 방식으로도 가능합니다. px : 기본적인 값 픽셀입니다. 우리가 흔히 알고 있는 폰트 크기와 같습니다. 12폰트는 12px 폰트인거죠. %(백분율) : 아래의 em과 비슷할수도.. 2023. 6. 22.
HTML article 태그, 웹 페이지 구성과 시멘틱 마크업 용도 ARTICLE 태그란? 웹페이지를 만드는 건 결국 다른 사람에게 정보를 공유하기 위함이고, 이를 위해 검색엔진이 좋아하는 구조로 구성해야 합니다. article은 section, fieldset 등과 같이 컨텐츠의 구획을 정하는 태그입니다. 사용법 article은 열고 닫는 태그입니다. article은 기본적은 class, id 외에는 별다른 속성은 없습니다. 과 의 차이 언제 section 태그를 쓰고 언제 article 태그를 쓰는지 궁금하더라구요. 그래서 검색을 해보았습니다. article은 블로그, 글, 뉴스, 기사 등 게시물과 관련된 컨텐츠 블록을 감쌀 때 쓰고 section은 긴 문서를 영역별로 나눌 때 사용하는 태그입니다. 웹페이지에 단락이 세 개 있으면 section을 세 번 써서 나누는 .. 2023. 6. 21.
HTML meta viewport 반응형 웹페이지를 위한 필수 속성 지난번에 meta 태그에 대해 포스트를 작성한 적이 있었는데요. 공부를 하다보니 name="viewport'가 계속 나옵니다. 지난번 학습하면서는 몰랐던 내용이라 추가로 배운 내용을 정리해보려구요. meta name="viewport"란? 반응형 웹 디자인에서 사용되는 속성입니다. 유저들의 브라우저 창 크기가 다르고, 모바일 기기에서도 접속할 수 있기 때문에 다양한 화면 크기에 맞게 웹페이지를 조정하기 위한 목적입니다. 예시 가장 많이 쓰는 문장인 것 같아요. freecodecamp 연습할 때 항상 넣었던 것 같습니다. name 속성에 viewport를 입력합니다 content 속성에 세부사항을 넣는데요 width=device-width : 유저가 보는 창의 화면 너비에 맞게 웹 페이지를 조정하라는 뜻입.. 2023. 6. 20.
40대 코린이의 코딩 배우기 3주차 이야기 (23.06.12~23.06.18) 코딩 배우기 3주차 이야기 처음 열정이 사그라든건 아니지만 코딩 공부시간을 많이 확보하지 못하고 있어요. 요즘 다시 공부해보는 중학과정 수학도 영향을 주고 있습니다. 왜 일차방정식 문제를 푸는 게 이렇게 재미있는거죠? 열심히 공부하다보면 3시간은 훌쩍 넘어가버려요. 30년전에 열심히 했어야 했는데 말이죠. 지난주 Responsive Web Design 파트에서는 강좌 1개를 완료했습니다. Learn Accessibility by Building a Quiz 이 챕터에서는 CSS를 다양하게 사용해봤습니다. HTML보다 CSS가 더 어려운 것 같아요. 3주차에 실천한 내용 FreeCodeCamp 강의 1개 수강 HTML 태그, CSS 속성 공부한 내용 5개 포스트 발행 중학수학 1-상 일차방정식 공부 중 2023. 6. 18.

티스토리툴바