210712 개발일지

1) 학습한 내용
미디어쿼리 실습

github

메뉴 3등분 시, 디테일한 값 필요하므로 width: 33.3333%; 이용
li (block요소) -> display: flex;로 x축으로 정렬.
header태그는 position:fixed 써서 3차원, main태그는 포지션 쓰지않아 2차원->
먼저나오는 형제가 3차원이면 그다음 형제공간은 먼저 나온 형제 뒤쪽으로 들어감: 이럴땐 메인의 패딩 탑을 사용해서 헤더의 높이 만큼 값을줌

.intro {
    display: flex;
    position: fixed;

    width: 100%;
    height: 80px;
    background-color: #ffffff;
}

main {
    width: 100%;
    height: 2000px;
    background-color: gold;

    padding-top: 80px;
}

image와 image-info 사이의 공백 없애기 위해 vertical-align: middle; 사용

.column img {
    width: 100%;
    vertical-align: middle;
}

미디어쿼리 적용 3가지 (1,2 자주사용 됨)

1. css파일에 pc,모바일 같이 입력 @media코드 입력

2. 모바일 버전 파일 따로 분리하여 만드는 것(mobile.css, @media)

   <link rel="stylesheet" type="text/css" href="css/mobile.css">

3.html에서 스타일 태그에 미디어 속성값을 넣어서 입력

	<style media="(min-width: 300px) and (max-width: 700px)"> </style>

2) 학습내용 중 어려웠던 점
width, margin, padding의 활용

3) 해결방법
사용시 마다 다르게 적용됨으로 많은 실습을 해야할것 같다.

4) 학습소감
실습을 해나가면서 자주 사용하는 것들을 알수 있음.
처음에 이해하지 못했던 것들이 자주 사용해 보며 여러 예시를 써보았을때 이해 되는 부분들이 늘어남.