web

HTML 레이아웃 리셋하기

레이아웃 리셋 HTML은 기본 스타일을 가지고 있다. 하지만 이런 기본 틀이 내가 만들고자 하는 페이지의 구현을 방해할 경우가 있다. * 태그에 기본적으로 약간의 여백이 존재함 * Width, height 의 여백이 포함되어있지 않아 계산상의 어려움 * 다양한 브라우저마다 기본 여백, 글꼴등의 스타일이 조금씩 다르다 HTML 레이아웃을 Reset 하기 위한 대표적인 라이브러리로 { reset.css }, { normalize.css } 가 있는데 보통 유용한 기본값들은 유지시키는 { normalize.css } 라이브러리 사용이 추천된다. 이유1 이유2 CSS파일에서 수동으로 코드를 작성해 HTML 기본 레이아웃을 제거 할 수도 있다. //기본 스타일링 제거 *{ box-sizing: border-box..

BOX MODEL

BOX MODEL 박스는 줄바꿈이 되는(word_wrap) 박스와 줄바꿈 없이 옆으로 이어지는 박스로 구분된다 Block box abcdefghi jklmnop..... 줄바꿈 o , , , , 등... Inline box abcdefghijklmnop.... 줄바꿈 X 크기지정 X , , ,,,..등 display: inline-block inline box 처럼 옆에 붙으며 고유의 크기를 갖는다. 박스의 종류별 특징 줄바꿈 여부 기본 너비 width, height 사용 여부 Block Box O 100% O Inline-block X 글자가 차지하는 만큼 O Inline X 글자가 차지하는 만큼 X 박스의 구성 요소 항상 여백을 고려한 디자인을 해야한다. BORDER(테두리) //body 태그에 1p..

FONT

글꼴 property(속성) = font-family .fontbox { font-family: "MalgunGothic", "Verdana", "Font1"; } *[fallback글꼴] : 해당 글꼴이 미설치된 경우, 순차적으로 뒷 폰트로 적용. 그마저도 없으면 기본글꼴 (윈도우-맑은고딕 / 맥-apple 산돌 고딕) 글꼴의 단위 1. 크기를 절대 사이즈로 고정 (px) .mainParagraph { font-size: 24px; } 2. 일반적인 상황 (rem) .mainParagraph { font-size: 1rem; } > 기본 글자 크기가 1rem. > 2배로 크게하려면 2rem 등 > root의 폰트 크기에 따라서만 상대적으로 변함 3. 반응형 웹 > 접속한 플랫폼의 너비(width)에 따..

Id & Class Selectors

Id & Class Selectors ID부여 (id Selector-선택자) 하나의 고유 요소에 id부여 / #으로 선택한다. 그렇기 때문에 id를 부여하면 그것만 딱 골라서 CSS설정을 할 수 있다. (IN HTML) blahblahblah (IN CSS) #ID이름 으로 불러온다 #paragraph_1{ background-color: blue; } **주의!!** id는 하나의 문서에서 같은 이름으로 중복사용 불가 Class 부여 (Class Selector-선택자) Id selector와는 다르게 여러개의 요소에 class를 부여해서 한번에 CSS 설정을 할 수 있다. (.html) Apple Orange Mango (.css) .fruits_in_basket { text-decoration: ..

CSS 기초

CSS 스타일 (스타일 시트 언어) 효율적인 UI (User Interface)를 통하여 UX (User Experience) 를 사용자에게 제공하는게 주 목적 정보전달력 & 가독성 향상 / 색약기능, 다크모드 등 HTML 안에서의 CSS 적용 > HTML 태그에 직접 CSS 속성을 적용 할 수 있지만 헷갈릴 우려가 크고 구조와 내용을 담당하는 HTML과 디자인인 CSS를 분리하는 관심사 분리 측면에서 비권장 된다. (즉 HTML 파일에서 구조와 틀에 관련된 내용만 작업하고 디자인은 CSS파일에서 한뒤 연결 해서 쓴다.) (3번 코드) 다만, CSS 코드가 길지 않으면 HTML 요소에 직접 CSS 속성 추가가 가능하다. (1번, 2번 코드) 1. Inline CSS style ..... 2. Intern..

HTML 기초

HTML 구조 (마크업 언어) 뼈대 태그들의 집합으로 이루어져 있다. Frequently used HTML tags Division Span , .... ,... header 숫자가 낮을수록 우선순위 Paragraph 본문용 no closing tag Image no closing tag make empty line Add 1 blank line or & & Unordered / ordered list & List item no closing tag input(text, radiobox, tickbox) 다양한 입력 폼 Multi-line text Button , , , , , , Bold, Italics, Underline, Barred HTML 에서의 , , , , 태그는 와 똑같다. 하지만 ..