[새싹] 현대IT&E 231107 기록 - HTML.CSS 05~09

최정윤·2023년 11월 7일

새싹

목록 보기

16/67

5.4 폼에서 사용하는 여러 가지 태그

여러 줄을 입력하는 텍스트 영역 textarea 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <link rel="stylesheet" href="css/order.css">
</head>
<body>
  <div id="container">
    <h1>레드향 주문하기</h1>
    <form>
      <fieldset>
        <legend>배송 정보</legend>
        <ul id="shipping">
          <li>
            <label for="user-name">이름 </label>
            <input type="text" id="user-name">
          </li>
          <li>
            <label for="addr">배송 주소</label>
            <input type="text" id="addr">
          </li>
          <li>
            <label for="mail">이메일</label>
            <input type="email" id="mail">
          </li>        
          <li>
            <label for="phone">연락처</label>
            <input type="tel" id="phone">
          </li>
          <li>
            <label for="d-day">배송 지정</label>
            <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
          </li>     
          <li>
            <label for="memo">메모</label>
            <textarea id="memo" cols="40" rows="4"></textarea>
          </li>   
        </ul>  
      </fieldset>
      <div>
        <input type="submit" value="주문하기"> 
        <input type="reset" value="취소하기">
      </div>        
    </form>
  </div>
</body>
</html>

드롭다운 목록을 만들어 주는 select, option 태그 / 데이터 목록 만들어주는 datalist, option 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
  <style>
    hr {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <h1>여러 데이터 나열하기</h1>
  <form action="">  
    <!-- 드롭 다운 목록 -->
    <label for="prod1">상품 선택</label>
    <select id="prod1">
      <option value="special_3" selected>선물용 3kg</option>
      <option value="special_5">선물용 5kg</option>
      <option value="family_3">가정용 3kg</option>
      <option value="family_5">가정용 5kg</option>
    </select>
    <hr>    
    <!-- 데이터 목록 -->
    <label for="prod2">포장 여부 </label>
    <input type="text" id="prod2" list="pack">
    <datalist id="pack">
      <option value="package">선물 포장</option>
      <option value="no_package">포장 안 함</option>
    </datalist>        
  </form>
</body>
</html>

버튼을 만들어 주는 button 태그

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>레드향 주문하기</title>
</head>
<body>
    <form>
      <input type="button" value="버튼1" />
      <input type="submit" value="버튼2" />
      <input type="image" src="images/login.png" />
      <button type="submit">버튼4</button>
      <button type="button">버튼5</button>
    </form>
  </div>
</body>
</html>

드롭다운 목록과 텍스트 영역 추가하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>회원 가입</title>
    <style>
      #container {
        width:600px;
        margin:10px auto;
      }
    </style>
    <link rel="stylesheet" href="css/register.css">
  </head>
  <body> 
    <div id="container">
      <h1>회원 가입을 환영합니다</h1>
      <form>
        <fieldset>
          <legend>사용자 정보</legend>    
          <ul>
            <li>
              <label for="uid">아이디</label>
              <input type="text" id="uid" autofocus placeholder="4자 ~ 10자 사이, 공백없이" required> 
            </li>
            <li>
              <label for="umail">이메일</label>
              <input type="email" id="umail" required> 
            </li>
            <li>
              <label for="pwd1">비밀번호</label>
              <input type="password" id="pwd1" placeholder="문자와 숫자, 특수 기호 포함" required> 
            </li>        
            <li>
              <label for="pw2">비밀번호 확인</label>
              <input type="password" id="pwd2" required> 
            </li>
            <li>
              <label for="path">가입 경로</label>
              <select id="path">
                <option value="blog">블로그</option>
                <option value="search">검색</option>
                <option value="sns">SNS</option>
                <option value="etc">기타</option>
              </select>
            </li>
            <li>
              <label for="memo">메모</label>
              <textarea cols="40" rows="4" placeholder="남길 말씀이 있다면 여기에"></textarea>
            </li>
          </ul>      
        </fieldset>
        <fieldset>
          <legend>이벤트와 새로운 소식</legend>
          <input type="radio" name="mailing" id="mailing_y" value="mailing_yes">
          <label for="mailing_y">메일 수신</label>
          <input type="radio" name="mailing" id="mailing_n" value="mailing_no" checked>
          <label for="mailing_n">메일 수신 안 함</label>     
        </fieldset>
        <div id="buttons">
          <input type="submit" value="가입하기">
          <input type="reset" value="취소">
        </div>
      </form>
    </div>           
  </body>
