2월 28일 영역별 레이아웃 만들기 정답 + 사이트 레이아웃 만들기

GIMP

GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor

www.gimp.org

무료 그래픽 툴

선택자 지정 시 구체적으로 명확하게 명시해 주는 것이 좋다.
색이 지정되어 있지 않으면 그림판에서 색을 뽑아서 확인한다.
탑-다운 접근법 : 큰 문제를 쪼개서 시작하는 것이 필요하다
float 영역이 나누어져 있으면 서로 간섭을 하지 않는다.
개발자 도구를 통해서 똑같이 적용해 보는 연습 해 보기
오류를 찾을 때도 사용

CSS 파일

@charset "UTF-8";

/* 전체 요소에 대한 처리 */
* {
    padding: 0;
    margin: 0;
}

/* 리스트 요소 처리*/
li {
    list-style: none;
}

/* 구성 영역의 레이아웃 처리*/

header {
    height: 115px;
}

section {
    width: 960px;
    height: 1510px;
    margin: 0 auto;
}

footer {
    height: 150px;
}

/* header의 행간 레이아웃 처리*/

div#h_top {
    width: 1000px;
    height: 75px;
    margin: 0 auto;
    /* 가운데 정렬 */
}

div#h_bottom {
    height: 40px;
    background-color: rgb(29, 48, 108);
}

/* h_top의 내부 구성 요소 */

div#h_top>h1 {
    float: left;
    height: 75px;
    line-height: 75px;
}

div#h_top>div.sns_banner {
    float: right;
    width: 190px;
    height: 75px;
    line-height: 75px;
    margin-left: 15px;
}

div#h_top>div.lang_select {
    float: right;
    height: 75px;
    line-height: 75px;
    margin-left: 15px;
}

div#h_top>nav.t_nav {
    float: right;
    height: 75px;
    line-height: 75px;
}

/* float는 서로의 영역에 간섭하지 않는다. */
div#h_top>nav.t_nav>ul>li {
    float: left;
    margin: 0 5px;
}

/* h_bottom의 내부 구성 요소 */
div#h_bottom>nav.m_nav {
    width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

div#h_bottom>nav.m_nav>ul>li {
    float: left;
    color: white;
    width: 160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

/*  section의 내부 구성 요소 */
section>div {
    width: 960px;
    margin-bottom: 35px;
}

section>div#s_box1 {
    height: 450px;
}

section>div#s_box2 {
    height: 250px;
}

section>div#s_box3 {
    height: 150px;
}

section>div#s_box4 {
    height: 330px;
}

section>div#s_box5 {
    height: 150px;
}

/*  s_box1 의 내부 구성 요소 */
div#s_box1>div.image_slider {
    float: left;
    width: 720px;
    height: 450px;
    background-color: lavenderblush;
}

/*선 포함 242px box-sizing 필요!*/
div#s_box1>div.t_banner1, div#s_box1>div.t_banner2 {
    float: left;
    width: 240px;
    height: 225px;
    border: 1px solid gray;
    box-sizing: border-box;
}

/*  s_box2 의 내부 구성 요소 */

div#s_box2>div {
    float: left;
    width: 465px;
    height: 250px;
    margin-right: 30px;
    background-color: beige;
}
/*  마진이 포함되어서 아래로 내려갔기 때문에 마진을 없애준다. */
div#s_box2>div:last-child {
    margin-right: 0;
}

/*  s_box3 의 내부 구성 요소 */ 

div#s_box3>div {
    width: 320px;
    float: left;
    height: 150px;
}

div#s_box3>div:nth-child(1) {
    background-color: red;
}

div#s_box3>div:nth-child(2) {
    background-color: green;
}

div#s_box3>div:nth-child(3) {
    background-color: blue;
}

/*  s_box4 의 내부 구성 요소 */

div#s_box4>div {
    float: left;
    width: 465px;
    height: 330px;
    margin-right: 30px;
    background-color: rgb(150, 196, 240);
}

/*  마진이 포함되어서 아래로 내려갔기 때문에 마진을 없애준다. */
div#s_box4>div:last-child {
    margin-right: 0;
}

/*  s_box5 의 내부 구성 요소 */

div#s_box5 {
    background-color: lightsalmon;
}

