728x90
반응형
웹디자인 실기 준비를 위한 개인공부입니다!
완성화면
코드 작성 순서
1. HTML에서 전체적인 구조를 잡는다. 여기서 id를 정확하게 정해준다.
<div id="wrap">
<header id="header"></header>
<section id="banner"></section>
<section id="content1"></section>
<section id="content2"></section>
<footer id="footer"></footer>
</div>- 각 컨텐츠가 들어갈 전체 페이지 wrap
- rogo와 nav가 들어갈 header
- 슬라이드 형식의 이미지가 들어갈 banner
- 컨텐츠1이 들어갈 content1
- 컨텐츠2가 들어갈 content2
- 푸터가 들어갈 footer
2. 구조가 잡혔다면 각 부분에 들어갈 부분들을 작성한다.
<header id="header">
<h1><a href="#"><img src="images/logo.jpg" alt="롯데월드"></a></h1>
<nav class="nav">
<ul>
<li><a href="#">즐길거리</a></li>
<li><a href="#">요금/우대혜택</a></li>
<li><a href="#">참여프로그램</a></li>
<li><a href="#">이용가이드</a></li>
<li><a href="#">소통서비스</a></li>
</ul>
</nav>
</header>
<!-- header -->- 가장 상단의 로고가 들어가는 부분에는 a태그를 사용하여 링크를 걸을 수 있게 하고 alt를 꼭 작성해준다.
- 메뉴는 id가 아닌 class 속성을 사용하여 nav라고 명명해주고, 각 메뉴들을 ul과 li를 통해 작성한다.
<section id="banner">
<img src="images/banner01.jpg" alt="메리크리스마스">
</section>
<!-- banner --><section id="content1">
<article class="notice">
<div class="not1"><strong>롯데월드 소식 |</strong></div>
<div class="not2">뉴스 . 공지</div>
<ul>
<li><a href="#">그럴싸진관 미라클</a><span>2022.09.03</span></li>
<li><a href="#">이용 요금 조정 미라클</a><span>2022.09.03</span></li>
<li><a href="#">드림스테이지 힘내 미라클</a><span>2022.09.03</span></li>
<li><a href="#">드림스테이지 힘내 소주한잔 미라클</a><span>2022.09.03</span></li>
</ul>
</article>
<figure class="ad">
<img src="images/ad.jpg" alt="온종일 혜택">
</figure>
</section>
<!-- content1 -->
- 컨텐츠 1번이 들어갈 부분에는 article class를 사용했고, notice로 명명한 뒤 제목을 not1, not2로 나누어준다. ul과 li는 notice 안에 들어가도록 작성한다.
- 날짜부분은 추후에 css를 통해 설정할 수 있기 때문에 span태그를 적용해주었다.
- 이미지가 들어가는 content2부분은 figure를 사용해주었다.
- <figure> 태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용한다.
<section id="content2">
<h2>특별한 경험</h2>
<ul>
<li>
<a href="#">
<img src="images/s1.jpg" alt="연간회원 안내">
<span>연간회원 안내</span>
</a>
</li>
<li>
<a href="#">
<img src="images/s2.jpg" alt="프리미엄투어">
<span>프리미엄투어</span>
</a>
</li>
<li>
<a href="#">
<img src="images/s3.jpg" alt="공연참여 프로그램">
<span>공연참여 프로그램</span>
</a>
</li>
<li>
<a href="#">
<img src="images/s4.jpg" alt="단체프로그램">
<span>단체프로그램</span>
</a>
</li>
</ul>
</section>
<!-- content2 -->- 텍스트는 css적용을 위해 span을 사용해준다.
<footer id="footer">
<address>
<ul>
<li>서울특별시 송파구 올림픽로 240 롯데월드 | 대표자: 박동기 | 사업자등록번호: 229 - 093 - 00392</li>
<li>통신판매업신고번호: 384-02894-90348 | 전화: 02-3045-3943</li>
</ul>
<p>Copyright2018 Lotterworld, All Right RESERVED.</p>
</address>
</footer>- 주소에는 address태그를 사용해준다. 자동으로 기울기가 적용되기 때문에 이것을 초기화 하기 위해서는 #footer address에서 font-style: normal;을 사용해준다.
여기까지 작성했다면 HTML은 완성! 다음은 CSS다.
CSS
1. reset을 적용해준다. margin과 padding, li style, text color와 decoration 등을 적용한다.
2. HTML에서 잡았던 구조를 그대로 복사하여 적용할 준비를 한다.
/* reset */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.clearfix::before, .clearfix::after {
display: block; content: ''; clear: both;
}
/* layout */
#wrap {
}
#header {
}
#banner {
}
#content1 {
}
#content2 {
}
#footer {
}3. 마찬가지로 각 구조별로 모든 부분을 적어둔다. 그 후에 Css를 적용한다.
/* header */
#header h1 {}
#header h1 img{}
#header .nav {}
#header .nav ul {}
#header .nav li {}
#header .nav li a {}/* reset */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.clearfix::before, .clearfix::after {
display: block; content: ''; clear: both;
}
/* layout */
#wrap {
width: 1000px;
margin: 0 auto;
height: 1000px;
}
#header {
}
#banner {
}
#content1 {
}
#content2 {
}
#footer {
}
/* header */
#header h1 {
float: left;
}
#header h1 img{
width: 130px;
}
#header .nav {
float: right;
}
/* 플롯을 쓰면 구조가 깨지기 때문에(=하이트값이 0됨) HTML의 해당부분에 클리어픽스(=header) */
/* clearfix : 플롯으로 인해 깨진 영역을 잡아주기 위한 속성. 상위(부모)박스에 넣어준다. */
#header .nav ul {}
#header .nav li {
float: left;
}
/* li한테도 플룻방식을 주었기 때문에 li의 부모박스인 ul에게도 clearfix를 준다. */
#header .nav li a {
display: block;
padding: 40px 20px;
}
/* inline은 각 요소를 모아 한줄로
block은 스스로 혼자 한줄
inline block은 block처럼되지만 상하좌우 간격지정 가능*/
/* banner */
#banner {}
#banner img {
width: 100%;
}
/* content1 */
#content1 {
margin-top: 15px;
}
#content1 .notice {
float: left;
width: 48%;
height: 220px;
margin-right: 2%;
border: 1px solid #cacaca;
}
#content1 .notice .not1{
display: inline-block;
margin: 13px;
font-size: 20px;
}
#content1 .notice .not2{
display: inline-block;
font-size: 20px;
}
#content1 ul {
}
#content1 ul li {
padding: 10px;
margin-left: 4px;
}
#content1 ul li span {
/* align-items: right;
margin-left: 150px; */
}
/* 물어볼 부분 */
#content1 .ad {
float: left;
width: 49%;
margin-right: 0;
}
#content1 .ad img {
width: 100%;
display: block;
}
/* display block을 주지 않으면 이미지가 인라인 구조이기 때문에 여백이 생긴다.
여백을 없애려면 block을 주면 된다. */
#content2 {
margin-top: 25px;
}
#content2 h2 {
margin-bottom: 10px;
}
#content2 ul {}
#content2 li {
float: left;
width: 24.25%;
margin-right: 1%;
}
#content2 li:last-child {
margin: 0%;
}
/* flot 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 기본 레이아웃 흐름에서 벗어나
요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것. * 보통 가로 정령하기 위해 사용하게 된다. */
#content2 li img {
width: 100%;
}
#content2 li span {
display: block;
padding: 10px 0;
}
/* 문자이기 때문에 인라인 구조. 패딩이 먹히지 않기 때문에 block을 사용한다. */
/* footer */
#footer {
border-top: 1px solid #ccc;
margin-top: 30px;
padding-top: 20px;
padding: 30px 0;
}
/*
컨텐츠 - 패딩 - 보더 - 마진 순 보더를 기준으로 안쪽 바깥쪽이 구분된다.
margin: 보더 안쪽 여백
padding: 보더 바깥쪽 여백*/
#footer address {
font-style: normal;
color: #666;
}
#footer address ul {
}
#footer address li {
line-height: 1.7;
}
#footer address p {
text-transform: uppercase;
padding-top: 20px;
}header
플롯을 쓰면 구조가 깨지기 때문에(=하이트값이 0됨) HTML의 해당부분의 상위(부모) 박스에 clearbox(=header)를 작성해야한다.
clearfix : 플롯으로 인해 깨진 영역을 잡아주기 위한 속성. 상위(부모)박스에 넣어준다.
li한테도 플룻방식을 주었기 때문에 li의 부모박스인 ul에게도 clearfix를 준다.
inline은 각 요소를 모아 한줄로 만들어준다.
block은 스스로 혼자 한줄이 된다.
inlin block은 block처럼 되지만 상하좌우 간격지정이 가능하게 된다.
content
이미지의 경우 display block을 주지 않으면 이미지가 기본적으로 인라인 구조이기 때문에 여백이 생기게 된다.
여백을 없애기 위해서는 block요소로 바꾸어주면 되기때문에 block을 준다.
flot 프로퍼티는 해당 요소를 다음 요소 위에 떠있게 한다.
기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. 보통 가로로 정렬하기 위해 사용된다.
span부분의 경우 문자기이 때문에 기본적으로 인라인 구조이며, 이 상태는 패딩이 먹히지 않기 때문에 block을 사용한다.
padding 과 margin
컨텐츠 - 패딩 - 보더 - 마진 순으로 보더를 기준으로 안쪽과 바깥쪽이 구분된다.
margin : 보더 안쪽의 여백을 의미한다.
padding : 보더 바깥쪽 여백을 의미한다.
참고 유투브 웹스토리보이 : https://youtu.be/K_Qx0lDcou0