</html>

06. CSS의 기본

6.1 웹 문서에 디자인 입히기

Web Developer 확장 기능 사용하기

https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm/related?utm_source=app-launcher&authuser=0

6.3 CSS 기본 선택자 알아보기

스타일 시트 알아보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    #container {
      font-style: italic;
      /* width: 500px; */
      margin: 10px auto;
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>

6.4 캐스케이딩 스타일 시트 알아보기

캐스케이딩의 의미

스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다.
CSS는 우선순위가 있는 스타일 시트로해석할 수 있다.
CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.

스타일 상속

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있다.
포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.
자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달된다.

07. 텍스트를 표현하는 다양한 스타일

7.2 웹 폰트 사용하기

https://fonts.google.com/?subset=korean¬o.script=Kore

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>구글 폰트 사용하기</title>
    <style>
      @import url('https://fonts.google.com/share?selection.family=Nanum+Pen+Script');
      h1 {
        font-size:60px;
        font-weight:bold;
        font-family: 'Nanum Pen Script', cursive;
      }
    </style>
  </head>
  <body>
    <h1>HTML+CSS+JavaScript</h1>
  </body>
</html>

7.3 텍스트 관련 스타일

글자색을 지정하는 color 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    h1 { 
      color:#0000ff;   /* 16진수 표기법 */
    } 
    p {
      color:green;  /* 색상 이름 */
    }
    .accent {
      color:hsl(0, 100%, 50%);  /* hsl 표기법 */
      font-weight:bold;
    }
  </style>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>    
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    body {
      background:url('images/bg.jpg') no-repeat fixed;
      background-size:cover;
      text-align:center;
    }
    h1 {
      font-size:160px;
      font-family:Verdana, Geneva, Tahoma, sans-serif;
    }
    .color1 {
      color:rgb(255,255,255);  /* 흰색 */
    }
    .color2 {
      color:rgba(255, 255, 255, 0.5); /* 반투명한 흰색 */
    }
  </style>
</head>
<body>
  <h1 class="color1">HTML</h1>
  <h1 class="color2">CSS</h1>
</body>
</html>

줄 간격을 조절하는 line-height 속성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>line-height</title>
    <style>
      p {
        width:600px;
        border:1px solid #222;
        padding:10px;
        margin:10px;
      }
      .small-line {
        line-height:0.7;
      }
      .big-line {
        line-height:2.5;
      }
    </style>
  </head>
  <body>    
    <p>껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p class="small-line">껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p class="big-line">껍질에 붉은 빛이 돌아 레드향(감평甘平)이라 불린다. 레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  </body>
</html>

텍스트 그림자 효과를 추가하는 text-shadow 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>text-shadow</title>
  <style>    
    h1 { 
      font-size:60px;
    } 
    .shadow1 {
      color:red;
      text-shadow:1px 1px black;
    }
    .shadow2 {
      text-shadow:5px 5px 3px #ffa500;
    }
    .shadow3 {
      color:#fff;
      text-shadow:7px -7px 20px #000;
    }
  </style>
</head>
<body>
  <h1 class="shadow1">HTML</h1> 
  <h1 class="shadow2">CSS</h1>
  <h1 class="shadow3">자바스크립트</h1>
</body>
</html>

