토이 프로젝트/사이트 마크업(클론 코딩)3 사이트 따라 만들기 part.3 이미지를 정렬하는 방법 1. 단순히 가로로 정렬하는 경우 (좌우 여백 맞춰서 꽉채우기) 핵심 속성 : {display: flex} {justify-content: space-between} 위의 경우는 이미지 3개를 가로로 단순 정렬하면 된다. 여기서 포인트는 이미지들의 여백과 우측 이미지가 영역에 꽉차도록 우측 정렬되도록 하는 것이다. 1. html코드 로 3개의 img를 하나로 묶고, 를태그로 감싸서 세부적인 스타일을 적용할 수 있도록한다. 2. style 지정하기 banner 영역 전체의 여백과 크기를 지정한다. {margin-top;} 위의 컨텐츠 요소와의 간격을 지정한다. 를 선택해서 지정하기 a{float: left;} 가로로 일렬로 정렬한다. a{margin-right;} 요소간의 간격을 지.. 2022. 4. 26. 사이트 따라 만들기 part.2 사이트의 컨텐츠 영역 만들기 1. 컨텐츠 그룹핑 POPULAR ITEM 구성 : 좌측의 menu와 우측의 제품 정보 영역 menu는 POPULAR ITEM이라는 타이틀과 EXPEDITION와 2개의 카테고리로 이루어짐 > 전부 텍스트 제품 정보 영역은 제품 이미지와 제품명, 제품 가격이 하나의 그룹으로 4개가 정렬됨. > 이미지와 텍스트 2. 선택자를 사용하여 그룹을 지정. /*전체 컨텐츠 영역*/ /*popular item 전체*/ /*popular item 안에서 menu 부분*/ /*popular item 안에서 제품 정보 영역*/ 3. 하위의 요소들을 나눈다. title부분은 태그를 사용한다. menu의 경우 함께 정렬되기 때문에 태그를 사용한다. 1. 태그를 이용한 방법 제품 정보 영역 전체를 .. 2022. 4. 25. 사이트 따라 만들기 Part.1 사이트보고 분석해서 그대로 따라 만들어보기 1. 기본셋팅 보통 사이트를 제작할 때 필수적으로 생성하는 폴더 3가지 css css폴더 안에 꼭 들어가는 2가지 css파일 reset.css - 필수 style.css - 외부스타일시트(일반적으로 다들 사용함) 사이에 링크를 걸어서 연결 js images 2. 사이트 구조 분석 큰 분류부터 먼저 html문서에서 작성하고 세부적인 요소들을 만든다. 크게 나누면 상단부분 메인이미지 컨텐츠 하단부분 은 큰 영역을 지정한 것이다. 크게 4파트로 나눈 후 그 안에서 또 세분화와 조직화를 한다. 이때는 요소별로 같이 정렬해야하는 것들끼리 묶어서 그룹핑한다. 예를 들어, 상단 부분은 상단의 top과 navigation부분으로 나눌 수 있다. 그리고 top부분은 또 다시 l.. 2022. 4. 23. 이전 1 다음
