CSS4 [CSS] 폰트 사이즈, 웹 폰트 사용하기 폰트 크기 조절 폰트의 사이즈를 조절하는 방법은 대표적으로 %, px, em, rem 세 가지가 있다. %: 기본 크기를 100%로 놓고 상대적인 비율로 크기 조절 px: 픽셀, 단순한 숫자로 크기를 조절하는 단위 em: 기본값을 바로 상위(부모) 태그의 폰트 크기 값으로 두고 상대적인 비율로 크기 조절 (ex. 1em = 100%, 1.5em = 150%) rem: 상위 태그의 폰트 크기 상관없이 html기본 폰트 크기(16px)에 상대적인 비율로 크기 조절 See the Pen mdOPEjZ by Heekng (@heekng) on CodePen. div1: html기본 폰트 크기인 16px에 100%인 16px div2: em이므로 부모 태그의 폰트 크기 16px의 1.5배인 24px div3: 1.. 2021. 2. 6. [CSS] 캐스캐이딩 Cascading 선택자를 이용하여 스타일을 지정할 때, 태그에 이미 스타일을 지정한 후 태그 안에 속해있는 다른 태그에는 다른 스타일을 지정해야 할 때가 있다. 이때 선택자의 우선순위인 캐스캐이딩(Cascading)을 잘 이해하고 있어야 스타일 충돌 없이 내가 원하는 html을 작성할 수 있다. 중요도에 따른 우선순위 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일 위의 형태로 우선순위가 달라진다. 인라인 스타일: html요소 내부에 style 속성으로 사용 내부 스타일 시트: HTML 문서의 style태그 안에 위치 외부 스타일 시트: CSS파일을 따로 만들어서 불러오는 방법 1. 웹 브라우저의 기본 스타일이 있더라도 외부 CSS파일로 작성된 스타일 시트가 있다면 외부 스타일 시트.. 2021. 2. 6. [CSS] CSS 시작, 문법, 선택자 CSS는 무엇이고 왜 쓰는가? CSS는 Cascading Style Sheet의 약자이다. CSS는 HTML요소들이 미디어에서 어떻게 보이게 할지 정의하는데 이용하는 스타일 시트 언어이다. 기존의 HTML은 HTML 문서 내에서 스타일을 지정해야 했기 때문에 협업에 있어서 시간적으로 비효율적이었다. 하지만 스타일을 CSS로 외부에서 작성하여 연결시킴으로써 작업의 효율이 좋아졌다. CSS 문법 선택자 { 속성명:속성값; 속성명:속성값; ...} CSS의 기본적인 작성 문법은 위와 같다. 크게 보면 선택자 { 선언부 }의 형태로 구성된다. 여기서 선택자는 CSS를 적용하고자 하는 HTMl요소를 가리키고 선언부는 중괄호 {}를 이용하여 전체를 둘러싼다. 각각의 선언은 속성명과 속성 값을 가지며 속성명:속성 값.. 2021. 2. 6. [HTML] 테이블, table html문서 내에서 테이블(표)를 만드는 방법을 알아본다. 테이블(table)이란, 여러 종류의 데이터가 행과 열로 정리된 표를 뜻한다. 1. 테이블 생성 방법 , , , 테이블은 기본적으로 [테이블요소]의 형태로 구성된다. 태그 안에서 태그로 행을 구성한다. 태그 안에서 태그와 태그로 각 행마다의 열을 구성한다. 태그는 각 셀의 요소를 나타내는 반면에, 태그는 컬럼명을 나타낸다.(다른점은 글자가 굵게 나타나며 더 강조한다는 점) 셀의 행과 열 수는 설정한 값의 최대값으로 맞춰진다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 블로그 포스트 1행1열 1행2열 2행1열 2행2열 3행1열 3행2열 cs 위처럼 테이블의 1행은 태그를 이용하고 나머.. 2021. 2. 3. 이전 1 다음
