너굴 개발 일지

TIL_210524_CSS 관련(border, image,float,box) 예시 본문

HTML,CSS

TIL_210524_CSS 관련(border, image,float,box) 예시

너굴냥 2021. 5. 24. 16:47

목차

css 이용하여 기본적 레이아웃 만들기
css를 이용하여 박스 모델 만들기
css를 이용한 box-shadow 나타내기
css를 이용한 박스 테두리 꾸미기
css를 이용한 레이아웃 구성 및 꾸미기 예제
css display 속성 관련 예제
css  backgorund 속성 관련 예제

 

 

css 이용하여 기본적 레이아웃 만들기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 박스 모델 - 레이아웃 만들기</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="container">
    <header>
      <div id="logo"></div>
      <!--  div 사이에 들어올 수 있는 태그 : section(컨텐츠), article(영역 분할), aside(본문 내용과 별도인 것:배너 등) -->
      <nav>
      <!-- nav : menu -->
      </nav>
    </header>
    <div id="content1">
  
    </div>
    <div id="content2">
  
    </div>
    <footer>
      
    </footer>
  </div>
</body>
</html>
*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

#container{
	width:1200px;
	margin:0;
}

header{
	width:100%;
	height:80px;
	border:1px solid #000;
	margin-bottom:20px;
}

#content1{
	width:100%;
	height:600px;
	border:1px solid #000;
}

#content2{
	width:100%;
	height:300px;
	border:1px solid #000;
}

css 설정시 width를 100%로 설정하였는데 화면에 꽉 차보이지 않다면 부모 태그의 margin을 0으로 초기화하였는지 확인한다

 

 

 

css를 이용하여 박스 모델 만들기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델:box-sizing.html</title>
	<link rel="stylesheet" href="css/style-1.css">
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

div{
	margin-bottom: 20px;
}

.box1{
	width:200px;
	height:100px;
	padding:20px;	/*상하좌우*/
	border: 10px solid #ccc;
}

.box2{
	box-sizing:border-box;
	width:200px;
	height:100px;
	border:10px solid #00f;
}

 

 

 

css를 이용한 box-shadow 나타내기 

box-shadow: none | x-position y-position blur spread color |inset | initial | inherit

none : 그림자 효과 제거

x-position : 가로 위치, 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)

y-position : 세로 위치, 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수)

blur : 그림자를 흐릿하게 만듭니다. 값이 클 수록 더욱 흐려지게 함

spread : 양수면 그림자를 확장하고, 음수면 축소

color : 그림자 색을 정함

inset : 그림자를 요소의 안쪽에 만듦.

initial : 기본값으로 설정

inherit : 부모 요소의 속성값을 상속받음

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델:box-shadow.html</title>
<style>
div {
	width: 200px;
	height: 100px;
	display: inline-block; /* div 태그는 왼쪽에서 오른쪽 방향으로 */
	margin: 15px;
	border: 1px solid blue;
	border-radius: 20px;
}

.box1{
	box-shadow:2px 12px 5px 0px;
	/* */
}

.box2{
	box-shadow:5px 5px 15px 5px;
}

</style>
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

 

 

css를 이용한 박스 테두리 꾸미기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>박스모델:border-3.html</title>
<style>
div {
	width: 200px;
	height: 100px;
	display: inline-block;
	margin: 15px;
	border-style: dashed; /* 테두리 스타일 - 선으로 된 점선 */
	border-width: 2px; /* 테두리 굵기 - 2px */
}

#box1{
	border-color:red;
}

#box2{
	border-top-color:blue;
	border-left-color:yellow;
}

</style>
</head>

<body>
	<div id="box1"></div>
	<div id="box2"></div>
</body>
</html>

 

css를 이용한 레이아웃 구성 및 꾸미기 예제

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/product-result.css">
</head>
<body>
  <div id="container">
    <div id="description">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    </div>
    <div id="receipe">
      <h2>레드향 샐러드 레시피</h2>
      <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
      <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
      <ol>
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
      </ol>
    </div>   
    <div id="package">
      <h2>상품 구성</h2>
      <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
          <col style="background-color:#eee;">
          <col>
          <col span="2" style="width:150px">
        </colgroup>
        <thead>
          <tr>
            <th>용도</th>
            <th>중량</th>
            <th>갯수</t>
            <th>가격</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
          </tr>
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>52,000원</td>
          </tr>
          <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>30,000원</td>
          </tr>   
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
          </tr>
        </tbody>        
      </table>      
    </div>
  </div>
</body>
</html>
table, th, td{
	border:1px solid #ccc;
	border-collapse: collapse;
}

th, td{
	padding:10px 20px;
}

#container{
	width:600px;
	border: none;
	margin:0 auto;
}

div{
	border:1px dashed #222;
	padding: 20px;
	margin:20px;
}

#description{
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

#package{
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

 

