개발세발

[HTML/CSS][모각코][05] 미니홈피 기본 레이아웃 만들기 본문

인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)

[HTML/CSS][모각코][05] 미니홈피 기본 레이아웃 만들기

뉼👩🏻‍💻 2022. 2. 11. 23:51
728x90
반응형
SMALL

[제출본]

https://codemate.kr/@yuuulya/day05-미니홈피-기본-레이아웃-만들기

 

[day05] 미니홈피 기본 레이아웃 만들기 by yuuulya | 코드메이트

[코드] <!DOCTYPE html> <html lang="ko">   <head>     <meta charset="UTF-8" />     <title>2021 MINI HOMEPAGE</title>     <link rel="stylesheet" href="./

codemate.kr

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>2021 MINI HOMEPAGE</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="bookcover">
      <div class="bookdot">
        <div class="page">
        </div>
      </div>
    </div>
  </body>
</html>

 

body { /*패턴바탕*/
	background-color: #a3a3a3;
	background-image: url("../static/images/pattern.png");
	background-size: 100px;
	
	position : pixed;
	top: 0; 
	bottom: 0;
	left: 0;
	right: 0;
}

.bookcover { /*파란바탕*/
  background-color: #b4d1da;
  border-radius: 9px;
  border: 1px solid #738186;
  
  width : 960px;
  height : 660px;
  margin: 100px auto;
  position: relative;
}

.bookdot { /*점선*/
	border: 2px dashed #f5f5f5;
	border-radius: 9px;
    
	position: absolute;	
	top: 15px;
    left: 15px;
    width: 930px;
    height: 630px;
}

.page {/*제일 안쪽 바탕*/
	background-color: #f5f5f5;
	border-radius: 9px;
	
	position: absolute;	
	top: 10px;
    left: 10px;
    width: 910px;
    height: 610px;
}

 

 

728x90
반응형

'인터넷 배움 > 코뮤니티- 모각코(HTMLㆍCSS 심화편)' 카테고리의 다른 글

[HTML/CSS][모각코][07] 미니홈피 홈화면 레이아웃 만들기  (0) 2022.02.16
[HTML/CSS][모각코][06] 미니홈피 홈화면 레이아웃 만들기  (0) 2022.02.16
[HTML/CSS][모각코][04] HTML, CSS 개념 복습하기!  (0) 2022.02.09
[HTML/CSS][모각코][03] CSS 업그레이드  (0) 2022.02.08
[HTML/CSS][모각코][02] 나만의 위키 만들기  (0) 2022.02.07
'인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)' Related Articles more