학습한 내용

진도와 학습한 내용을 작성, 소스파일을 실행한 결과 첨부
과제(지난 주 HTML(설계도면실습), CSS실습, 기본레이아웃실습) 제출 / github

1. 박스모델
   -마진. 패드. 몰더. 컨텐츠

1) 마진/ 패드 이동은?
margin-left: 100px;
padding-left: 100px;

• 이동은 빈 공백을 기준으로 100px 만큼 이동한 것.

2) 코드 심플하게 잘쓰기 : 코드 분량이 길어질 수록 브라우저 로딩 속도가 느려진다.
margin: 100px 0 0 100px;
padding: 100px 0 0 100px;

=
margin-left: 100px;
margin-top: 100px;
padding-left: 100px;
padding-top: 100px;

3) command+/ -> 주석처리 빠르게

2. 마진 병합
   
   -형제지간 / 부모자식간
   1).margin-one {
   width: 100%;
   height: 100px;
   background-color: yellow;

   margin-bottom: 100px;

   }

.margin-two {
width: 100%;
height: 100px;
background-color: blue;

margin-bottom: 100px;

}
2).margin-parent {
width: 300%;
height: 300px;
background-color: yellow;
}

.margin-child {
position: absolute;

width: 100%;
height: 100px;
background-color: blue;

margin-bottom: 100px;

3. display
   
   1) inline
   2) block
   3) inline-block

4. vertical-align

5. position

• 1차원, 2차원, 3차원 차이
• static
• fixed
• relative
• fixed

학습한 내용 중 어려웠던 점 또는 해결못한 것들

1. 마진 병합, 디스플레이 부분 보충 학습 필요. : 비주얼적 요소를 적용했을때 상상이 잘 안됨.
2. z-index, float과 clear, overflow, flex, 중앙정렬 하는 방법, 실습 : 기본 레이아웃 내일 추가로 진행 할 것.

해결방법 작성

1. 카피켓 사이트를 기반으로 연습하기, 시간 더 들여서 강의 다시보기

학습 소감

쉬운 카피켓 사이트로 연습하기...

카피켓 사이트 : 민병철 유폰
https://app.uphone.co.kr/v2.html?mc=SAGG_phonekw&utm_source=google_pc&utm_medium=sa_lt&utm_campaign=N_SA_%EC%A0%84%ED%99%94%EC%98%81%EC%96%B4%EB%8C%80%ED%91%9C&utm_content=A-01.%EB%8C%80%ED%91%9C%EC%A0%84%ED%99%94%EC%98%81%EC%96%B4&utm_term=%EC%A0%84%ED%99%94%EC%98%81%EC%96%B4&gclid=CjwKCAjw47eFBhA9EiwAy8kzNPnV_Ft8xq71u3r2d7E0vjI70i-f_hP6XGpl6mnsO1jkobJlqEOegBoCe0wQAvD_BwE