😎 수업 시작할 때 셋팅해야 하는 페이지 😎
🎯숙제 제출하는 시트 : 이동하기
🎯새로운 코드펜 : https://codepen.io/pen
😊 수업 코드펜 & 개념😊
💎1일차 단축키 연습 : 바로 이동하기
🎯수업 코드펜: 이동하기
💎 2일차 태그와 주석: 바로 이동하기 (⭐div의 css 기본 특성까지!)
🎯 수업 코드펜
📌 태그와 주석
📌 css작성 방법
📌 body크기
💎 3일차 block & inline & inline-block: 바로 이동하기
🎯수업 코드펜
📌 세 가지 한 번에 비교
📌 block
width: auto --> 100% (상위 엘리먼트를 100% 상속받는다.)
heght: auto --> 0 (하위 엘리먼트 크기를 갖는다. )
📌 inline (너비, 높이 커스텀X)
width: auto --> 0 (하위 엘리먼트 크기를 갖는다. )
heght: auto --> 0 (하위 엘리먼트 크기를 갖는다. )
📌 inline-block (너비, 높이 커스텀O)
width: auto --> 0 (하위 엘리먼트 크기를 갖는다. )
heght: auto --> 0 (하위 엘리먼트 크기를 갖는다. )
💎 4일차 css선택자 : 바로 go!
🎯수업 코드펜
📌 상위엘리먼트와 하위엘리먼트를 부르는 명칭 & css 선택자
[엘리먼트 명칭]
부모 엘리먼트 : 나를 인접하여 감싸는 엘리먼트
자식 엘리먼트 : 내가 인접하여 감싸는 엘리먼트
후손 엘리먼트 : 내가 감싸는 모든 엘리먼트
형 엘리먼트 : 바로 위에 인접하는 엘리먼트
인접동생 엘리먼트 : 바로 아래에 인접하는 엘리먼트
[css 선택자]
> : 자식선택자
띄어쓰기 : 후손선택자
+ : 인접동생선택자
📌 상속되는 텍스트 속성
- 적용된 태그보다는 아래로 한 칸 내려가서 적용된다.
그래서 폭포처럼 타고 내려가 적용된 태그 하위요소 태그에 모두 적용된다.
📌 클래스선택자 --> 응용
[젠코딩]
{} : 텍스트
$ : 1번~n번까지
> : 자식엘리먼트
+ : 인접엘리먼트
() : 그룹
* : 여러개
[] : 속성
. : 클래스선택자
💎 5일차 inline-block 여백 제거 & css 서열 & a태그 : 정리 완료~~
🎯수업 코드펜
- 해당 엘리먼트의 폰트 사이즈를 0으로 적용
1순위 인접 + 클래스 > + .
2순위 클래스 .
3순위 인접 >
4순위 태그 div
같은 동급끼리라면
- 아래에 있는 것
- 개발자 모드에 있는 것
이 우선시된다.
📌a태그
1. 사이트 이동
2. display: inline;
3. href=""안에 적혀있는 링크를 '하이퍼링크'라 부른다.
4. 클릭할 모양이 필요하므로 태그 안에 내용물이 있어야 한다.
5. target이라는 속성이 기본적으로 들어있고 기본값은 _self이다.
_self : 내가 보고있는 페이지가 바뀌며 페이지 이동
_blank : 새페이지가 열리며 페이지 이동
6. title 속성은 마우스를 링크에 올렸을 때 나타나는 부가 설명 박스이다.
💎 6일차 구글 폰트 & padding과 margin 쌍둥이 & 정렬: 방법들 정리 완료
🎯수업 코드펜
- padding : 크기와 너비에 포함되는 여백
- margin : 오브젝트와의 거리를 두기위한 여백
(텍스트 정렬)
- 좌측 정렬: text-align: left;
- 우측 정렬: text-align: right;
- 중앙 정렬: text-align: center;
(도형 정렬)
- 좌측 정렬: margin-right: auto;
- 우측 정렬: margin-left: auto;
- 중앙 정렬: margin-right: auto; margin-left: auto;
💎 7일차: 마켓컬리 예제를 만들며 실무 팁 + 구글 아이콘 삽입
🎯수업 코드펜
💎 8일차 : 마켓컬리2 - 텍스트 세로정렬, 코드 짜는 순서
🎯수업 코드펜
✨ 마켓컬리 상단바 구현 (span아이콘의 정렬 빼고 모두 완성) (2 repeat)
✨과제: 마켓컬리 다시 구현(span 아이콘 정렬까지 모두 완성) (3 repeat)
아이콘의 세로 정렬 : position: absolute; top: 50%; transform: translateY(-50%);
**position: absolute;의 상위 요소는 position: relative;의 속성값을 가져야 한다.
💎 9일차 : flex --> flex-container와 flex-item
🎯수업 코드펜
📌flex 시작(+box-sizing: border-box)
🐸Flexbox Froggy <-- flex 정렬의 모든 것을 연습하는 곳