$$config title: 모작페이지 keywords: - IT - ... $$ 위캔url: [웹1](https://slog.gg/p/9527)

#22.08.31 단계별 제작 -5분 : [열기](https://codepen.io/zxs4564/pen/vYjBNYJ?editors=1100) -10분 : [열기](https://codepen.io/zxs4564/pen/YzLKywx?editors=1100) -15분 : [열기](https://codepen.io/zxs4564/pen/JjvPYbb?editors=1100)

#네비바 다시 구현 -5분:[열기](https://codepen.io/zxs4564/pen/wvjwyLm?editors=1100) -10분:[열기](https://codepen.io/zxs4564/pen/PoeYRwE?editors=1100) -그리드 3개:[열기](https://codepen.io/zxs4564/pen/YzLKayV)

#단축키 저장: 컨트롤+s 미리보기: 컨트롤+e 다시 글쓰기: 컨트롤+e *★div > nav > ul : nav가 선택자. ul가 여러명 있으면 그 위에 부모를 선택자로 찝어준다. 그러면 그 아래 ul이 여러개 있어도 nav 안에 있는 ul만 찝어준다(최상위 엘리멘터, 최상위 바디) ex) div > nav > ul ul span : nav 안에 ul가 두 개 있다면 ul를 2개 찝어준다. *그리드를 잡을 수 있는 태그: div 자식인 엘리멘트 -> nav, header, section ㄴbody 안에 있는 div. ㄴdiv 안에 그리드를 잡아야 한다. ㄴa가 바뀌려면 a에 직접 줘야한다(동일한 건 다른 곳에서 빼주고) *ul에 인라인블럭 잘 안 줌(내용이 다르면 인라인블럭 줘야한다)-일렬로 정렬할때(한 줄에 사진 2개 있을때, ul이 2개일때) *line-heighr(행간) ㄴ부모: 컬러, 폰트사이즈 상속받는다. ㄴ인라인에서 사용 안된다. ㄴem은 행간 고정X(해당 태그 폰트의 상속을 받는다, a {font-size: 30px의 상속을 받는거} ㄴpx은 행간이 고정된다-그래서 부모한테 주면 안됨 ex) div > nav > ul의 경우. (거의 안 주는게 좋음) ㄴbody에 1.5~부터 주는게 좋음(반드시 body에 쓸 필요는 없다. 상황에 따라서 다름. 그러나 body에 주고 다른 태그에 주는 건 별로 좋지 못하다. 스판은 더 큰 거에 붙기 때문에 레이아웃이 깨질 수 있음. *Lorem 누르고 탭하면 영문 나옴(폰트 사이즈 잴 때 좋음) *css에서 html, body { font-family: '폰트이름';} 하면 폰트 적용 가능. *a는 인라인이다. span은 a의 상속을 안 받는다. 그래서 디스플레이 인라인블럭 각자 주어야함. *앞에 한글폰트, 그 뒤에 영문, 그 다음 산스-셀프(기본폰트) ㄴhtml에 영문(구글폰트)/css에 한글폰트 *아이콘 가져올때 레이아웃 깨지면 버티컬 얼라인vertical-align을 주면 됨 ㄴex) div > nav > ul span * ㄴ폰트취급되서 클래스 다시 달아야함. fa~fa까지 고유이름이라 그 뒤에부터 복붙해야함 *패딩줄때 높이주면 안됨 *마진 : 사이에 공간줄 때 사용 패딩 : 위아래 공간줄 때 사용 이미지 퍼오기(풀케이스캡처) *F12 누른 후 세 개 점 클릭하고 왼쪽에 있는 거 누르기, 휴대폰 같은 형태에 마우스 표시 있는 거 누른 후(마우스커서 있는 거) -> 그 다음 컨트롤+쉬프트+T 누른 다음 이미지 누르면 고유 주소 나옴, 그 주소 클릭하면 이미지 뜸 *이미지는 디스플레이 인라인블럭 사용 할 수 있다. 고정형 가능. ㄴ고정형 1920px로 ㄴ디버그모드: 코드에 마우스 클릭, 컨트롤+s 누르고 스크린표시에 세번째(디버그모드) ㄴ이미지는 인라인블럭이라서 텍스트얼라인 센터+마진0 오토 넣어줘야 함 ㄴ마진은 완성된 코드에서 사용해야 한다. *텍스트 쓸 때 스판(인라인도) 안에 h, p태그 쓰면 안됨 *코드 줄이는 법 div > scetion > .a, div > scetion > .b, *텍스트는 인라인 -> 텍스트얼라인: 센터 줘야함 #마켓컬리 단계별 -1단계: [nav바 그리드](https://codepen.io/zxs4564/pen/abYrmjo?editors=1100) -2단계: [레이아웃 잡기](https://codepen.io/zxs4564/pen/qBoGQXK) -3단계: [그리드 잡기](https://codepen.io/zxs4564/pen/qBoGQXK?editors=1100) ㄴ그리드 잡을때 가운데 마진 잡아주고, 양 끝에는 패딩 넣어주기 ㄴ★section 다 모아서 디스플레이 인블럭 넣어주기 그래야 한 줄로 모임★ ㄴarticle한테 폰트 0px; 줘야 사이에 공간이 생김 ㄴddd한테 마진 양 옆을 줘야 함. 대신 zzz와 ccc한테는 패딩 뺀다. -4단계: [마켓컬리 따라하기](https://codepen.io/zxs4564/pen/qBoGQXK?editors=1100) #22.08.29 수업 마켓컬리 -[그리드잡기, 네비바](https://codepen.io/zxs4564/pen/WNzqWXj) -[네비바, 수정한거](https://codepen.io/zxs4564/pen/WNzqWXj?editors=1100) -[탑바 끝](https://codepen.io/zxs4564/pen/WNzqWXj?editors=1100) -[이미지넣기](https://codepen.io/zxs4564/pen/mdxZYzp) #혼자서 하는 마켓컬리 -그리드 잡기: [url](https://codepen.io/zxs4564/pen/QWmXOeG?editors=1100) ㄴ현재 막혔음,, -ul 쓰면 안 됨,, 결국 3가지 카테고리로: [url](https://codepen.io/zxs4564/pen/QWmXOeG?editors=0100) #다시 시도하는 마켓컬리 -[네비바](https://codepen.io/zxs4564/pen/KKojYgm) ㄴhtml 태그 맞는건지 잘 모르겠음,, ㅠ