본문 바로가기

분류 전체보기84

[웹 표준에 맞는 HTML5 프로그래밍] 4차시 - CSS3를 활용한 시각적 효과 꾸미기 CSS3의 개요(선택자, 스타일, 속성, 값)1. CSS3의 개념 및 형식- HTML(Hypertext Markup Language): 문서의 내용- CSS(Cascading Style Sheets): 문서의 스타일(디자인)2. CSS3의 적용 예3. 선택자의 종류- .class- #id- *- element- element, element, .. CSS3의 표현 방법1. 외부 스타일 시트2. 내부 스타일 시트3. 인라인 스타일 시트 CSS3의 단위, 색상, 글자 속성1. CSS3의 단위- 고정 크기 단위: cm, mm, in, px, pt, pc- 가변 크기 단위: em, ex, ch, rem, vw, vh, vmin, vmax, %2. CSS3의 색상- CSS 색상의 종류: Background Col.. 2023. 2. 5.
[웹 표준에 맞는 HTML5 프로그래밍] 3차시 - 웹 페이지 구조화 하기 웹 페이지 구조화와 시맨틱 태그1. 공간 분할 태그- div: 블록(Block)형식으로 공간 분할- span: 인라인(Inline)형식으로 공간 분할- 공간 분할 태그: CSS3를 활용해 레이아웃 구성할 때 매우 유용함2. 시맨틱 태그Semantic: 의미론적인, 즉 태그에 의미를 부여한다는 뜻3. 주요 웹 사이트의 태그 사용 현황- 웹 사이트의 태그 사용 현황 확인 방법   1. 크롬으로 주요 사이트 접속   2. 마우스 오른쪽 버튼을 클릭해서 페이지 소스보기 선택   3. 소스 보기 창에서 찾기를 선택   4. 주요 태그의 개수 확인해보기 리스트와 표1. 리스트(list)태그- ol : 순서가 있는 목록- ul : 순서가 없는 목록- dl : 정의 목록- dl : 정의 설명2. 테이블(.. 2023. 2. 5.
[웹 표준에 맞는 HTML5 프로그래밍] 2차시 - 웹 페이지 기본 문서 만들기 HTML5의 기본 구성1. 시작과 끝이 없는 태그는 "img", "br", "hr"이 있고, 태그의 구조는 속성(Attribute)과 속성값(Value)임2.  HTML5 문서태그는 html, head, title, body, base, meta, link, style, script, h1...h6, div, span, p, br, hr 등이 있음 텍스트와 링크 태그1. 제목과 본문 태그에는 h1...h6, p, br, hr, div, pre, 특수문자 등이 있음2. 글자 모양 태그에는 b, strong, i, em, small, sub, sup, ins, del, mark 등이 있음3. 하이퍼링크 태그 요소에는 a, href, URL 등이 있음- a: 하이퍼링크를 의미- href: 파일의 경로(주소)-.. 2023. 2. 5.
[웹 표준에 맞는 HTML5 프로그래밍] 1차시 - 웹 프로그래밍 이해하기 웹 프로그래밍의 개요1. 웹 프로그래밍하이퍼텍스트 프로토콜(hypertext protocol)을 활용하여, 월드 와이드 웹(WWW:World Wide Web)을 통해 정보를 공유하는 환경을 구현하는 것2. HTML5-하이퍼텍스트(Hyper text): 텍스트, 이미지, 영상 같은 문서의 개체가 서로 연결되어 있는 것-마크업 언어(Markup Language): 태그(tag)를 이용하여 문서나 데이터의 구조를 명시하는 언어3. CSS3-캐스캐이딩(Cascading): 우선 순위에 따라 적용하는 것-스타일 시트(Style Sheets): 웹 페이지의 스타일(디자인)을 정의하는 것4. JavaScript웹을 풍부하게 만들어주는 상대적으로 가벼운 프로그래밍 언어 웹 프로그래밍 관련 주요 구성 요소1. 웹 브라우.. 2023. 2. 5.