개발자 수업/HTML5
-
9. CSS 기본 문법3개발자 수업/HTML5 2021. 12. 20. 12:46
1. CSS3 Flexible Box (정렬) - 1차원 레이아웃 1) 1차원이라는 개념은 - 수직은 y축, 수평은 x축 - 수직정렬, 수평정렬에서 x축과 y축처럼 하나의 축을 1차원이라고 함 2) Flex Container - display - Flex Container의 화면 출력(보여짐) 특성 - flex : 블록 요소와 같이 Flex container 정의 - inline-flex : 인라인 요소와 같이 Flex container 정의 - flex-direction - 주축을 설정 - row (행축 : 좌 -> 우) (default) - row-reverse (행축 : 우 -> 좌) - column (열축 : 위 -> 아래) - column-reverse (열축 : 아래 -> 위) - align-..
-
8. SB개발자 수업/HTML5 2021. 11. 5. 17:42
1. 벤치마킹 1) 사례 분석을 통해 기존에 발견하지 못했던 새로운 포지셔닝을 도출하기 위해 실시 2. 정보구조 설계 1) 메인 화면 - 검색 - 서비스 - 설정 2) 계층 구조 - 레이블링 - 내비게이션 3. 화면 레이아웃 구성 1) 헤더 - 페이지 상단 - 로고, 홈, 회원가입, 로그인, 마이페이지, 장바구니 검색 등 메뉴 위치 2) LNB - GNB 하위 계층의 서브 메뉴 영역 3) 콘텐츠 영역 4) 푸터 - 페이지 최하단 위치 - 회사명, 전화번호, 사업자 등록번호, 이용약관 등 4. SB (Story Board) 1) 화면 설계서 2) 화면 구성, 내용, 흐름, 동작 방식, 기능을 설계하고 정의하는 것 3) 각 화면 상세 설계를 통해 가이드라인 역할 수행 4) 구체적인 디자인 작업 이전 프로토타..
-
7. BS (웹스톰)개발자 수업/HTML5 2021. 11. 4. 18:46
1. BS = 웹 프론트엔드 개발 프레임워크 1) 트위터에서 웹 디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리임 2. CSS vs BS 3. Grid system 1) 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할) 2) Magic Number 12 3) 한 요소가 차지할 크기를 1칸에서 12칸까지 설정해줄 수 있음 4) 한 요소가 차지할 크기를 해상도 별로 따로 설정해줄 수 있음 4. Grid system 1) 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할) 2) Magic Number 12 3) 한 요소가 차지할 크기를 1칸에서 12칸까지 설정해줄 수 있음 4) 한 요소가 차지할 크기를 해상도 별로 따..
-
6. CSS 기본 문법2개발자 수업/HTML5 2021. 11. 2. 20:19
1. 가상 클래스 선택자(Pseudo Classes Selectors) 1) hover - E:hover - E에 마우스(포인터)가 올라가 있는 동안에만 E 선택 2) active - E:active - E를 마우스로 클릭하는 동안에만 E 선택 APPLE 이 곳에 마우스를 올려보세요. 클릭하세요. 3) focus - E:focus - E가 포커스 된 동안에만 E 선택 4) first-child - E:first-child - E가 형제 요소 중 첫 번째 요소라면 선택 딸기 사과 오렌지 망고 first-child입니다. first-child가 아닙니다. P 태그가 아니라 선택되지 않습니다. P 태그가 아니라 선택되지 않습니다. 5) last-child - E:last-child - E가 형제 요소 중 마지..
-
HTML5/src/main/webapp/lab03개발자 수업/HTML5 2021. 11. 2. 14:20
Happy New Year Happy happy happy Happy New Year Happy New Year Happy New Year First Group First Group Second Group Second Group 자손 선택자 자식 선택자 test @charset "UTF-8"; /* 전체 선택자 */ * { color: gray; } /* 태그 요소 선택자 */ h1 { color: red; } /* id 선택자 */ #title { color: red; } /* class 선택자 */ .first { background-color: green; } .second { background-color: yellow; } /* 다중 선택자 */ h1, #title, .first, .second..
-
4. HTML 문서 구조개발자 수업/HTML5 2021. 11. 1. 14:18
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 : 링크 URL t..