css display 속성 관련 예제

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS display 속성:display.html</title>
  <style>
	*{
		box-sizing:border-box;
	}
	
	nav ul{
		list-style: : none;
	}
	
	nav ul li{
		display: inline-block;
		padding:20px;
		margin:0 20px;
		border: 1px solid #333;
		background: orange;
	}
	
	nav ul li:hover{
		background: aqua;
	}
  </style>
</head>

<body>
   <nav>
     <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
     </ul>
   </nav>
</body>
</html>

menu에 마우스를 올리면 하늘색으로 바뀌게 되는 것을 볼 수 있음

 

 

css float 속성 관련 예제

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성:float-1.html</title>
  <style>
    img{
    	float:left;
    	margin-right: 40px;
    }
  </style>
</head>

<body>
  <img src="images/tree.png">
   <p>Ex et adipisicing voluptate aliqua cupidatat nulla. Laboris est sint sit aliqua enim. Aute Lorem eu sint aute sunt proident. Do culpa consectetur elit duis laboris reprehenderit incididunt nulla. Irure exercitation tempor aliqua laboris cupidatat anim in non officia aliquip excepteur fugiat labore.</p>
   <p>Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Commodo veniam sit quis nisi ea. Ipsum do aliqua nostrud laboris elit duis adipisicing id Lorem qui. Labore dolor ipsum enim incididunt. Velit qui cillum sunt labore incididunt duis aute Lorem nulla et. Sint commodo aute amet laboris ullamco exercitation Lorem dolore veniam ut reprehenderit incididunt. Laborum nulla eiusmod cillum irure anim aute.</p>
   <p>Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Incididunt adipisicing enim laboris voluptate.</p>
</body>
</html>

img 태그에 float 속성을 left로 설정하여 p태그 단락들 왼쪽에 위치하게 되었고 이미지 오른쪽의 margin 값을 지정하여 글과 사진의 공간을 띄어주었다

 

 

 

css float 속성 관련 예제 2

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델:float-3.html</title>
	<style>
		div {
			padding:20px;
			margin:10px;
		}

		#box1{
			background: #ffdd00;
			float:left;
		}
		
		#box2{
			background: #0094ff;
			float:left;
		}
		
		#box3{
			background: #00ff33;
		}
		
		#box4{
			background: #a887ff;
		}
	</style>
</head>

<body>
	<div id="box1">박스1</div>
	<div id="box2">박스2</div>
	<div id="box3">박스3</div>
	<div id="box4">박스4</div>
</body>
</html>

box 1,2에는 float:left를 명시함으로써 마치 box3 위에 있는 것 처럼 보이게 되며 box 3,4는 float 속성을 적용하지 않아 위에서 아래로 차례대로 나타난 것을 볼 수 있다

 

 

css  backgorund 속성 관련 예제

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지:bg-3.html</title>
<style>
	body{
		background-image:url('images/bg2.png'); 
		background-repeat: no-repeat; /*반복하지 않을시 이미지 1장만 나타나게 됨*/
		background-position: right top; /*우측 상단에 위치*/
		background-attachment: fixed; /*명시된 위치에 이미지 고정*/
	}
	
	div{
		width: 400px;
		height: 250px;
		padding: 20px;
		border: 20px solid #aaaaaa;
		margin-bottom: 20px;
		overflow: auto;
		background-image: url('images/bg3.png');
		background-repeat: no-repeat;
		background-position: right top;
	}
	
	#bg1{
		background-origin: padding-box; /*padding 까지만 허용*/
	}
	#bg2{
		background-origin: border-box; /*border 경계까지만 허용*/
	}
	#bg3{
		background-origin: content-box; /*content 경계까지만 허용*/
	}
</style>
</head>

<body>
	<div id="bg1">
		<h2>바빠 시리즈</h2>
		<h3>-바쁜 학생을 위한 빠른 학습법</h3>
		<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과
			‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
	</div>
	<div id="bg2">
		<h2>바빠 시리즈</h2>
		<h3>-바쁜 학생을 위한 빠른 학습법</h3>
		<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과
			‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
	</div>
	<div id="bg3">
		<h2>바빠 시리즈</h2>
		<h3>-바쁜 학생을 위한 빠른 학습법</h3>
		<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과
			‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
	</div>
</body>
</html>

결과 이미지를 보시다시피 background-origin 설정에 따라 그림이 border에 겹치게 혹은 content에 겹치게 할 수 있다

 

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

CSS - block 요소, inline 요소, z-index  (0) 2021.06.01
TIL_210525_CSS_고급 선택자, 미디어 쿼리, Grid  (0) 2021.05.25
HTML - input 태그 date 타입 관련 예시  (0) 2021.05.21
TIL_210506_프로젝트 문제 해결(simple_shop 회원가입 완료)  (0) 2021.05.06
TIL_210504_CSS 연습 및 예제 (simple_shop 기본 틀)  (0) 2021.05.04
'HTML,CSS' Related Articles more