HTML&CSS 실습6 (정리x)

728x90

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>가정용 꿀사과</title>
</head>
 
</html>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    main{
        width: 700px;
        border: 1px solid black;
        margin: auto; /* width 값이 있을 때만 마진 auto 적용됨 !!  */
    }
    h2{
        color: white;
        background-color: black;
    }
    h3{
        color: red;
        margin: 20px ;
    }
    span{
        display: block;
    }
    .blue{
        display: inline;
        color: blue;
    }
    #s2 div{
        text-align: center;
        font-weight: bold;
        margin: 20px 0;
    }
    #s2 span{
        margin-bottom: 30px;
    }
    .seconds{
        border-bottom: 1px solid black;
    }
 
    #s1{
        position: relative; /* 자식의 position 기준이 되도록 */
        height: 300px;
        margin-bottom: 20px;
        background-image: url("https://news.kbs.co.kr/data/news/2021/10/18/20211018_iYfwL8.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }
    #s1 > div{
        position: absolute; /* 부모를 기준으로 위치 잡아라 */
        padding: 10px 20px;
        width: 100%; /* 부모 가로 값이랑 똑같이 맞춰라 */
        bottom: 0; /* 내 부모의 최 하단에 붙여라 */
        background-color: rgba(0,0,0,0.8);
    }
    #s1 h1{
        color: white;
        margin-bottom: 10px;
    }
    #s1 span{
        margin: 5px 0;
    }
    #s1 p{
        color: orange;
    }
 
</style>
<body>
<main>
    <section id="s1">
        <div>
            <h1>가정용 꿀사과</h1>
            <p>
                <span>흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다</span>
                <span>질 좋은 사과를 저렴하게 즐겨보세요</span>
            </p>
        </div>
    </section>
 
    <section id="s2">
        <h2>확인하세요</h2>
        <div>
            <h3>주문 및 배송</h3>
            <p>
                <span><span class="blue">오후 2시 이전</span> 주문건은 당일 발송합니다</span>
                <span>2시 이후 주문건은 다음날 발송합니다(주말제외)</span>
            </p>
        </div>
        <div class="seconds">
            <h3>교환 및 환불</h3>
            <p>
                <span>불만족시 <span class="blue">100% 환불</span>해 드립니다</span>
                <span>고객센터로 전화주세요</span>
            </p>
        </div>
        <div>
            <h3>고객센터</h3>
            <p>
                <span>0000-0000</span>
                <span>상담시간: 오전 9시 ~ 오후 6시 (토/일 공휴일 휴무)</span>
            </p>
        </div>
    </section>
</main>
</body>

728x90

저작자표시 비영리 변경금지 (새창열림)

'💜 HTML,CSS' 카테고리의 다른 글

HTML&CSS 20일차 (정리x) (0)	2024.03.23
HTML&CSS 19일차 (정리x) (0)	2024.03.23
HTML&CSS 18일차 (정리x) (0)	2024.03.23
HTML&CSS 17일차 (정리x) (0)	2024.03.23
HTML&CSS 실습5 (정리x) (0)	2024.03.23

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

HTML&CSS 실습6 (정리x)

'💜 HTML,CSS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>가정용 꿀사과</title>
	</head>

	</html>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	main{
	width: 700px;
	border: 1px solid black;
	margin: auto; /* width 값이 있을 때만 마진 auto 적용됨 !! */
	}
	h2{
	color: white;
	background-color: black;
	}
	h3{
	color: red;
	margin: 20px ;
	}
	span{
	display: block;
	}
	.blue{
	display: inline;
	color: blue;
	}
	#s2 div{
	text-align: center;
	font-weight: bold;
	margin: 20px 0;
	}
	#s2 span{
	margin-bottom: 30px;
	}
	.seconds{
	border-bottom: 1px solid black;
	}

	#s1{
	position: relative; /* 자식의 position 기준이 되도록 */
	height: 300px;
	margin-bottom: 20px;
	background-image: url("https://news.kbs.co.kr/data/news/2021/10/18/20211018_iYfwL8.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	}
	#s1 > div{
	position: absolute; /* 부모를 기준으로 위치 잡아라 */
	padding: 10px 20px;
	width: 100%; /* 부모 가로 값이랑 똑같이 맞춰라 */
	bottom: 0; /* 내 부모의 최 하단에 붙여라 */
	background-color: rgba(0,0,0,0.8);
	}
	#s1 h1{
	color: white;
	margin-bottom: 10px;
	}
	#s1 span{
	margin: 5px 0;
	}
	#s1 p{
	color: orange;
	}

	</style>
	<body>
	<main>
	<section id="s1">
	<div>
	<h1>가정용 꿀사과</h1>
	<p>
	<span>흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다</span>
	<span>질 좋은 사과를 저렴하게 즐겨보세요</span>
	</p>
	</div>
	</section>

	<section id="s2">
	<h2>확인하세요</h2>
	<div>
	<h3>주문 및 배송</h3>
	<p>
	<span><span class="blue">오후 2시 이전</span> 주문건은 당일 발송합니다</span>
	<span>2시 이후 주문건은 다음날 발송합니다(주말제외)</span>
	</p>
	</div>
	<div class="seconds">
	<h3>교환 및 환불</h3>
	<p>
	<span>불만족시 <span class="blue">100% 환불</span>해 드립니다</span>
	<span>고객센터로 전화주세요</span>
	</p>
	</div>
	<div>
	<h3>고객센터</h3>
	<p>
	<span>0000-0000</span>
	<span>상담시간: 오전 9시 ~ 오후 6시 (토/일 공휴일 휴무)</span>
	</p>
	</div>
	</section>
	</main>
	</body>