글자 간격을 조절하는 letter-spacing, word-spacing 속성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>텍스트 스타일</title>
    <style>  
      p {
        font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size:80px;
        text-shadow:3px 3px 1px #ccc;  /* 오른쪽 아래로 파란색 그림자 */
      }
      .spacing1 {
        letter-spacing:0.2em;  /* 글자 간격 0.2em */
      }
      .spacing2 {
        letter-spacing:0.5em;  /* 글자 간격 0.5em */
      }      
    </style>
  </head>
  <body>
    <p>CSS</p> 
    <p class="spacing1">CSS</p>
    <p class="spacing2">CSS</p>
  </body>
</html>

7.4 목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-sylte-type 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>불릿과 번호 바꾸기</title>
  <style>
    .book1 {
      list-style-type:none;  /* 불릿 없앰 */
    }
    .book2 {
      list-style-type: upper-alpha;  /* 알파벳 대문자 */
    } 
  </style>
</head>
<body>
  <h1>도서 시리즈</h1>
  <ul class="book1">
    <li>Do it! 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ul>

  <ol class="book2">
    <li>Do it! 시리즈</li>
   <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ol>
</body>
</html>

불릿 대신 이미지를 사용하는 list-style-image 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>불릿 이미지 사용하기</title>
  <style>
    ul {
      list-style-image: url('images/dot.png') /* 불릿으로 사용할 이미지 */
    }
  </style>
</head>

<body>
  <h1>이지스퍼블리싱</h1>
  <ul>
    <li>Do it! 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ul>
</body>
</html>

목록 속성을 한꺼번에 표시하는 list-style 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>불릿 목록 들여쓰기</title>
  <style>
    .inside { list-style-position: inside; }  /* 목록 들여쓰기 */
  </style>
</head>
<body>
  <h1>도서 시리즈</h1>
  <ul>
    <li>Do it! 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ul>
  <ul class="inside">
    <li>Do it! 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ul>
</body>
</html>

목록을 사용하여 세로 메뉴 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>불릿 목록 들여쓰기</title>
  <style>
    .inside { list-style-position: inside; }  /* 목록 들여쓰기 */
    nav{
      width: 300px;
      margin: 50px 30px;
    }
    ul {
      list-style: none;
    }
    li {
      border: 1px solid #222;
      padding: 20px 40px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <h1>도서 시리즈</h1>
  <ul>
    <li>Do it! 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ul>
  <ul class="inside">
    <li>Do it! 시리즈</li>
    <li>첫 코딩 시리즈</li>
    <li>된다 시리즈</li>
  </ul>
</body>
</html>

7.5 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

caption-side: top | bottom

top: 캡션을 표 윗부분에 표시한다. 기본값이다.
bottom: 캡션을 표 아랫부분에 표시한다.

표에 테두리를 그려 주는 border 속성

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>표 스타일</title>
    <style>
			table {
				caption-side: bottom;  /* 표 캡션 위치 */
				border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
			}
			td, th {
				border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 */
				padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
				text-align:center;  /* 셀 내용 가운데 정렬 */
			}
		</style>
	</head>
	<body>		
		<h2>상품 구성</h2>
		<table>
			<caption>선물용과 가정용 상품 구성</caption>
			<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>
	</body>
</html>

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

8.1 CSS와 박스 모델

블록 라벨 요소와 인라인 레벨 요소

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>블록 레벨과 인라인 레벨</title>
		<style>
			body  * {
				border:1px solid blue;
			}
			.accent {
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<h1>시간이란...</h1>
		<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고 </div>
		<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>	  
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>블록 레벨과 인라인 레벨</title>
		<style>
			body  * {
				border:1px solid blue;
			}
			.accent {
				color:red;
				font-weight:bold;
			}
		</style>
	</head>
	<body>
		<h1>시간이란...</h1>
		<div>내일 죽을 것처럼 <span class="accent">오늘</span>을 살고 </div>
		<p>영원히 살 것처럼 <br>내일을 꿈꾸어라. </p>	  
</body>
</html>

콘텐츠 영역의 크기를 지정하는 width, height 속성

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
    div {
      border:2px solid #000;
      margin-bottom: 20px;
    }
		.box1 {
			width:400px;
			height:100px;
		}
    .box2 {
      width:50%;
      height:100px;
    }
	</style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

8.2 테두리 스타일 지정하기

테두리 스타일을 지정하는 border-style 속성

none
hidden
solid
dotted
dashed
doubl
groove
inset
outset
ridge

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			width:200px;
			height:100px;
			display:inline-block;
			margin:15px;			
			border-style:solid;  /* 테두리 스타일 - 실선 */
		}
    #box1 {
      border-width:2px;  /* 네 방향 모두 2px */ 
    }
    #box2 {
      border-width:thick thin;  /* top & bottom - thick, left & right - thin */
    }
    #box3 {
      border-width:thick thin thin;  /* top - thick, right - thin, bottom - thin, left - thin */ 
    }
    #box4 {
      border-width:10px 5px 5px 10px;  /* top - 10px, right - 5px, bottom - 5px, left - 10px */
    }
	</style>
