DevSSOM
HTML/CSS - 간단한 쇼핑몰 만들기 실습 2(본문 영역) 본문
쇼핑몰 본문 영역 만들기
<main>태그의 본문 영역에는 ‘엘리스에 오신 여러분 환영합니다! :)’ 를 기준으로 위아래에 각각 4개씩, 총 8개의 이미지가 있음. 이미지 영역에는 이미지와 타이틀 정보가 들어있음. 각 이미지 영역은 모두 크기가 동일하며, 각각의 배경색은 서로 다름.
기본 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쇼핑몰 본문 만들기</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<header id="intro">
<h1>
<a href="https://academy.elice.io/">엘리스 사전</a>
</h1>
<nav>
<ul>
<li class="one"><a href="#">캐릭터 소개</a></li>
<li class="two"><a href="#">줄거리</a></li>
<li class="three"><a href="#">부록</a></li>
</ul>
</nav>
</header>
<main role="main" id="main">
<article class="one">
<a href="#">
<img src="image1.png" alt="White Rabbit">
<h2>하얀토끼</h2>
</a>
</article>
<article class="two">
<a href="#">
<img src="image2.png" alt="Cheshire Cat">
<h2>체셔 고양이</h2>
</a>
</article>
<article class="three">
<a href="#">
<img src="image3.png" alt="Queen of Hearts">
<h2>하트여왕</h2>
</a>
</article>
<article class="one">
<a href="#">
<img src="image4.png" alt="Mad Hatter">
<h2>모자장수</h2>
</a>
</article>
<article class="text">
<p>엘리스에 오신 여러분 환영합니다! :)</p>
</article>
<article class="two">
<a href="#">
<img src="image5.png" alt="Dodo">
<h2>도도새</h2>
</a>
</article>
<article class="three">
<a href="#">
<img src="image6.png" alt="Caterpillar">
<h2>애벌레</h2>
</a>
</article>
<article class="one">
<a href="#">
<img src="image7.png" alt="Card Soldier">
<h2>카드병정</h2>
</a>
</article>
<article class="two">
<a href="#">
<img src="image8.png" alt="Golden Key">
<h2>황금열쇠</h2>
</a>
</article>
</main>
</div>
</body>
</html><main> 태그는 익스플로러에서는 지원하지 않기 때문에, role이라는 속성을 사용해서 main이라고 명시를 해줘야함. 각각의 이미지가 들어가는 영역은 <article> 태그를 사용했고, 또 그 각각은 거기서 <a>태그로 클릭이 되게 되어있어. 그리고 그 안에 이미지와 타이틀 정보가 들어있음. 그리고 중간의 <article>에는 텍스트를 넣기 위해서 <p>태그가 들어있음. class가 one, two, three, one, two, three로 반복됨.
>>>
하나하나 따라해보기
1. index.css 파일을 열어 아래 속성값을 작성. 전체 이미지 영역 #main article과 #main article a에 대한 css 속성을 작성. article이 가로 50%씩 차지하면서, float: left;로 왼쪽 정렬이 되는데, 부모 태그의 가로 만큼만 정렬될 수 있으니까, 한 줄에 50%, 50%로 2개까만 정렬되고 그 다음부터는 다음 줄로 줄바꿈되어 또 정렬되는 식임. 더 이상 정렬될 공간이 없다면, 자동적으로 다음 줄에 배치되게 되는 것.
#main article {
width: 50%;
height: 320px;
float: left;
}
#main article a {
display: block;
width: 100%;
height: 100%;
}2. 각 이미지 영역 #main article의 클래스에 서로 다른 배경색을 넣어주기.
#main article.one {
background-color: #532fa1;
}
#main article.two {
background-color: #a44789;
}
#main article.three {
background-color: #3ab6bc;
}3. 이미지 img 태그를 초기화. img 태그는 태생적으로 이미지 밑에 미세하게 공백이 생기는 경우가 있어. 그 공백을 제거해주기 위해서 vertical-align: middle; 값을 디폴트값으로 넣어줌. y축(수직) 정렬을 중앙으로 하겠다는 뜻으로, inline 요소들에서만 사용이 가능함.
img {
vertical-align: middle;
}
4. 이미지 자체 #main article img에 대한 크기도 지정. img 태그를 100%로 설정한다는 건, 부모 태그인 <a>태그의 크기 안에서 이미지의 가로 폭을 100%로 설정하겠다는 것. 그렇게 되면 높이 값은 원래 이미지가 가지고 있었던 크기 비율 그대로 설정됨.
#main article img {
width: 100%;
}5. 이미지 영역 내 타이틀 정보 #main article h2에 대한 css 속성을 작성. text-align: ceter; -> text는 x축으로 중앙 정렬.
#main article h2 {
color: #fff;
font-size: 25px;
text-align: center;
padding: 10px 0; /* 두개만 입력하면 '상하' '좌우'를 의미. 위쪽과 아래쪽에 10px씩 넣어준 것 */
}6. 중간의 텍스트 영역 #main article.text에 대한 css 속성을 작성.
#main article.text {
width: 100%;
height: 66px;
}7. #main article.text에 들어있는 <p> 태그도 디자인을 해줘.
#main article.text p {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 20px 0;
border: solid 1px #000;
}이 중간 text 부분을 크롬 개발자 도구에서 확인해보면
#main article의 width: 50%, height: 320px 부분이 찍찍 밑줄 그어져있고, 우리가 작성한 #main article.text의 width: 100%, height: 66px라는 새로운 값이 그 위에 생김. 이건 #main article.text 부분만 더 디테일하게 크기를 잡아준 것. 기존의 값은 무시하고 새로운 값으로 적용을 받고 있다는 걸 의미. 이런 방식으로 부분수정을 할 수가 있음.
결과 화면
