▶ 16진수를 이용한 컬러 표기법 6자리 숫자로 표기하는 것이 맞는 표기법이지만 각 두자리의 숫자가 겹치는 경우 줄여서 사용이 가능하다 #000000 -> #000 각 두자리 숫자들은 레드, 그린, 블루의 색상을 의미함 ul li:nth-of-type(1) { background-color: #000; } ul li:nth-of-type(2) { background-color: #111; } ul li:nth-of-type(3) { background-color: #222; } ul li:nth-of-type(4) { background-color: #333; } ul li:nth-of-type(5) { background-color: #444; } ul li:nth-of-type(6) { backgro..

https://fonts.google.com/ 웹폰트 적용시 html 파일에 링크시키는것이 속도면에서 더 뛰어나지만 추후 재사용을 생각할 때 css파일에 임포트 시키는 것이 효율적이다 웹폰트 이용시 최대 3개까지만 사용하기 - 초과할경우 랜딩속도가 느려짐 - 디자인적으로도 좋지않음

margin : 바깥여백 , padding : 안쪽여백 - 값이 하나일 때 : 상, 하, 좌, 우에 각 값에 해당하는 바깥여백 적용 - 값이 2개일 때 : (상,하), (좌,우) - 값이 3개일 때 : 위여백, 좌우여백, 아래여백 - 값이 4개일 때 : 위, 오른쪽, 아래, 왼쪽 여백 margin겹침 현상 - margin 값이 상하로 붙게 되면 큰값의 margin만 적용됨 padding(안쪽여백)과 border(테두리)를 적용하면 기존 블록요소의 크기에서 추가로 값이 설정됨 (설정한 가로, 세로보다 크기가 커짐) -> box-sizing: border-box 를 적용하면 지정해놓은 가로, 세로 크기 내에서 padding과 border값이 설정됨 (크기변경X) margin: 0 auto; -- 블록요소 자..

a태그는 주로 버튼으로 많이 사용된다 a태그는 인라인 요소이기 때문에 넓이, 높이 값을 지정할 수 없지만 버튼의 클릭율을 높이기 위해 넓이와 높이를 늘려줘야 한다. -> display:block; 을 이용해 블록요소 형태로 바꿔준 뒤 넓이, 높이 값을 지정해 준다. 글자를 가운데에 위치시키시 위해서 text-align: center;(가로축 가운데정렬), line-height: 높이와 같은 값(세로축 가운데정렬)을 적용시켜 준다. * 특정 프레임의 높이값과 line-height값을 동일하게 입력하면 해당 프레임 안쪽에 있는 글자를 세로축 가운데에 배치할 수 있다

시스템 폰트(OS 상관없이 모든 컴퓨터에 보편적으로 설치되어 있는 폰트) 사용하기 - 한글 : 돋움, 굴림 - 영어 : arial, verdana, sans-serif 폰트 굵기 font-weight : bold ; (normal/bold) 폰트 기울기 font-style : italic ; (normal/italic) 폰트 사이즈 font-size : 12px ; 줄간격 line-height : 1.6 ; 폰트 모양 font-family : “돋움”, arial ; 폰트 축약형 font : bold italic 12px/1.6 “돋움”,arial ; 폰트 색깔 color : #777 ; 문단들여쓰기 text-indent : 20px ; 문단 정렬 text-align : left ; (left / cen..

블록요소태그의 특징 1. 자동줄바꿈 2. 넓이값 미지정시 부모요소의 100%넓이 3. 넓이와 높이값 지정가능 4. 블록요소태그는 블록요소와 인라인요소 태그를 모두 감쌀수 있다. 인라인요소태그의 특징 1. 자동줄바꿈 안되고 옆으로 붙음 2. 태그로 감싼 글자자체의 넓이와 높이가 태그의 크기 3. 인라인 태그의 넓이와 높이는 조절 불가능 4. 인라인태그는 인라인태그만 감쌀수 있다. 5. 인라인요소에 넓이와 높이값을 주기위해선 block화 시켜야 된다 (display:block;)