본문 바로가기
728x90
반응형

Web/HTML5 & CSS8

HTML5(8) - SB 1. 벤치마킹 1) 사례 분석을 통해 기존에 발견하지 못했던 새로운 포지셔닝을 도출하기 위해 실시 2. 정보구조 설계 1) 메인 화면 - 검색 - 서비스 - 설정 .... 2) 계층 구조 - 레비블링 - 내비게이션 3.화면 레이아웃 구성 1) 해더 - 페이지 상단 - 로고, 홈, 회원가입, 로그인, 마이페이지, 장바구니, 검색 등 메뉴 위치 2) LNB - GNB 하위 계층의 서브 메뉴 영역 3) 콘텐츠 영역 4) 푸터 - 페이지 최하단의 위치 - 회사명, 전화번호, 사업자 등록번호, 이용약관... 4. SB (Story Board) 1) 화면 설계서 2) 화면 구성, 내용, 흐름, 동작 방식, 기능을 설계하고 정의하는 것 3) 각 화면 상세 설계를 통해 가이드라인 역할 수행 4) 구체적인 디자인 작업 .. 2022. 1. 28.
HTML5(7) - BS 1. BS = 웹 프런트엔드 개발 프레임워크 1) 트위터에서 웹 디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리임. 2. CSS vs BS 3. BS 핵심요소 1) CSS 2) Grid system 3) 컴포넌트 4) JS 플러그인 4. Grid system 1) 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총12분할) 2) Magic Number 12 3) 한 요소가 차지할 크기를 1칸에서 12칸까지 설정해줄수 있음. 4) 한 요소가 차지할 크기를 해상도별로 따로 설정해줄수 있음. 5. 반응형 웹페이지 1) 디바이스 장치에서 레이아웃이 달라지는 반응형 웹페이지를 만들 때 기본적으로 꼭 포함해야하는 meta태그로 viewport 설정 : .. 2022. 1. 28.
HTML5(6) - CSS 기본문법2 1. 가상 클래스 선택자 (Pseudo Classes Selectors) 1) hover - E:hover - E에 마우스(포인터)가 올라가 있는 동안에만 E 선택 2) active - E:active - E를 마우스로 클릭하는 동안에만 E 선택 3) focus - E:focus - E가 포커스 된 동안에만 E 선택 4) first-child - E:first-child - E가 형제 요소 중 첫번째 요소라면 선택 5) last-child - E:last-child - E가 형제 요소 중 마지막 요소라면 선택 6) nth-child(n) - E:nth-child(n) - E가 형제 요소 중 n번째 요소라면 선택 7) nth-of-type(n) - E:nth-of-type(n) - E의 타입(태그이름)과 .. 2022. 1. 28.
HTML5(5) - CSS 기본문법 1. 선택자 1) HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)임. 2) 스타일의 종류 (Property) --- 선택자 { 속성: 값; } ------ 스타일(CSS)을 적용할 대상(Selector) 선택자 { 2022. 1. 28.
HTML5(4) - 문서구조 1. div 1) division, 분할, 문서의 부분이나 섹션을 정의 2) 단순히 특정 범위를 묶는(wrap) 용도로 사용 - 특별한 의미가 없는 구분을 위한 요소 3) 묶인 부분들에 CSS나 JS를 적용하게 됨. 4) 블록(상자) 요소 2. h 1) 제목을 의미하는 요소 (Heading) 2) 블록(상자) 요소 3) 숫자가 작을수록 더 중요한 제목을 정의. 3. p 1) 문장을 의미하는 요소 (Paragraph) 2) 블록(상자) 요소 4. ul 1) 순서가 필요없는 목록의 집합을 의미 (Unordered list) 2) - 목록 내 각 항목 (List Item) 3) 블록(상자) 요소 5. a 1) 같은/다른 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor) 2) href : 링크 UR.. 2022. 1. 28.
HTML5(3) - review 1. 개요 1) HTML5 기준으로 작성. 2) 모든 브라우저에서 사용할수 있어야 함. 3) 빈 태그(Empty tag) : 4) 태그 내 속성 중 해당 요소에 필수적으로 사용되어야 하는 속성 : 필수 속성, 선택 속성. 2. 1) lang 속성 : 문서의 언어(ISO 639-1) (ex: ko, en...) 3. 1) HTML 문서의 정보를 설정 2) 메타데이터 - - : 외부 리소스의 연결 및 현재 문서와의 관계를 명시 - rel 속성 : 현재 문서와 외부 리소스와의 관계 - href 속성 : url - - : 스타일 정보(CSS)를 설정. 4. 2) HTML 문서의 구조를 설정 2022. 1. 28.
HTML5(2) - 문서 0. 1) 문서의 HTML 버전을 지정. 2) DOCTYPE (DTD, Document Type Definition) 3) 마크업 언어에서 문서 형식을 정의 4) 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도. 5) HTML5 (표준) 1. 1) 문서의 전체 범위 2) HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할. 2. 1) 문서의 정보를 나타내는 범위 2) 웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹페이지의 보이지 않는 정보를 작성하는 범위 3) ---- HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공. - charset : 문자인코.. 2022. 1. 28.
HTML5(1) - 개요 1.웹 기반 프로그램의 특징 1) 화면과 로직을 서버에서 모두 처리하므로 클라이언트가 특별히 수행할 작업이 없음. 2) 모든 기능이 서버에서 처리하므로 보안 면에서도 월등히 우수함. 2. 정적(static) 웹 프로그래밍 1) 웹서버(Apache)에 미리 보여줄 HTML 페이지, CSS, 이미지, JS 파일을 저장해 놓고 브라우저에서 요청 할 경우 그대로 전달하는 방식. 2) 사용자는 페이지가 변경되지 않는 한 고정된 웹 페이지를 보게함. 3) 구성요소 - 웹 서버 : 각 클라이언트에게 서비스를 제공하는 컴퓨터를 의미. - 클라이언트 : 네트워크로 서버에 접속한후 서버로부터 서비스를 제공받는 컴퓨터를 의미. - HTTP (Hyper Text Transfer Protocol) - www 서비스를 제공하는 .. 2022. 1. 28.
728x90
반응형

티스토리툴바