[패스트캠퍼스] 웹퍼블리싱 강의 - 2주차 학습내용

[내일배움카드] x [패스트캠퍼스] - 2주차 학습내용

 

[Part 3. HTML5, CSS3 기본 문법]

Part 3에서는 본격적으로 코딩에 입문한다. (｡･∀･)ﾉﾞ

 

파일설치 및 관리부터 HTML, CSS의 모든 것 -!
(HTML 태그, CSS 속성, 연결 및 반응형까지!)이미 알고 있있지만,
혹시 내가 잘못알고 있는게 있을 수도 있고,
초급부터 다시 시작한다는 마음으로 Part 3 66강의를 들었다.

 

 

 

Chapter 1. HTML5를 활용한 웹 문서의 뼈대 세우기

 

* HTML 학습 내용

• head, body 태그의 구성
• 서식 태그(제목 / 문단 / 목록)
• 서식 태그(강조 / 링크)
• 주석
• 이미지 / 동영상 / 오디오 태그
• 테이블 태그(기본 / 병합 / 제목 & 본문 분리)
• 폼태그(input / select 등..)
• 그룹화 태그(div)

 

 

Chapter 2. CSS3를 활용한 웹 문서 스타일링

 

* CSS 학습 내용

• 태그 선택자(자손, 자식, 순서, 속성, 클래스, 아이디, 가상)
• block, inline요소 특징 및 inline요소 block화
• 서식 css
• 배경 css
• 여백(바깥, 안쪽) 설정
• 테두리 설정
• 요소 가로 가운데 배치
• 자식콘텐츠 넘침 처리
• 구글 웹폰트 연결
• 폰트어썸 아이콘 연결
• rgb 색상 표기법 / 16진수 색상 표기법
• 자동완성기능
• css 초기화하기
• float
• 가상선택자
• position
• z-index 순서 정하기
• opacity 투명도 조절
• rem, em 글자크기 관련 단위
• vw, vh, vmin, vmax 화면크기 관련 단위
• object-fit 특정 영역 안에 자식요소 꽉 채우기
• txt-shadow 글자에 그림자 설정
• box-shadow 블록요소에 그림자 설정
• border-radius 모서리 둥글게 처리하기
• gradient 배경에 그라데이션 색상 적용하기
• filter 다양한 그래픽 효과 지정

 

 

Chapter 3. 인터랙티브 UI 효과 적용

 

* Transform 학습 내용

• 2d 변형
• 3d 변형
• transform-origin 중심축 변경
•  transition 전환효과
•  transition 축약문
• animation 자동모션
• 비트맵, 백터방식의 그래픽 차이점
• svg 기본 사용법
• svg 모션처리
• 미지어쿼리를 활용한 반응형웹

 

강의 타이틀만 봤을 때 바로 떠오르지 않는다면,

다시 듣는게 좋을 것 같다.

학습 리뷰 쓰다가 svg 강의 다시 들어야 할 것 같다고 생각...! 🤣

 

 

 

[Part 4. 효율적인 작업을 위한 확장스킬]

 

Part 4에서는 css의 꽃이라 생각하는-!

퍼블 인생 flex를 사용전과 후로 나눌 수 있는-!대망의 flex 수업이 진행되었다.

 

N년전 (그래봤자 3년차ㅋ) 라떼는(?) position만 쓰게했는데
점점 반응형 추세로 바뀌면서 flex도 사용할 수 있게 되었다!!
현실에서 못하는 flex.. 퍼블로라도 해보자 💥💥

 

 

* Flex 학습 내용

• flex, flex-direction 기본축 설정
• flex-wrap 줄바꿈 설정
•  flex-flow 기본축과 줄바꿈 설정
• justify-content 기본축 정렬
• align-content 반대축 정렬
• order 자식요소 순서지정
• flex-grow 안쪽여백의 증가폭 설정
• flex-shrink 안쪽여백의 축소폭 설정
• flex-전체 넓이값 비율 설정

 

 

사진 한장으로 요약 ↓ ↓

+ 생각해보니.. 태그를 개발자 도구 열었을 때만 확인이 되네 ◑﹏◐//