web/HTML

와이어프레임

Wireframe 웹 또는 어플리케이션 레이아웃의 도면을 작성하는 단계를 와이어프레임 이라고 한다. 도면이라는 말 처럼 어느구역을 어떤식으로 설계 할것인지, 버튼은 어느 위치에 있을것인지, 화면은 어떻게 나눌 것인지 등 전체적인 틀을 구성하게 되고, 이 와이어 프레임 도면을 바탕으로 디자이너는 완성된 웹 또는 어플리케이션이 실제로 어떤 느낌일지 목업을 구현한다. 현재 내 블로그의 와이어프레임 을 한번 만들어 보았는데 생각보다 이상한 느낌이라 이게 맞나 싶다.

HTML 레이아웃 리셋하기

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

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 에서의 , , , , 태그는 와 똑같다. 하지만 ..