1강
1.
- HTML : 웹 브라우저 창에 분서의 내용을 보여주기 위한 뼈대
- CSS: 웹 문서를 꾸미거나 웹 요소를 적절하게 배치
- JS: 사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술
3강
1. Html : 웹 문서 시작을 알림
- Head: 브라우저에게 정보 제공, 문서 관련 정보입력, 브라우저 화면에는 보이지 않음
- Body: 실제 브라우저에 표시될 내용
<body> 내부
1. Header : 검색창이나 사이트 메뉴 삽입
- 로고영역
- 네비게이션: 웹 문서나 위치에 영향을 받지 않음
n 문서안에 여러개 만들수 있음 (li 로 리스트 만들어서 배열)
2. Main: 웹 문서에서 핵심이 되는 내용
문서마다 다르게 보여는 내용, 웹문서에서 한번만 사용
- Section: 메인 내부의 콘텐츠 영역
3. Aside: 사이드바 영역
4. Footer 사이트 제작 정보나 저작권 정보 연락처 등
5. Div 소스를 묶는 용도, 영영 구별 이나 스타일 적용
4강 텍스트 태그
1. H1 : 제목 표시 h1 – h2 – h3…
2. P : 텍스트
3. Br : 줄 띄우기
4. Blockqutoe: 인용
5. Strong, b: 굵게
6. Em, I 이텔릭체로
7. Ol, li 순서 목록
8. Ui, li 순서 없는 목록: 주로 사용
9. Img: 이미지
A. 웹문서에 이미지 삽입시
B. <img src=”이미지 삽입경로”>
10. Object : 음악, 동영상, pdf 기타 등등
11. A : 링크 <a href = “링크 주소>
5강 input 태그
1. Text : 한 줄짜리 텍스트 입력필드
2. Password: 비밀번호 입력
3. Search: 검색 오른쪽 끝에 x 표시 생김
4. url: 웹 주소 이력 필드 http://로 시작
5. email 메일주소 형식 자동체크
6. tel: 전화번호
7. radio: 여러가지중 하나만 선택하는 선택 필드
8. checkbox : 여러가지 항목 중 둘 이상을 선택함
9. number: 숫자입력필드
10. range: 슬라이드막대, 숫자로 범위내에서 선택, min max 지정가능
11. file : 첨부파일
12. hidden: 화면상의 폼에는 보이지 않고 서버 전송시 서버로 함께 전송되는 요소
6강 css
- 선택자{속성: 속성값;
속성: 속성값;…}
1. 선택자
- * : 전체 선택자
- 태그명 : 특정 태그를 사용한 모든 요소에 스타일 적용
- .클래스명: 요소의 특정 부분에만 적용
여러 번 반복할 스타일이라면 클래스 선택자로 정의
- #아이디명: 문서 안에서 한번만 사용할 목적으로 사용
- 그룹 선택자: 여러개의 선택자들을 ,로 동시에 사용
7강 font
1. Font-family
2. Font-size
3. Font-style: 이텔릭체
4. Font: 굵기
5. 웹폰트: fonts.google.com에서 받을 수있음
-html : import url(‘hp://….);
-css: font-family: ‘글씨체’;
6. color : 16진수, 색상이름, rgb, rgba
7. text-align: start, end, left, right, center, justify, match-parent
8. line-height
9. text-decoration
10. text-shadow
8강 박스모델
블록레벨 요소: 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소
1. Padding, border, margin 으로 구성됨
2. Box-sizing: borde rbox-테두리까지 포함해서 너비설정
Content-box 콘턴츠 영역안 너빗값을 지정합니다. 기본값입니다.
3. Box-shadow
4. Border-style – 3px solid rgb(75, 70, 70) 한번에 설정함
5. Border-radius
6. 웹문서 레이아웃 : block, inline, inline-block, none
7. Position: absolute 설정 후 left right bottom up 을 퍼센트로 지정함
- Position: static, relative, absolute(위치 설정 직접 하고 싶을때 주로 사용함), fixed
12강
플렉스 박스 레이아웃: 수평방향이나 수직방향 중 하나를 주축으로 정하고 박스배치
1. Display
- Display: flex: 컨테이너 안의 플렉스 항복을 블록 레벨 요소로 배치
- Display:inline-flex 컨에이너 안의 항목을 인라인 레벨 요소로 배치
2. Flex-direction
- Flex-direction: row
- Flex-direction: row-reverse
- Flex-direction: colum
- Flex-direction: row-reverse
3. Justify-content
- Justify-content: flex-start 주축의 시작점에 맞춰 배치
- Justify-content: flex-end 주축의 시작점에 맞춰 배치
- Justify-content: center 주축의 시작점에 맞춰 배치
- Justify-content: space-between 주축의 시작점에 맞춰 배치
4. Align-item
- Align-item: flex-start
- Align-item: flex-end
- Align-item: center
- Align-item: baseline
- Align-item: stretch : 클래스 항목을 늘려 교차축에 가득 차게 배치함
5. Align-content 플랙스 항목에 여러줄로 표시될때 교차축 기준의 배치 방법 지정
- Flex-start
- Flex-end
- Center
- Space-between: 첫번째 와 끝을 시작과 끝에 맞춤
- Spacearound: 모든 항목을 교차축에 같은 간격으로 배치
- Stretch: 늘리기
Css그리드 레이아웃: 수평이나 수직 방향 어디로든 배치가능
15강 js
'web 개발 > 프론트엔드' 카테고리의 다른 글
| <css> 기본 세팅 (0) | 2023.01.04 |
|---|---|
| <css> css 자주 쓰는 것 정리 (0) | 2023.01.04 |