</head>
<body>
	<div id="box1"> </div>
  <div id="box2"> </div>	
	<div id="box3"> </div>
	<div id="box4"> </div>	  
</body>
</html>

8.3 여백을 조절하는 속성

요소 주변의 여백을 설정하는 margin 속성

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델 - 마진</title>
	<style>
    div {
      width:200px;
      height:100px;
      display:inline-block;
      border:1px solid #222;
    }
    #margin1 {
      margin:50px;
    }
    #margin2 {
      margin:30px 50px
    }
    #margin3 {
      margin:30px 20px 50px
    }
    #margin4 {
      margin:30px 50px 30px 50px;
    }
    #margin5{
      margin-right:20px;    
    }
	</style>
</head>
<body>
  <div id="margin1"></div>
  <div id="margin2"></div>
  <div id="margin3"></div>
  <div id="margin4"></div>
  <div id="margin5"></div>
</body>
</html>

콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>박스 모델 - 패딩</title>
  <style>
		h1 {
			display:inline-block;
			border:1px solid #000;
		}
		#padding1 { 
			padding:20px 30px 40px 50px;  
		}
		#padding2 {
			padding:20px 30px;
		}
		#padding3 {
			padding:20px;
		}
  </style>
</head>
<body>
    <h1>레드향</h1>
	<h1 id="padding1">레드향</h1>
	<h1 id="padding2">레드향</h1>
	<h1 id="padding3">레드향</h1>
</body>
</html>

8.4 웹 문서의 레이아웃 만들기

배치 방법 결정하는 display 속성

block: 인라인 레벨 요소를 블록 레벨 요소로 만든다.
inline: 블록 레벨 요소를 인라인 레벨 요소로 만든다.
inline-block: 인라인 레벨 요소와 블록 레벨 요소의 속서을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다.
none: 해당 요소를 화면에 표시하지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS display 속성</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 #222;
    }
  </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>

왼쪽이나 오른쪽으로 배치하는 float 속성

left: 해당 요소를 문서의 왼쪽에 배치한다.
right: 해당 요소를 문서의 오른쪽에 배치한다.
none: 좌우 어느 쪽에도 배치하지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS float 속성</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>

float 속성을 해제하는 clear 속성

left: left를 해제한다.
right: right를 해제한다.
both: left와 right를 해제한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>박스모델</title>
	<style>
		div {
			padding:20px;
			margin:10px;
		}
		#box1{
			background:#ffd800;
			float:left;  /* 왼쪽으로 플로팅 */ 
		}
		#box2 {
			background: #0094ff;
			float:left;  /* 왼쪽으로 플로팅 */
		}
		#box3 {
			background: #00ff21;
		}
		#box4 {
			background:#a874ff;
			clear:left;  /* 플로팅 해제 */
		}
	</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>

