# font-size
글꼴 크기를 어떻게 정해야하나?
나는 디자이너는 아니지만, 내가 만드는 프로젝트가 상품성이 있어보이게 만들고 싶은 욕심이 있다. 그래서 현재 진행하는 프로젝트의 폰트크기를 정하는데 고민이 많았다. 내가 폰트크기를 정하면 이상하게 이상해 보이기 때문이다. 그래서 이것에 대해서 검색하다가 좋은 사이트가 있어서 참고해서 공유해보려고 한다. https://www.editorx.com/shaping-design/article/font-size 위의 주소는 내가 참고한 블로그 사이트이다. 글꼴이 원래보다 커보이거나 작아보이는 이유 위의 사이트에서는 글꼴의 어센더와 디센더가 font마다 다르기 때문에 해당 문제가 생기는 것이라고 한다. 어센더와 디센더 어센더와 디센더가 무엇일까?🧐 위의 그림에서 빨간선을 BaseLine이라고 한다.
[CSS] 1. 문법학습 & 속성의 종류(1)
1. 기본 문법 및 사용 방법 1) CSS 기본 문법 선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보 {중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등) 속성값 : 어떻게 정의하고 싶은지에 대한 정보 2) 주석 3) HTML에 CSS를 더하려면 인라인 스타일 : 태그에 직접 기술하기 따로 선택자 필요없음 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋음 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기 HTML문서에 `` 태그를 추가하여 그 안에 CSS코드를 작성할 수 있음 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기 확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, H
23.6.2 TIL
em은 부모 요소의 폰트 크기를 상속받아 계산된다. 따라서 중첩된 요소의 폰트 크기에 영향을 받는다. rem은 최상위 요소( <html> 또는 <body> )의 폰트 크기를 기준으로 계산되기 때문에 상속에 영향을 받지 않는다. >🤔 글씨 겹침 현상은 왜 생기는 걸까? ✅간혹 글자크기보다 line-height값을 작게 줘서 문제 발생한다. line-height 단위를 rem으로 했을때 현재 태그의 폰트 사이즈가 상속 받은 폰트 사이즈보다 클 경우 글자가 겹
반응형 웹사이트 - 상대적인 폰트 크기 단위 em, rem
폰트 크기 단위 대표적으로 많이 쓰는 px(픽셀)단위는 절대적인 단위로, 어떤 환경에서든 같은 크기로 나타낸다. 그에 반해 이 em과 rem은 각각의 기준이 있고 그 기준에 따라 폰트의 크기가 바뀐다. em px와 사용방법은 같으며 위에서 말했던 기준이란 부모 요소를 기준으로 한다. 부모 요소의 크기(px)를 기준으로 1em은 부모요소의 크기와 똑같고 배수 형태로 사용된다. ex) 2em = (부모 요소의 px값 x 2) rem em과 마찬가지로 사용방법은 px과 같으며, rem의 기준은 부모요소가 아닌 가장 상위의 요소, 즉 html의 font-size를 기준으로 변한다. ex) 0.5rem = (html의 px값 x 1/2) > 참고로 font-size는 16px이 기본값이다. font-size: 16px; = font-size: 1em; = font-size: 1rem; = font-size: 100%; 실습 html css
[9] 03/24 자바스크립트 수업 (2)
폰트를 바꿔보자 color 색변경 font-size: 20pt 글씨 크기 font-weight: 400 글씨 두께 ( 폰트별로 다름 ) line-height: 80px 줄간격 font-style: italic 글씨 스타일 ( italic은 기울여줌 ) text-shadow: 5px 5px 2px 그림자 ( 가로px 세로px 선명도px ) letter-spacing: 10px 글씨 간격 list-style-type: none 리스트 스타일 ( none은 리스트앞 점을 빼줌 ) text-decoration 주로 a태그의 밑줄을 없애는 용도로 씀
px, em, rem 어떤 것을 사용할까?
절대 길이 단위 px px 컴퓨터로 사진이나 그림을 볼 때 기본이 되는 단위입니다. 1px은 화소 1개의 크기를 말합니다. 따라서, 웹 브라우저에서 글꼴 크기를 바꿔도 크기가 그대로 유지 됩니다. > ※ 화소란? "화소"란 화상을 구성하는 최소 단위로 "점(點)"이란 뜻 상대 길이 단위 em, rem em em이 상대 길이인 이유는 부모 font-size에 따라 자식 font-size가 바뀌기 때문입니다. 예를 들어, 부모의 font-size를 8em으로 설정하고 자식의 font-size를 0.5em으로 설정 할 경우 부모의 font-size는 아래와 같고, $$ 부모\;font\;size = 8em = 8 * 16 px = 128px $$ > ※ 16px을 곱해주는 이유는 root(부모)의 기본 font-size가 16px이기 때문입니다. 만약, root의 font-size를 8px로 바꿀 경우 8이 곱해지게 됩니다. 자
CSS font 아는듯 모르는듯 한번더 이해를 튼튼!
CSS font-size 프로퍼티 font-size 문자크기 설정 주요값 medium:웹브라우저 에서 정한 기본 글자 크기 xx-small,x-small,small,large,x-large,xx-large :medium 에 대한 상대적인 크기 설정값 small , large: 부모 요소의 글자 크기에 대한 상대적인 글자크기 설정값 length : rem ,px ,em, % css 단위를 사용한 설정값 font family 프로퍼티 > 일반적으로 font-family 에 여러 폰트를 설정하는경우가 많음 폰트는 웹페이지를 보는 각 사용자 pc 에 해당 폰트가 설치가 되어 있어야만 하기 때문에 , font-family 를 통해 설정된 맨 앞 폰트를 먼저 찾
CSS 속성 (2)
1. overflow 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성 기본: visible - 넘친 내용을 그대로 보여줌 hidden - 넘친 내용을 잘라냄 auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성 overflow는 overflow-x, overflow-y라는 개별 요소가 있다. 2. 출력특성 (display) 요소의 화면 출력(보여짐) 특성 기본적으로는 block, inline, inline-block, table등등이 설정되어 있다. inline-block은 기본적으로는 inline요소이지만 가로 세로 너비를 지정할 수 있는 특징이 있다. flex : 수평정렬에 용이한 1차원의 레이아웃 (하나의 축만을 가지고 레이아웃을 잡는 개
CSS - 텍스트 관련 속성
텍스트 관련 속성 font-family : 글꼴 정의 font-size : 글자 크기 정의 text-align : 정렬 방식 정의 color : 글자 색상 정의 font-family 요소를 구성하는 텍스트의 글꼴을 정의한다. 쉼표를 통해 우선순위를 정할 수 있다. [style.css] monospace 폰트를 지정하고 지원하지 않으면 serif를 지정하라는 의미 [index.html] font-size 글자 크기를 지정할 수 있다. 여러 단위를 설정할 수 있다. px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 rem : 태그의 font-size에 대응하는 상대적인 크기 em : 부모태크(상위태그)의 font-size에 대응하는 상대적인 크기 [style.css] [index.html] 
CSS box model 활용
🛫 CSS box model 활용 CSS box model 활용 image 이와 같이 만들려고 한다. [
CSS font-size
font-size !youtube[o0_Ot-TkqbU] 글꼴의 크기를 지정합니다. 주요 단위로는 px, em, rem이 있습니다. rem > html 태그에 적용된 font-size의 영향을 받습니다. html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되기 때문에 이해하기 쉽습니다. 가장 바람직한 단위입니다. 이것을 사용하세요. px > 모니터 상의 화소 하나의 크기에 대응되는 단위입니다. 고정된 값이기 때문에 이해하기 쉽습니다만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋습니다. em > 부모 태그의 영향을 받는 상대적인 크기입니다. 부모의 크기에 영향을 받기 때문에 파악하기가 어렵습니다. rem이 등장하면서 이 단위 역시 사용이 권장되지 않습니다. 
[CSS] Font & Text 속성
🎀Font font에 관련한 css속성들이다. font-size, font-family는 반드시 포함되어야 한다. 🎗️ font-size font의 size를 지정해준다. ex)font-size: 16px; 🎗️ font-style font를 기울여준다. ex)font-style: italic; 🎗️ font-weight font의 weight나 boldness를 정해준다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다. ex)font-weight: bold; (직접 숫자로 입력 가능하다.) 🎗️ font-family font 종류를 변경 가능하다. ex) font-family: 'Times New Roman'; 종류가 여러가지라면 앞에서부터 브라우저가 지원하는 font를 선택한다. 🎗️ line-height font의 위 아래 여백을 설정해준다. f
CSS
📕CSS 잊지말자 📑 반응형 css width: 100vm; height: 100vh; 이렇게 쓰면 최대 페이지 넓이만큼 반응형으로 늘어나는데 닫기버튼 창 이상을 뛰어넘는 경우도 발생할 수 있어서 -max-width:100%; 로 가로 스크롤을 잡을 수 있었다 -overflow:hidden; 세로 스크롤은 부모객체한테 overflow를 심어서 야매(?)적으로 잡을 수 있으나 하단 contents가 안 보일 수 있다🤷♀️ 📑 font-size: 1.0rem 이걸로 지정하면 반응 형에 같이 반응 해준다 📑 부모객체 positon: absolute;와 css지정 후 자식 객체(Map)에게 position: relative;로 지정 후
CSS Trick 004 font-size
❓ rem을 직관적으로 계산할 수 있나요? ❗ 보통 16px이 기준인데, 기준이 10px이 되도록 html에서 font-size를 설정해주면 계산하기 쉬워진다. 2rem = 20px, 1.8rem = 18px etc..
TIL #1 : [CSS] Font-Size/Units of Length
🤦♀️ px와 % 밖에 몰랐던 자여... " 때는 10월... 모 웹사이트 css를 보며 클론 코딩을 하던 중.. 0 1.6rem? 이게 뭐야? " 💎 Length를 표현하는 CSS Unit의 종류 Unit의 종류는 다양하다. 크게 두가지로 나뉜다: Relative Length ex) em, ex, ch, rem, vw, vh, vmin, vmax, % Absolute Length ex) cm, mm, in