본문 바로가기

분류 전체보기89

HTML/CSS] em, rem, %는 어떻게 다른가요? CSS에는 절대적인 크기를 결정하는 px, pt, 등과 상대적인 크기를 조절하는 em, rem, %가 있습니다. 이 중에서 상대적인 크기를 조절하는 단위인 em, rem, %를 비교해서 살펴보겠습니다. 이 단위들은 font의 크기를 결정할 때 뿐만이 아니라 margin, padding 등 다양한 속성에 쓰이니 알아두면 좋습니다. 아래 예제에서는 font-size와 padding을 이용해서 em, rem, %를 비교해 보겠습니다. 안녕하세요 내 이름은 '지금'이야. html { font-size: 20px; } .test2 { font-size: 30px; padding-bottom: 30px; background-color: pink; } 1. rem rem은 root요소인 의 font-size를 기준으.. 2021. 6. 3.
HTML/CSS] 크롬 개발자 도구로 네이버 디자인 바꾸기 내가 원하는대로 웹페이지를 구현하였습니다. 그런데 만들고 나니 마음에 안드는 부분이 있네요. 폰트 색깔만 조금만 바꾸고 싶습니다. 그런데 매번 VScose를 켜서 이색 ~ 저색~바꾸고 실행시키기가 여간 귀찮네요. 화면에서 바로바로 바꾸면서 잘어울리는 색깔을 볼 순 없을까요? 당연히 있습니다! '크롬 개발자 도구' 를 이용하면 쌉가능입니다. '개발자도구'란 크롬에서 지원하는 툴로 HTML 구조나 CSS스타일을 변경할 수도 있고, JavaScript 디버깅, HTML통신상태 체크, 성능진단 등 다양한 기능을 쓸 수 있습니다. 우리는 이중에서 개발자도구를 통해 CSS스타일 아주 손쉽게 바꿔보겠습니다. 그럼 한번 해볼까요? 1. 크롬에서 '개발자 도구'를 켜려면 마우스를 우클릭을 해서 '검사'를 눌러주세요. 또.. 2021. 6. 2.
HTML/CSS] 구글 폰트 설정 웹 페이지만 구현하다 보면 예쁜 폰트를 사용하고 싶을 때가 있습니다. 힙하고 예쁜 무료 폰트를 쓰고 싶을 땐 어떻게 해야할까요? 이럴때는 구글에서 무료로 제공 되는 Google Font를 사용하면 됩니다. 한글도 예쁜 폰트가 많아요! 사용법도 아주 간단합니다. 1. 구글 폰트 사이트로 들어가주세요! https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 첫 페이지에 들어가면 다양한 폰트들을 볼 수 있습니다. 우리는 여기서 한글 폰트만 선택해서 적용해 볼 꺼예요. 2. laguage에서 'Korean' 클릭 3. 원하는 한글 폰트 클릭!.. 2021. 6. 1.
HTML/CSS] 폰트 설정 폰트를 설정하는 방법을 알아보도록 하겠습니다. CSS 폰트에는 크게 family-font와 generic-font가 있습니다. 이 두가지를 잘 활용하면 누구나 폰트를 쉽게 사용할 수 있습니다. 1. family-font와 generic-font 1) family-font: 우리가 일반적으로 알고 있는 특정 글꼴 ex) Georgia, arial, 나눔고딕, 궁서, 굴림, Times New Roman, Times, 등 2) generic-font: 비슷한 모양의 글꼴 집합 family-name으로 지정된 글꼴을 사용할 수 없는 경우 브라우저가 비슷한 스타일로 대체 할 수있도록 선언해주는 폰트입니다. ex) serif, sans-serif, monospace, cursive, fantasy - serif :.. 2021. 5. 31.

티스토리툴바