Do it! HTML+CSS+자바스크립트 웹 표준의 정석

HTML_CSS_JavaScript

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④

민주82 2023. 2. 28. 00:56

레이아웃을 구성하는 CSS 박스 모델

블록 레벨 요소

: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킴

인라인 레벨 요소

: 한줄을 차지하지 않고 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음

스타일 시트에서는 박스 형태인 요소를 박스 모델 요소라고 함 !!

박스모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩, 박스의 테두리, 그리고 여러 박스 모델 사이의 여백인

마진 등의 요소로 구성됨

▽ 박스 모델 속성

종류	설명
width	박스 모델의 너비 지정
height	박스 모델의 높이 지정
box-sizing	박스 모델의 크기를 계산하는 기준 지정
box-shadow	박스 모델에 그림자 효과 추가

▽ 테두리 속성

종류	설명
border-style	상하좌우 4개방향 테두리 스타일 한번에 지정
border-위치-style	top, right, bottom, left 중에서 선택하여 스타일 지정
border-width	상하좌우 4개방향 테두리 두께 한번에 지정
border-위치-width	top, right, bottom, left 중에서 선택하여 테두리 지정
border-color	상하좌우 4개방향 색상 한번에 지정
border-위치-color	top, right, bottom, left 중에서 선택하여 테두리 색상 지정
border-radius	상하좌우 4개방향 꼭짓점 한번에 둥글게
border-위치-radius	top, right, bottom, left 중에서 특정 꼭짓점만 둥글게 지정

▽ 여백 속성

종류	성명
margin	상하좌우 4개방향 마진 한번에 지정
margin-위치	top, right, bottom, left 중에서 특정 위치의 마진만 지정
padding	상하좌우 4개방향 패딩 한번에 지정
padding-위치	top, right, bottom, left 중에서 특정 위치의 패딩만 지정

▽ 레이아웃 속성

종류	설명
display	화면에서 요소를 배치 방법을 지정, 자주 사용하는 속성으로 block, inline-block, none 등이 있음
float	웹 요소를 왼쪽이나 오른쪽으로 배치, float를 적용한 요소는 clear 속성으로 해제하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치

▽ 위치 지정 속성

종류	설명
left, right, top, bottom	기준 위피와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정
position	웹 요소의 위치를 지정, 속성값으로 static, relative, absolute, fixed가 있음

마무리 문제 ♥♡

1. 문제의 이미지를 편집하지 않고 CSS만 사용해서 해답 이미지 터럼 표시하려고 합니다. 코드를 작성하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>연습문제 1</title>
	<style>	
		#container {
			width:350px;
			margin:30px auto;
		}
    img {
      border:1px solid #ccc;
      border-radius:50%;      
      box-shadow: 5px 5px 30px 2px #000;
    }
	</style>
</head>
<body>
<div id="container">
	<img src="images/bear.jpg" alt="곰인형 사진">
</div>
</body>
</html>

2. 해답 화면처럼 article요소를 격자 형태로 배치하도록 스타일을 작성하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>연습문제 2</title>
  <style>
	  section{
			width:800px;
			margin: 0 auto;	
		}
		h2{
			font-size:1.5em;
		}
		h3 {
			font-size:1.0em;
		}
		p {
			line-height:20px;
			font-size:12px;
		}
		article{
			float:left;
			width:350px;
			height:200px;	
			margin:10px;
			padding:10px;	
			border:1px solid #ccc;
		}
		footer {
			clear:left;
			width:100%;
			height:50px;
			background-color:#222;
		}
		footer > p {
			color:#fff;
			font-size:0.9em;
			text-align: center;
			line-height:50px;
		}
</style>
</head>
<body>
<section>
  <h2>강아지 용품 준비하기</h2>
  <article>  
    <h3>강아지 집 </h3>
     <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
  </article>
  <article> 
    <h3>강아지 먹이 </h3>
    <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
  </article>
  <article> 
    <h3>밥그릇, 물병 </h3>
    <p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
  </article>
  <article> 
    <h3>이름표, 목줄</h3> 
    <p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
	</article>
	<footer>
		<p>boxmodel 연습하기</p>
	</footer>
 </section>
</div>
</body>
</html>

