프론트엔드 입문
1.[프론트엔드 입문] 1-1 인터넷 / HTML - CSS
1. 인터넷 개요 [1] 인터넷 개요 Inter + Network의 개요 네트워크의 네트워크 정보 공유를 위해 컴퓨터와 통신망을 연결한 최대의 네트워크 [2] 인터넷 개요 - 역사 1969년 네트워크의 네트워크를 구현하여 모든 컴퓨터를 하나의 통신망으로 연결하고
2.[프론트엔드 입문] 1-2 웹페이지 작성 준비 및 HTML 구조
1. 웹페이지 작성 준비 [1] 웹페이지 작성 준비 HTML 문서 작성 에디어 (코딩) 웹 브라우저 (실행) 웹 서비스 지원 서버 (AWS) 서비스 하려는 홈페이지 호스팅 서버 [2] HTML 프로그래밍 메모장 사용, Type tags into a text fi
3.[프론트엔드 입문] 2-2 HTML 기본 태그 1
1. HTML tags [1] HTML Text Tags Heading : 제목을 표현할 때 사용한다. 1) 특징 h1 ~ h6까지 존재한다. 숫자가 커질수록 작아진다. 2) 예시 [2] HTML Paragraphs : 새로운 문단을 시작한다. 1) 특징 시
4.[프론트엔드 입문] 3-1 HTML 기본 태그 2
1. HTML List [1] Ordered HTMl List : 순위가 있는 리스트 1) 예시 type 속성을 통해 종류를 지정할 수 있다. (기본 값은 1, a, A, I 등) ` 태그를 사용하고, ` 태그를 사용한다. `` 태그의 경우 unordered li
5.[프론트엔드 입문] 3-2 HTML 태그 image, link
1. HTML image [1] 일반적으로 사용하는 그림 화일 포맷 1) 종류 .gif (Graphic Interchange Format) .jpg (Joint Photgraphic Experts Group) .png (Portable Network Graphic
6.[프론트엔드 입문] 4-1 Tables
1. Tables [1-1] table 태그 `` : table `` : table header `` : table row `` : table data [1-2] 예시 1) 코드 2) 결과 [2] HTMl Tables attributes 1) 종류 ali
7.[프론트엔드 입문] 4-2 멀티미디어 태그
1. HTML5 source [1-1 ] tag : audio tag와 video tag에서 파일의 경로와 미디어 타입을 명시하는데 사용 1) 형식 [1-2] tag예시 1) 코드 2) 결과 2. HTML5 Audio [1] Browser Support
8.[프론트엔드 입문] 5-1 Frames
1. Frames [1] HTML Frames란? 한 웹페이지를 여러 개 section으로 나누어서 활용한다. 각 섹션에 다른 내용을 나타낼 수 있다. 각 섹션은 독립적이다. 프레임을 나누는 html 문서에는 `, ` 1) `` cols : 좌우로 프레임을 나눈
9.[프론트엔드 입문] 5-2 meta, div&span 시맨틱 태그
1. 메타데이터 [1] W3C 유효성 검사 : 작성한 Html 문서의 유효성을 검사하기 위한 페이지 https://validator.w3.org URL : 웹 주소를 입력하여 유효성 검사 Fuiel upload : 해당 파일을 업로드하여 검사 Direct
10.[프론트엔드 입문] 6-1 Forms
1. HTML Forms [1] HTML FORMS 1) Forms : 웹 페이지에서 사용자의 입력을 받는 형식 예시) 로그인, 검색, 예약 등 2) Form elements : 폼을 구성하는 다양한 태그 예시) , , 등 3) 속성 name : 폼의 이
11.[프론트엔드 입문] 6-2 SVG & Canvas
1. HTML SVG [1] HTML SVG(Scalable Vector Graphic) : 확장 가능한 벡터 그랙픽 1) 특징 XML 형식으로 그랙픽을 정의힌다. 웹용 벡타 기반 그래픽을 정의하는데 사용된다. SVG 파일의 각 요소와 속성은 애니메이션화될 수 있
12.[프론트엔드 입문] 7-1 CSS 소개와 구조
1. CSS3 소개와 구조 [1] CSS3(Cascading Style Sheet) 소개 : HTMl 문서의 색이나 모양 등 외관을 꾸미는 언어로, CSS로 작성된 코드를 '스타일 시트' 라고 부른다. 1) CSS3의 기능 색상과 배경 텍스트 폰트 박스 모델(Box
13.[프론트엔드 입문] 7-2 CSS 규칙
1. CSS style 상속 [1] CSS3 규칙 - 스타일 상속 : CSS3 스타일은 부모 태그로부터 상속한다. 1) 부모 태그 (부모 요소) : 자신을 둘러싸는 태그 (1) 예시 ` 태그는 ` 태그의 부모 태그이다. `` 태그의 출력 : 글자 크기는 25px
14.[프론트엔드입문] 8-1 CSS BOX 모델
일자 : 24-2 9주차 (1): HTML 문서에서 content를 표현할 때 margin, border, padding, content의 구성과 관계각 HTML 태그 요소를 하나의 박스로 다룸박스 크기, 배경 색, 여백, 옆 박스와의 거리 등 제어 가능Margin :
15.[프론트엔드 입문] 8-2 텍스트 관련 스타일
일자 : 24-2 9주차 (2) 1. 텍스트 관련 스타일 [1] Color : 글자의 색상을 설정합니다. 색상 코드를 사용해 정의할 수 있습니다. [2] Direction : 글씨의 읽기 방향을 설정합니다. ltr: 왼쪽에서 오른쪽으로 읽는 방향 rtl: 오른쪽에서 왼쪽으로 읽는 방향 [3] Letter-spacing : 글자들 사이의 간격을 설정...
16.[프론트엔드입문] 9-1 CSS를 이용한 HTML 태그 배치
일자 : 24-2 10주차 (1): CSS3로 HTML 태그가 출력되는 위치 지정(HTML 태그는 웹 페이지에 작성된 순서와 달리 배치 가능)displaypositionleft, right, top, bottomfloatz-indexvisibilityoverflowin
17.[프론트엔드 입문] 9-2 CSS로 리스트, 표, 폼 꾸미기
일자 : 24-2 10주차 (2) 1. CSS & list [1] CSS3로 리스트 꾸미기 list-style-type : 아이템 마커 타입 지정 list-style-image : 아이템 마커 이미지 지정 list-style-position : 아이템 마커의 출력
18.[프론트엔드 입문] 10-1 CSS Animation & Transitions
일자 : 24-2 11주차 (1)자바스크립트로 구현하던 것을 CSS3로 작성 가능3 가지 기법 지원애니메이션(animation)전환(transition)변환(transform)HTML 태그의 모양 변화를 시간 단위로 설정@keyframes으로 HTML 태그의 시간별 모
19.[프론트엔드 입문] 10-CSS Transforms & CSS Style Images
일자 : 24-2 11주차 (2): 텍스트나 이미지를 회전, 확대 다양한 기하학적인 모양으로 출력회전 각도의 단위는 deg이며 시계방향의 회전rotateskewtranslateY / translateXscaleCSS 필터는 이미지나 HTML 요소에 시각적 효과를 적용할
20.[프론트엔드입문] 기말고사 요점정리
Cascading Style Sheets스타일 시트 = CSS로 작성된 코드Selector는 HTML elements 사용Property에 값을 지정할 때는 '콜론(:)' 사용여러 개의 Property를 사용할 때, 중간에 '세미콜론(;)'을 사용HTML tag: ht