지난 시간에 이어서 본격적으로 컨텐츠를 넣어보는 과정을 해보겠습니다~! 우선 지난 html 의 header 태그에 구역을 생성해 id를 부여해 줍니다. 그리고 지정한 구역의 css에 크기와 background color 를 넣어 구역을 표기합니다. 이제 이 구역을 가운데 정렬해 줍니다. margin: 0 auto; 를 추가해도 되지만 이번에는 배웠던 FLEX를 사용해 보겠습니다. 부모태그에 flex 를 적용해서 중앙 정렬이 맞춰진 것이 확인됩니다. 이제 여기에 이미지를 넣어보겠습니다. 미리만든 이미지를 넣었습니다. 다만 이미지 사이즈가 조금 커서 구역을 벗어났습니다. 크롬창에서 확인했을때 Ctrl + Shift + C 를 누르면 개발자도구가 열리면서 마우스 커서를 갖다..........
쇼핑몰 만들기 / 웹 화면 구현하기 - 2에 대한 요약내용입니다.
자세한 내용은 아래에 원문링크를 확인해주시기 바랍니다.
원문링크 : 쇼핑몰 만들기 / 웹 화면 구현하기 - 2
네이버 블로그
티스토리
커뮤니티