3. 목록에는 항목이 4개 있는데 다음 조건에 맞는 CSS를 적용해 가로 내비게이션 메뉴를 만드세요.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>연습문제 3</title>
		<style>
			ul {
				list-style: none;
			}
			ul li {    
				float:left;
			}
			a {
				display:block;
				padding:10px 20px;
				background-color:#ccc;
			}
			a:link, a:visited {
				color:black;
				text-decoration: none;
			}
			a:hover {
				background-color:#000;
				color:#fff;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
				<li><a href="#">메뉴4</a></li>
			</ul>
		</nav>
	</body>
</html>

배경 꾸미기

background-color

: 배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 사용

background-clip

: 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택가능한 속성

border-box : 테두리까지
padding-box : 패딩 범위까지
content-box : 내용 부분만

background-repeat

: 배경 이미지를 가로와 세로 중에서 어떤 방향으로 반복할지 지정하거나, 반복하지 않고 한 번만 나타나게 할 수 있음

repeat : 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복
repeat-x : 브라우저 화면 너비에 가득 찰 때까지 가로로 반복
repeat-y : 브라우저 화면 너비에 가득 찰 때까지 세로로 반복
no-repeat : 한번만 표시하고 반복하지 않음

▽ 배경 이미지 관련 속성

종류	설명
background-color	배경색을 지정
background-clip	배경색이나 이미지를 어디까지 적용할지 지정
background-image	배경 이미지를 지정
background-repeat	배경 이미지의 반복방법을 지정
background-position	배경 이미지의 위치 지정
background-origin	배경 이미지를 배치할 기준을 지정
background-attachment	배경 이미지를 문서에 고정
background	하나의 속성으로 배경 스타일을 한꺼번에 지정
background-size	배경 이미지의 크기를 조절

마무리 문제 ♥♡

1. 다음 문제의 배경 화면을 보고 해답 소스에 들어갈 내용을 채우세요.

<!DOCTYPEe html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>
  <style>
    body{
      color:white;
      background:url('images/bg1.jpg') repeat-x left bottom fixed;
      background-color:gray;
    }
	  h1 {
      margin-top:50px;
			font-size: 20px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}
  </style>
</head>
<body>
	<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
	<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>					
</body>
</html>

2. 다음 조건에 맞는 스타일 속성을 <div> 영역의 스타일에 추가하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 2</title>
  <style>
	  .container {
			width:500px;
			padding:10px;
      border:1px solid #ccc;
		  background:rgb(0,0,0);
			color:rgb(255,255,255);        
		}
		h1 {
			font-size: 17px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}
  </style>
</head>
<body>
	<div class="container">
		<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
		<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>			
	</div>
</body>
</html>

3. 조건에 맞도록 배경색과 배경 이미지를 추가하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">   
  <title>연습문제 3</title>
  <style>
  	body {
			background-color:#02233b;
		}      
		#container{
			margin:0 auto;	
			width:600px;
			height:700px;
			border:1px dotted gray;
      padding:20px;        
      background:#fff url('images/mic.png') no-repeat right bottom;        
		}
		img {	
			margin:30px 10px 30px 180px;
		}
		h1 {
			background-color:#004344;
			color:white;
			text-align:center;
			padding:20px;
		}
		h2 {
			text-align:center;
			font-style:italic;
			margin-bottom:50px;
		}
		h3 {
			color:#cf3b00;
		}
		ul{
			margin:20px;
			list-style-type:none;
		}				
		li {
			line-height:30px;
		}		
  </style>
</head>

<body>
  <div id="container">
    <h1>대학언론사 수습기자 모집</h1>
    <h2>신입생 여러분을 기다립니다</h2>
    <h3>모집분야</h3>
    <ul>
      <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
      <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
      <li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
    </ul>
    <h3>혜택</h3>
    <ul>
      <li>수습기자 활동 중 소정의 활동비 지급</li>
      <li>정기자로 진급하면 장학금 지급</li>
    </ul>
  </div>
</body>
</html>

'HTML_CSS_JavaScript' 카테고리의 다른 글

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0)	2023.03.03
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑤ (0)	2023.03.01
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ③ (0)	2023.02.22
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ② (0)	2023.02.19
Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ① (0)	2023.02.17

현재글Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④

밍스토리

파이썬, 시각지능, 고급 선택자, 멀티클래스분류, 딥러닝, 퀵링크, 프로그래밍, 연결 선택자, 이미지 슬라이드쇼, Web crwaling, zigbang, 자바스크립트, html, css, 웹크롤링, 정적페이지, 웹사이트 시작화면, 라이브러리, 데이터프레임, 가상 요소\,

Today :
Yesterday :

밍스토리