8.5 웹 요소의 위치 지정하기

웹 요소의 위치를 정하는 left, right, top, bottom 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS 위치 속성</title>
  <style>
    *{
      margin:0;  /* 마진 초기화 */
      padding:0;  /* 패딩 초기화 */
    }
    p {
      width:300px;  /* 너비 - 300px */
      border:1px solid #ccc;  /* 테두리 - 1픽셀 회색 실선 */
      padding:10px;  /* 네방향 패딩 10px */
    }
    #pos1{
      position:absolute;  /* 포지셔닝 - absolute */
      left:50px;  /* 왼쪽에서 50px 떨어지게 */
      top:50px;   /* 위쪽에서 50px 떨어지게 */
    }
    #pos2 {
      position:absolute;  /* 포지셔닝 - absolute */
      right:100px;  /* 오른쪽에서 100px 떨어지게 */
      top:100px;  /* 위쪽에서 100px 떨어지게 */
    }
    #pos3 {
      position: absolute;  /* 포지셔닝 - absolute */
      left:100px;   /* 왼쪽에서 50px 떨어지게 */
      bottom:100px;  /* 아래쪽에서 100px 떨어지게 */
    }
  </style>
</head>
<body>  
   <p id="pos1">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 id="pos2">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 id="pos3">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>

배치 방법을 지정하는 position 속성

static: 문서의 흐름에 맞춰 배치한다.
relative: 위칫값을 지정할 수 있다는 점을 제외하면 static과 같다.
absolute: relative값을 사용한 상위 요소를 기준으로 위치를 지정해 배치한다.
fixed: 브라우저 창을 기준으로 위치를 지정해 배치한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS position 속성</title>
  <style>
    p {
      width:500px;
      height:200px;
      background-color:#eee;
      border:1px solid #ccc;
      line-height:2;
    }
    #static {
      position:static;
    }
    #relative-1{
      position:relative;
    }
    #relative-2 {
      position:relative;   /* 포지셔닝 - relative */
      left:100px;  /* 왼쪽에서 100px 떨어지게 */
      top:-50px;   /* 위쪽에서 -50px 떨어지게 (위로 이동) */
    }
    #fixed {
      width:100px;
      height:100px;
      background-color:#222;
      position:fixed;  /* 포지셔닝 - fixed */
      right:30px;  /* 오른쪽에서 30px 떨어지게 */
      top:30px;  /* 위쪽에서 30px 떨어지게 */
    }
  </style>
</head>
<body>
   <p id="static">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. Pariatur fugiat voluptate ea non amet cupidatat. </p>
   <p id="relative-1">Lorem ipsum reprehenderit adipisicing exercitation enim velit veniam incididunt sit consectetur elit exercitation. Magna Lorem excepteur occaecat cupidatat sunt proident tempor do nostrud labore cillum non exercitation voluptate. </p>
   <p id="relative-2">Excepteur voluptate ad irure ipsum duis. Deserunt cupidatat commodo proident eu mollit cillum commodo quis quis et ad. Velit id duis enim reprehenderit eu dolor Lorem excepteur excepteur. </p>
   <p id="fixed"></p>
</body>
</html>

09. 이미지와 그라데이션 효과로 배경 꾸미기

9.1 배경색과 배경 범위 지정하기

배경색의 적용 범위를 조절하는 background-clip 속성

border-box: 박스 모델의 가장 외곽인 테두리까지 적용한다.
padding-box: 박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
content-box: 박스 모델에서 내용 부분에만 적용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    .desc {
      border:5px dotted #222;
      background-color:#ffd9a0;
      width:350px;
      padding:20px;
      margin-right:20px;
      float:left;
    }
    #clip-border {
      background-clip: border-box;
    }
    #clip-padding {
      background-clip: padding-box;
    }
    #clip-content {
      background-clip: content-box;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="desc" id="clip-border">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-padding">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>
    <div class="desc" id="clip-content">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    </div>        
  </div>