/*  footer 행간 레이아웃 */
div#f_top {
    height: 45px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

div#f_bottom {
    height: 105px;
}

/*  f_top 의 내부 구성 요소 */

div#f_top>div#f_top_wrap {
    width: 960px;
    margin: 0 auto;
}

div#f_top_wrap>nav.f_nav {
    float: left;
}

div#f_top_wrap>nav.f_nav>ul>li {
    float: left; 
    height: 45px;
    line-height: 45px;
    margin: 0 15px;

}

/*  f_bottom 의 내부 구성 요소 */

div#f_bottom {
    width: 1000px;
    margin: 0 auto;
    padding-top: 30px;
    box-sizing: border-box;
}

div#f_bottom>h2 {
    float: left;
    margin-right: 80px;
}

div#f_bottom>div.f_site {
    float: right;
}

html 파일

<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>ICIA 커피샵</title>
	<link type="text/css" rel="stylesheet" href="CSS/icia-none_style.css">
</head>

<body>
	<header>
		<div id="h_top">
			<h1>로고</h1>
			<div class="sns_banner">sns</div>
			<div class="lang_select">언어선택</div>
			<nav class="t_nav">
				<ul>
					<li>로그인</li>
					<li>회원가입</li>
					<li>고객센터</li>
					<li>쇼핑몰</li>
				</ul>
			</nav>
		</div>
		<div id="h_bottom">
			<nav class="m_nav">
				<ul>
					<li>ICIA COFFEE</li>
					<li>COFFEE STORY</li>
					<li>PRODUCT</li>
					<li>FRANCHISE</li>
					<li>EVENT & NEWS</li>
					<li>STORE</li>
				</ul>
			</nav>
		</div>
	</header>
	<section>
		<div id="s_box1">
			<div class="image_slider">이미지슬라이더</div>
			<div class="t_banner1">커피한잔</div>
			<div class="t_banner2">가맹안내</div>
		</div>
		<div id="s_box2">
			<div class="ediya_menu">ICIA추천메뉴</div>
			<div class="new_notice">NEWS & NOTICE</div>
		</div>
		<div id="s_box3">
			<div class="fund_box">2019ICIA희망기금</div>
			<div class="recuit">ICIA커피샵 채용등록</div>
			<div class="music_festa">ICIA뮤직페스타</div>
		</div>
		<div id="s_box4">
			<div class="b_water">B,WATER캠페인</div>
			<div class="store">STORE</div>
		</div>
		<div id="s_box5">신뢰와 상생</div>
	</section>
	<footer>
		<div id="f_top">
			<div id="f_top_wrap">
				<nav class="f_nav">
					<ul>
						<li>채용안내</li>
						<li>제휴 / 제안</li>
						<li>이용약관</li>
						<li>개인정보 처리방침</li>
						<li>이메일 수집거부</li>
						<li>사이트맵</li>
						<li>점주의 방</li>
					</ul>
				</nav>
			</div>
		</div>
		<div id="f_bottom">
			<h2>로고</h2>
			<div class="f_site">패밀리사이트</div>
			<address>주소</address>
			<p>카피라이트</p>
		</div>
	</footer>
</body>

</html>

자꾸 적용되지 않는 이유가 오타와 숫자를 잘못 작성하였기 때문이라는 것을 알았다.
선택자 오타나지 않게 잘 작성하고 순서대로 차례대로 쪼개서 작성하는 연습하기!

저작자표시 비영리 변경금지

'공부기록' 카테고리의 다른 글

4월 20일 Java - 내부클래스, 익명클래스, GUI (0)	2023.04.20
4월 14일 - 주소록 프로그램 구현 (0)	2023.04.14
2월 27일 (2) 실습 + 반응형 웹 만들기 (0)	2023.02.27
공부팁 - 영타 연습 사이트 (0)	2023.02.12
2월 10일 (2) 컴퓨터 기본 (0)	2023.02.10

새롭게 공부시작하기

2월 28일 영역별 레이아웃 만들기 정답 + 사이트 레이아웃 만들기

'공부기록' 카테고리의 다른 글

티스토리툴바

2월 28일 영역별 레이아웃 만들기 정답 + 사이트 레이아웃 만들기

'공부기록' 카테고리의 다른 글

관련글

티스토리툴바