20210712

choigyeongshin·2021년 7월 12일

학습한 내용

메뉴 버튼 제작

pc버전에서는 x축으로 모바일 버전에서는 y축으로 정렬되는

pc버전

display: felx;
justify-content: space-between;
align-item: center;

모바일 버전

flex-direction: column;
align-items: flex-start;

덴마크 쇼핑몰

pc 버전

.intro nav ul li {dispay: flex;}

모바일버전

.intro {display: felx;}

bootstrp

flex-wrap: wrap;
justify-content: space-between;

미디어쿼리를 적용하는 세가지
css파일 안쪽에 미디어쿼리 코드 기입(@media() and () {})
모바일 버전용 새로운 css작성
style 태그 사용

 <style media="()and()">

참조사이트
https://flexbox.help/

학습내용 중 어려웠던 점

점점 코드가 길어지고 많아지다보니 헷갈리는것이 많고 여전히 느리다 보니 한번 작업하는데 오랜 시간이 걸림.

해결방법

늘 똑같지만 반복해서 해보고 다른 작업물(사이트)들을 참조해야겠다.

학습소감

점점 더 어려워지는 것 같다. 혼자서 생각해서 코드작성이 가능할까 싶다.

0개의 댓글