</body>
</html>

9.2 배경 이미지 지정하기

웹 요소에 배경 이미지를 넣는 background-image 속성

background-image: url('이미지 파일 경로')

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경 이미지</title>
  <style>
    body {
      background-image :url('images/bg1.jpg');
    }
  </style>
</head>
<body>
  
</body>
</html>

문서 전체에 배경 이미지 넣기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경 이미지</title>
  <style>
    body {      
      background:url('images/bg5.jpg') left top no-repeat fixed;   /* 배경 이미지 */
      background-size:cover;  /* 배경 이미지 크기 */
    }
    h1 {
      margin-top:150px;   /* 상단 마진 */
      font-size:80px;  /* 글자 크기 */
      text-align: center;     /* 가운데 정렬 */
      color:#fff;  /* 글자 색 */
      text-shadow:2px 2px #000;  /* 텍스트 그림자 */
    }
  </style>
</head>
<body>
  <h1>Do it!</h1>
 </body>
</html>

최정윤

개발 기록장

이전 포스트

[새싹] 현대IT&E 231106 기록 - HTML 01~05

다음 포스트

[새싹] 현대IT&E 231107 기록 - HTML.CSS 05~09

새싹

5.4 폼에서 사용하는 여러 가지 태그

여러 줄을 입력하는 텍스트 영역 textarea 태그

드롭다운 목록을 만들어 주는 select, option 태그 / 데이터 목록 만들어주는 datalist, option 태그

버튼을 만들어 주는 button 태그

06. CSS의 기본

6.1 웹 문서에 디자인 입히기

Web Developer 확장 기능 사용하기

6.3 CSS 기본 선택자 알아보기

스타일 시트 알아보기

6.4 캐스케이딩 스타일 시트 알아보기

캐스케이딩의 의미

스타일 상속

07. 텍스트를 표현하는 다양한 스타일

7.2 웹 폰트 사용하기

7.3 텍스트 관련 스타일

글자색을 지정하는 color 속성

줄 간격을 조절하는 line-height 속성

텍스트 그림자 효과를 추가하는 text-shadow 속성

글자 간격을 조절하는 letter-spacing, word-spacing 속성

7.4 목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-sylte-type 속성

불릿 대신 이미지를 사용하는 list-style-image 속성

목록 속성을 한꺼번에 표시하는 list-style 속성

목록을 사용하여 세로 메뉴 만들기

7.5 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

표에 테두리를 그려 주는 border 속성

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

8.1 CSS와 박스 모델

블록 라벨 요소와 인라인 레벨 요소

콘텐츠 영역의 크기를 지정하는 width, height 속성

8.2 테두리 스타일 지정하기

테두리 스타일을 지정하는 border-style 속성

8.3 여백을 조절하는 속성

요소 주변의 여백을 설정하는 margin 속성

콘텐츠와 테두리 사이의 여백을 설정하는 padding 속성

8.4 웹 문서의 레이아웃 만들기

배치 방법 결정하는 display 속성

왼쪽이나 오른쪽으로 배치하는 float 속성

float 속성을 해제하는 clear 속성

8.5 웹 요소의 위치 지정하기

웹 요소의 위치를 정하는 left, right, top, bottom 속성

배치 방법을 지정하는 position 속성

09. 이미지와 그라데이션 효과로 배경 꾸미기

9.1 배경색과 배경 범위 지정하기

배경색의 적용 범위를 조절하는 background-clip 속성

9.2 배경 이미지 지정하기

웹 요소에 배경 이미지를 넣는 background-image 속성

문서 전체에 배경 이미지 넣기

[새싹] 현대IT&E 231106 기록 - HTML 01~05

[새싹] 현대IT&E 231108 기록 -CSS.JS 09~13

0개의 댓글