1. 플랫폼 : 특정 기술들의 모음집 또는 환경
2. WEB(World Wide Web): 거미줄처럼 연결된 세계
3. 프론트엔드: 정보를 어떻게 화면에 보여줄 것인가?
4. 웹 페이지의 구성 요소(3가지 언어)
HTML(HYPER TEXT MARKUP LANGUAGE)
CSS(CASCADING STYLE SHEET)
JAVA SCRIPT
5. HTML의 정의
- 웹 페이지와 그 내용을 구조화 하기 위한 마크업 언어
- 웹 페이지를 구성하는데 사용되는 마크업 언어
- 웹 문서의 주고와 내용을 정의
6. HTML의 기본 문법 : 태그
- <태그이름 속성="속성값"> 콘텐츠</태그이름>
- 태그 : 요소의 시작과 끝을 표시하는 마크업 기호
- 규칙 : <>로 묶인 부분이 태그
- 여는 태그와 닫는 태그는 이름이 같아야 함
- / 유무로 구분
7. 태그 이름 : 해당 태그가 어떤 콘텐츠를 표시하는지 의미
8. 콘텐츠: 태그 사이에 태그가 실제로 표시할 내용 작성
9. 속성 : 태그에 부가 기능을 추가하기 위해 작성하는 것
10. 속성값: 속성에 부여된 기능이나 설정을 구체적으로 지정하는 값
11. HTML 문서의 기본적인 구조
12. HTML 요소의 개념과 역할
- HTML 요소: HTML 문서나 웹 페이지를 이루는 개별적인 요소
- 태그를 이용해 표현
- 브라우저에 해당 내용을 어떻게 표시해야 하는지 알려주는 역할
12-1. 텍스트 관련 요소 : h태그
- 제목 태그 : 제목이나 부제목을 표현
h1 - h6 까지 존재하고 h1이 가장 큰 주제 표현
12-2. 텍스트 관련 요소 : p태그
- 단락 태그 : 문단을 표현
문단 내용을 열린 태그와 닫힌 태그 사이에 입력
12-3. 텍스트 관련 요소: ul, li태그
- 순서가 없는 목록과 목록요소 태그
- 순서가 정해지지 않은 목록과 그 목록의 각 요소들 표현
12-4. 텍스트 관련 요소: ol, li태그
- 순서가 있는 목록과 목록 요소 태그
- 순서가 정해진 목록과 그 목록의 각 요소들 표현
13. 컨테이너
- 요소들을 묶어서 구조화 하거나 스타일링을 적용하는 역할을 하는 요소
- 웹 페이지의 레이아웃과 내용을 조직화
<div>: block 수준의 컨테이너 요소 <span>: Inline 수준의 컨테이너 요소
13-1. 블록 수준의 요소는 항상 새로운 줄에서 시작
13-2. 블록 수준의 요소는 부모 요소의 너비를 모두 차지
14. 전역속성
- 모든 HTML 요소에서 사용할 수 잇는 공통 속성
- Class : 페이지 내에서 여러 요소에 동일한 스타일을 적용하고 싶을 때 같은 class 이름을 각각 요소에 부여
- id : 요소에 고유한 식별자 부여
★식별자 : 식별 할 수 있는 이름표
14. Class 속성 : HTML 요소에 하나 이상의 클래스를 할당 하는데 사용
15. id 속성 : HTML 요소에 고유한 이름을 부여해 요소 식별에 사용
15&16. id와 class의 사용 예제
- 반드시 세미콜론(;)으로 마무리 지어야함
17. class와 id의 공통점
18. 이미지 요소
- HTML에서 이미지를 표시하기 위해 사용
<img> 태그이용- src 속성: 이미지의 파일 경로 지정
- alt 속성: 이미지를 설명하는 대체 텍스트
19. 링크 요소
<a> 태그 이용: 다른 웹 페이지 현재 페이지 내의 다른 위치로 이동가능- href속성 : 링크의 대상 URL을 지정(필수)
- target 속성
_self: 현재 탭에서 이동
_blank: 새로운 탭에서 이동
20. HTML - body와 태그
21. HTML - id
22. CSS - 선택자
23. Bootstrap
- 프론트엔드의 css 작업을 도와주는 라이브러리
