Web/HTML CSS

HTML5 레이아웃 구조 웹이든 앱이든 UI를 배우기 위해서 가장 먼저 알아야할게 레이아웃 구조가 아닐까 싶다. HTML 4.01 버전에서는 레이아웃을 아래와 같이 태그를 이용해 만들었다. 헤더(페이지 제목 등이 들어가는 자리) 네비게이션 바(페이지 상단에 카테고리가 담겨져있는 바) 콘텐츠(페이지 본문) 페이지 하단에 저작권이나 사업자 등록번호 같은 것들 보면 알겠지만, id 속성을 이용해 억지로 의미를 부여한 느낌이다. HTML5에선 저러한 값들을 아에 태그로 만들었다. 헤더(페이지 제목 등이 들어가는 자리) 네비게이션 바(페이지 상단에 카테고리가 담겨져있는 바) 콘텐츠(페이지 본문) 페이지 하단에 저작권이나 사업자 등록번호 같은 것들 위 예 말고도 새로 추가된 태그는 더 많다. 그 중 추가로 알아두면..

태그 태그는 그 외에 속성이 몇 개 더 있긴한데 몰라도 무방할 듯 다 필요없고 아래 3개의 속성만 기억하자 ! description author charset

DOCTYPE 선언 HTML은 여러가지 버전이 있다. HTML 4.01, XHTML, HTML5 HTML 버전마다 지원하는 태그가 다르기 때문에 웹 브라우저가 렌더링하기 쉽게 알려주는 것. HTML5 라고 알려주는 DOCTYPE은 아래와 같이 작성한다. (대부분 HTML5를 사용함) HTML 4.01 버전임을 알려주는 DOCTYPE 작성. 참고로 HTML 4.01 버전은 다시 3개의 버전으로 나뉜다. XHTML은 생략 HTML5가 2012년에 나왔으니, 그 이전에 만들어진 앱을 제외하곤 HTML 4.01 문서나 XHTML 문서는 볼 일 없다. HTML5는 기억하고 있자 !

AdminLTE Bootstrap기반의 인기있는 대시보드 무료 템플릿으로 AdminLTE가 대표적이다. 물론 문서에 아주 자세히 나와있지만, 몇 개만 정리해보자 레이아웃 구조 (대시보드 레이아웃 구조는 다 이런 식이라보면 됨) 다운로드 방법은 총 4가지 npm install admin-lte@^3.0 --save // npm yarn add admin-lte@^3.0 // yarn composer require "almasaeed2010/adminlte=~3.0" // composer git clone https://github.com/ColorlibHQ/AdminLTE.git // git