semantic태그란 태그만 보고도 페이지 구조를 쉽게 이해할 수 있도록 정의된 태그를 말합니다.

 

HTML5문서

시맨틱 태그가 사용된 HTML5문서

웹사이트는 주로 사이트 제목이나 로고, 검색 창이 있는 헤더(header), 여러 내용이 있는 본문(contents), 본문 외 내용을 나타내는 사이드바(sidebar)와 푸터(footer)부분이 문서의 주요부분이며 사이트에 따라 한두 영역이 추가되곤 합니다.

이런 분석을 토대로 HTML5에서는 태그 이름만 보고도 문서 구조에서 어떤 역할을 하는지 쉽게 이해할 수 있는 '시맨틱 태그(semantic tag)'를 추가했습니다.

 

시맨틱 태그로 레이아웃을 만들어야 하는 이유

시맨틱 태그를 사용하거나 사용하지 않거나 웹 브라우저에 나타나는 모습은 똑같지만 실제로 웹 브라우저 문서를 처리할때는 차이가 있습니다. HTML5의 시맨틱 태그로 작성한 소스를 보면 어느 부분이 제목, 메뉴, 실제 내용인지 구분이 쉽게가서 사이트 내용을 정확하게 전달합니다.

 

 

문서 구조를 위한 HTML5 시맨틱 태그

<header>태그

머리말 지정하기 <header> 태그는 특정 부분의 머리말(header)에 해당하며 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며 헤더의 내용으로는 <form>태그를 사용해 검색 창을 넣거나 <nav>태그를 사용해 사이트 메뉴를 넣습니다. 혹인 <header>태그는 본문 중에 사용해 해당 부분의 머리말로 사용할 수도 있습니다.

 

<nav>태그

문서를 연결하는 내비게이션 링크 <nav>태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다. 즉 사용하는 위치의 영향을 받지 않아 <header>나 <footer>태그 또는 <aside>태그 안에 포함시킬 수 있고 독립해 사용할 수도 있습니다.

 

<section>태그

주제별 콘텐츠 영역 나타내기

<section>태그는 문서에서 콘텐츠 영역을 나타냅니다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을때 사용하며 그 안에는 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.<section>안에 또다른 <section>을 넣을 수 있습니다.

 

<article>태그

콘텐츠 내용 넣기

<section>과 비슷하지만 웹 상의 실제 내용을 넣는 태그입니다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당됩니다. 다시 말해 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용 하더라도 완전히 하나의 콘텐츠가 된다면 <article>태그를 쓰면 됩니다.<section>은 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하고 <article>태그안에 <section>태그를 넣을 수도 있습니다.

 

<aside>태그

본문 이외의 내용 표시하기

사이드바는 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용합니다. 이처럼 <aside>태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타냅니다.

 

<iframe>태그

외부 문서 삽입하기

웹 문서 안에 다른 외부 문서를 삽입할 때 사용합니다. 이렇게 웹 문서 안에 다른 웹 문서를 가져와 표시하는 것을 인라인 프레임(inline frame)이라고 하며, 삽입하는 태그는 <iframe>태그입니다.

기본형 설명
<iframe src="삽입할 문서 주소" [속성 = "속성 값"]> </iframe> 웹 문서 안에 다른 외부 문서를 삽입할 때 사용합니다.
속성 설명
width 인라인 프레임의 너비입니다. 픽셀이나 백분율 값으로 표시합니다.
height 인라인 프레임의 높이입니다. 픽셀이나 백분율 값으로 표시합니다.
name 인라인 프레임의 이름입니다.
src 프레임에 표시할 문서의 주소를 지정합니다.
seamless 프레임의 테두리를 없애 마치 본문의 일부처럼 보이도록 만들며 속성 값 없이 seamless라고 쓰면 됩니다. 브라우저에 따라 지원하지 않을 수 있습니다.

 

 

<fotter>태그

제작 정보와 저작권 정보 표시하기

사이트 제작자의 연락처 정보와 저작권 정보를 표시합니다. 또한 <footer>태그 안에는 <header>태그를 비롯해 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그를 이용해 푸터 안에 다양한 정보를 넣을 수 있습니다.

 

<address>태그

사이트 제작자 정보, 연락처 정보 나타내기

 <address>태그는 주로 <footer>태그 안에 사용되는데 웹 페이지 제작자의 이름이나 제작자의 웹 페이지 또는 피드백을 위한 연락처 정보를 넣는데 사용됩니다. 또한 웹 사이트와 관련된 우편 주소도<address>태그 안에 포함시킵니다. 하지만 단순히 우편 주소를 표기할 용도라면 <address>태그가 아닌 <p>태그를 이용해 표시합니다.

 

<div>태그

HTML5에서는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘텐츠에 CSS를 적용할 때 <div>태그를 사용합니다.

 

IE8이하 버전에서는

HTML5의 새로운 시맨틱 태그는 대부분의 웹 브라우저에서는 사용할 수 있지만 인터넷 익스플로러(IE)8에서는 지원하지 않고 모바일용 브라우저인 오페라 미니에서는 일부만 지원됩니다.

브라우저별 시맨틱 태그 지원 여부를 확인하려면 인터넷 익스플로러(IE)8.0이하 버전은 지원되지 않음을 알 수 있습니다.

그에 따른 방안으로는 몇가지 방법이 있습니다.

CSS에서 블록 레벨로 정의하기

첫 번째 방법은 CSS에서 블록 레벨로 정의하는 방법입니다 브라우저는 자신이 인식하지 못하는 태그를 만나면 인라인 태그로 취급하는데, 이런 태그는 위치값을 가질 수 없으므로 태그를 이용해 레이아웃을 만드는 것이 불가능해서 HTML5시맨틱 태그를 인식하지 못하는 브라우저에서는 소스를 <style> 태그와 </style>사이에 입력해 자신만의 영역을 가질 수 있는 블록 레벨 태그로 바꾸어 주어야 합니다.

시맨틱 태그 직접 정의하기

자바스크립트를 이용해 웹 브라우저에서 시맨틱 태그들을 지원하는 것처럼 태그를 사용할 수도 있습니다.

HTML5 Shiv 사용하기

<script>태그 사이에 태그를 직접 정의하는 과정을 자바스크립트 파일로 만들어 사용할 수 있도록 만든 HTML5 shiv를 사용하면 문제를 해결할수 있습니다.

https://github.com/aFarkas/html5shiv 페이지에서 [latest zip package]링크를 누르고 다운로드된 파일의 압축을 푼 뒤 src폴더 안의 html5shiv.js파일을 원하는 폴더로 복사해 사용하면됩니다.

 

브라우저 사이의 차이를 메꾸어 주는 폴리필(polyfill)

최신 브라우저더라도 HTML5 표준 기능들이 어떤 브라우저에서는 되고 어떤 브라우저에서는 안 됩니다. 이것을 파편화(browser fragmentation)라고 부르는데 이런 브라우저 파편화를 줄이고 비슷하게라도 같은 결과를 만들기 위한 방법을 통틀어 심(shim)또는 폴백(fallback)이라고 부릅니다. 앞에서 설명한 html5shiv도 shim의 일종입니다.

폴리필(polyfill)은 파편화가 생기는 브라우저에 삽입하는 자바스크립트로 브라우저를 소스로 진단해 필요한 shim파일을 자동으로 끼워 넣어 줍니다. 개발되어 있는 폴리필들은 상당히 많은데 HTML5 Cross Browser Pollyfills(https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills)페이지를 참고하면 각 기능별로 폴리필이나 심, 폴백을 한눈에 볼 수 있습니다.

저작자표시 비영리

연습문제 1~2

1. quiz-1.html 문서를 다음 조건에 맞도록 수정하세요

1. float속성을 이용해 내비게이션 항목을 왼쪽부터 차례대로 배치합니다.
2. 내비게이션 항목의 오른쪽 마진을 15px로 지정해 각 항목들이 조금씩 떨어지도록 합니다.
3. 기존 margin-bottom값을20px로 수정합니다.
4. float속성 때문에 내비게이션 외의 항목에도 float의 영향을 받으므로 clear 속성을 사용해 '강아지 용품 준비하기'부터는 float의 영향을 받지 않도록 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>HTML5 레이아웃</title>
  <style>
    body{
      font-family:"맑은 고딕", "고딕", "굴림";
    }
    a:link {
      text-decoration:none;
    }
    nav ul{
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    nav ul li{
      font-size:1.5em;
      padding-left:7px;
      margin-bottom:15px;
      border-left-width:5px;
      border-left-color:#990066;
      border-left-style:solid;
    }
    section article {
      padding-left:10px;
      margin-bottom:10px;
      border-top:1px #a6a6a6 dashed;
      border-bottom: 1px #a6a6a6 dashed;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">애완견 종류</a></li>
      <li><a href="#">입양하기</a></li>
      <li><a href="#">건강돌보기</a></li>
      <li><a href="#">더불어살기</a></li>
    </ul>
  </nav>
<section id="content">
  <h2>강아지 용품 준비하기</h2>
  <article>  
    <h3>강아지 집 </h3>
     <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
  </article>
  <article> 
    <h3>강아지 먹이 </h3>
    <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
   </article>  
 </section>
<footer>
  <p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>HTML5 레이아웃</title>
  <style>
    body{
      font-family:"맑은 고딕", "고딕", "굴림";
    }
    a:link {
      text-decoration:none;
    }
    nav ul{
      float:left;
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    nav ul li{
      display:inline-block;
      margin-right: 15px;
      font-size:1.5em;
      padding-left:7px;
      margin-bottom:15px;
      border-left-width:5px;
      border-left-color:#990066;
      border-left-style:solid;
    }
    section article {
      padding-left:10px;
      margin-bottom:20px;
      border-top:1px #a6a6a6 dashed;
      border-bottom: 1px #a6a6a6 dashed;
    }
    h2 {
      clear:both;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">애완견 종류</a></li>
      <li><a href="#">입양하기</a></li>
      <li><a href="#">건강돌보기</a></li>
      <li><a href="#">더불어살기</a></li>
    </ul>
  </nav>
<section id="content">
  <h2>강아지 용품 준비하기</h2>
  <article>  
    <h3>강아지 집 </h3>
     <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
  </article>
  <article> 
    <h3>강아지 먹이 </h3>
    <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
   </article>  
 </section>
<footer>
  <p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>

2. quiz-2.html문서에는 기본적인 표를 사용한 내용이 들어 있습니다. 다음 표를 만들기 위해 조건에 맞게 표 스타일을 적용하세요.

1. 표와 셀에 테두리(1px solid black)를 그린 후 한 줄로 합쳐 표시하세요.
2. 표의 설명 글(caption)은 표 아래쪽에 표시하세요.
3. 각 셀에는 padding:10px을 적용해 적절한 여백을 두세요.
4. 배경 색을 #eee로 지정하는 클래스 선택자 .heading을 정의한 후 첫 번째 행과 첫 번째 열에 적용하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>표 스타일</title>
</head>
<body>
  <table border="1">
    <caption>2015 국민 독서실태</caption>
    <thead>
      <tr>
        <th>구분</th>
        <th>성인</th>
        <th>학생</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>독서율</th>
        <td>65.3%</td>
        <td>94.9%</td>
      </tr>
      <tr>
        <th>연평균 독서량</th>
        <td>9.1권</td>
        <td>29.8권</td>
      </tr>
      <tr>
        <th>공공도서관 이용률</th>
        <td>28.2%</td>
        <td>64.9%</td>
      </tr>      
    </tbody>
  </table>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <style>
    table {
      border: 1px solid black;
      caption-side:bottom;
      border-collapse: collapse;
    }
    tr td, th{
      border: 1px solid black;
      padding: 10px;
    }
    th {
      background-color: #eee;
    }
  </style>
<head>
	<meta charset="utf-8">
	<title>표 스타일</title>
</head>
<body>
  <table>
    <caption>2015 국민 독서실태</caption>
    <thead>
      <tr>
        <th>구분</th>
        <th>성인</th>
        <th>학생</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>독서율</th>
        <td>65.3%</td>
        <td>94.9%</td>
      </tr>
      <tr>
        <th>연평균 독서량</th>
        <td>9.1권</td>
        <td>29.8권</td>
      </tr>
      <tr>
        <th>공공도서관 이용률</th>
        <td>28.2%</td>
        <td>64.9%</td>
      </tr>      
    </tbody>
  </table>
</body>
</html>

저작자표시 비영리

'HTML > CSS 레이아웃' 카테고리의 다른 글

CSS 레이아웃  (0) 2021.08.15

CSS포지셔닝과 주요 속성들

box-sizing

콘텐츠 영역의 너비에 패딩과 테두리 크기까지 합쳐서 width 속성을 지정할 수 있습니다.

기본형 설명
box-sizing: content-box width속성 값을 콘텐츠 영역 너비 값으로 사용합니다.(기본값)
box-sizing: border-box width 속성 값을 콘텐츠+테두리까지 포함한 박스 모델 전체 너비 값으로 사용합니다.

 

 

float속성

웹 요소를 문서 위에 떠 있게 만듭니다.

기본형 설명
float: left 해당 요소를 문서의 왼쪽으로 배치합니다.
float: right 해당 요소를 문서의 오른쪽으로 배치합니다.
float: none 좌우 어느 쪽으로도 배치하지 않습니다.

 

clear속성

float 속성 해제하기

float속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른요소들에도 똑같은 속성이 전달되는데, float속성을 해제하기 위해서는 따로 알려줘야한다.

기본형 설명
clear: none clear을 설정하지 않은 것과 같다.
clear: left 왼쪽 float속성을 해제한다
clear: right 오른쪽 float속성을 해제한다
clear: both 왼쪽과 오른쪽 float속성을 해제한다.

 

 

position속성

웹 문서 안의 요소를 자유자재로 배치해 주는 속성으로 HTML과 CSS를 이용해 웹 문서를 만들 때 중요하게 사용하는 속성 중 하나입니다.

기본형 설명
position: static 요소를 문서의 흐름에 맞추어 배치합니다.
position: relative 이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다.
position: absolute 원하는 위치를 지정해 배치합니다.(절대좌표)
position: fixed 지정한 위치에 고정해 배치합니다. 화면에서 요소가 잘릴 수도 있습니다.

position속성 중 static을 제외한 나머지 속성 값에서는 좌표를 이용해 각 요소의 위치를 조절할 수 있습니다. 이 때 위치는 top, bottom, left, right로 지정합니다.

top은 위쪽으로부터 떨어진거리 bottom은 아래로부터 떨어진거리 left는 왼쪽으로부터 떨어진 거리 right는 오른쪽으로부터 떨어진 거리이며 좌표값은 양수와 음수 모두 사용가능합니다.

 

visibility속성

요소를 보이게 하거나 보이지 않게 하기

기본형 설명
visibility: visible 화면에 요소를 표시합니다.(기본값)
visibility: hidden 화면에서 요소를 감춥니다.
visibility: collapse 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절합니다. 그 외의 영역에서는 hidden처리합니다.

 

 

z-index속성

기본형 설명
z-index: <숫자> z-index값이 작을수록 아래 쌓이고 높을수록 위에 쌓입니다.(값이 높은게 앞에 표시됨)

 

 

다단으로 편집하기

column-width

단의 너비 고정하고 다단 구성하기

기본형 설명
column-width: <크기> 단 너비를 직접 지정합니다.
column-width: auto 단의 개수(column-count) 같은 다른 속성에 따라 단의 너비가 자동 계산됩니다.

column-coun속성

단의 개수 고정하고 다단 구성하기

기본형 설명
column-count: <숫자> 콘텐츠가 들어갈 단의 개수를 지정합니다. 0보다 큰수를 사용합니다.
column-count: auto 단의 너비(column-width) 같은 다른 속성에 따라 단의 개수가 자동 계산됩니다.

column-gap속성

단과 단 사이 여백 지정하기

기본형 설명
column-gap: <크기> 단과 단 사이의 여백을 숫자로 지정합니다.
column-gap: normal 여백을 자동으로 지정합니다. W3C에서 권장하는 여백은 1em입니다.

column-rule속성

기본형
column-rule-color: <색상>
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
column-rule-width: <크기> | thin | medium | thick
column-rule-: <너비> <스타일> <속성>

break-after속성

다단 위치 지정하기

속성 단 나눌 위치 동작
단 나눔 단 나누지 않음
break-before 특정 요소 앞 column avoid-column
break-after 특정 요소 뒤
break-inside 특정 요소 안

column-span 속성

여러 단을 하나로 합치기

기본값 설명
column-span: 1 단을 하나만 합치는 것 합치지 않은것과 같다.(기본값)
column-span: all 전체 단을 하나로 합쳐 표현합니다. 단의 일부만 합칠 수 없습니다.

 

 

 

 

표 스타일

caption-side 속성

표 제목 위치 정하기

표 제목은 <caption>태그를 이용해 캡션으로 표시합니다. 기본적으로 표의 위쪽에 표시되지만 caption-side속성을 이용하면 캡션의 위치를 표 아래쪽으로 옮길 수 있습니다.

기본형 설명
caption-side: top 캡션을 표의 윗부분에 표시합니다. (기본값)
caption-side: bottom 캡션을 표의 아랫부분에 표시합니다.

border속성

표 테두리 스타일 결정하기

표를 삽입할 때 기본적으로 <table> 태그의 border 속성을 이용해<table border="1">처럼 사용하면 표에 테두리를 그릴 수 있습니다.(표를 완성하기 전까지 표를 표시할 수 있는 쉬운 방법입니다.)

여기에 CSS의 border 속성을 이용해 테두리의 색상이나 형태, 너비 등을 지정할 수 있습니다. 이때 <table>태그에서 border속성을 이용해 <table border="1">처럼 테두리를 표시했을 경우, 표의 바깥 테두리뿐만 아니라 셀의 테두리까지 모두 표시되지만, CSS를 이용해 테두리를 표시할 때는 표의 바깥 테두리와 셀의 테두리를 따로 지정해야 합니다.

 

 

border-collapse속성

테두리 통합, 분리하기

<table>태그와 <td>태그에서 border속성을 사용하면 두 줄로 표시되는데 이때 border-collapse속성을 이용하면 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 그대로 둘 것인지, 두 테두리를 하나로 합칠 것인지 결정할 수 있습니다.

기본형 설명
border-collapse: collapse 테두리를 하나로 합쳐 표시합니다.
border-collapse: separate 테두리를 따로 표시합니다. 기본 값입니다.

 

 

 

border-spacing속성

인접한 셀 테두리 사이 거리 지정하기

border-collapse:separate를 사용해 셀들을 분리했을 경우, 인접한 셀 테두리 사이의 거리를 지정합니다.

기본형 설명
border-spacing: <크기> px이나 em등 크기와 단위를 직접 지정합니다.

 

empty-cells속성

빈 셀의 표시 여부 지정하기

기본형 설명
empty-cells: show 빈 셀 주위에 테두리를 그려 빈 셀을 표시합니다.(기본형)
empty-cells: hide 빈 셀에 테두리를 그리지 않고 비워 둡니다.

 

width, height속성

표의 너비와 높이 지정하기

표의 셀들은 <th>태그나 <td>태그를 사용해 구성되는데 이 태그들은 셀을 만들 뿐, 표와 셀의 형태를 꾸미려면 CSS를 이용해야합니다. 맨 먼저 살펴봐야 하는 것은 표와 셀의 너비입니다. 특별히 지정하지 않는다면 셀 안의 내용이 표시될 만큼만 표시됩니다. 특정한 크기로 표시하고 싶다면 다른 웹 요소들의 너비를 지정할 때처럼 width 속성을 이용해 표와 셀의 너비를 지정하면 됩니다. 마찬가지로 height 속성을 이용해 높이도 지정할 수 있습니다. 이때 사용할 수 있는 값은 실제 크기를 나타내는 px이나 부모 요소를 기준으로 한 %입니다.

표의 너비를 지정하고 셀의 너비를 지정하지 않는다면 내용이 없을 경우의 표의 너비를 셀의 개수로 나누어 셀의 너비를 일정하게 지정하고 내용이 잇다면 내용에 따라 동일한 비율로 지정합니다.

 

table-layout속성

콘텐츠에 맞게 셀 너비 지정하기

기본형 설명
table-layout: fixed 셀 너비를 고정합니다. 즉, 셀 내용에 따라 셀의 너비가 달라지지 않습니다.
table-layout: auto 셀 내용에 따라 셀의 너비가 달라집니다. 기본 값입니다.

 

vertical-align 속성 - 셀 안에서 수직 정렬하기

기본형 설명
vertical-align: baseline 인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춥니다.
vertical-align: sub 인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춥니다.
vertical-align: super 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춥니다.
vertical-align: top 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춥니다.
vertical-align: middle 인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춥니다.
vertical-align: bottom 인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춥니다.
vertical-align: text-top 인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춥니다.
vertical-align: text-bottom 인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춥니다.
vertical-align: <길이 값> 기준선을 0px로 생각하고 길이 값이 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮깁니다.
vertical-align: <백분율 값> 기준선을 0%로 생각하고 line-height의 몇%인지에 따라 양수면 위로, 음수면 아래로 옮깁니다.

 

표의 셀에서 사용할 경우 기준선이나 위, 아래, 가운데 등으로 정렬할 수 있습니다.

속성 값 설명
baseline 셀의 기준선에 내용의 기준선을 맞춥니다.
top 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춥니다.
middle 패딩 박스의 중앙에 내용을 맞춥니다.
bottom 패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춥니다.

 

저작자표시 비영리

'HTML > CSS 레이아웃' 카테고리의 다른 글

CSS레이아웃 예제  (0) 2021.08.15

퀴즈1~2

1. 박스 모델의 네 방향 테두리 두께를 다르게 지정하기 위해 다음과 같은 CSS 소스를 사용했습니다. 이것을 border-width 속성 하나로 묶어 지정하려면 기존 4개의 값을 어떻게 나열해야 할지 작성하세요.

border-top-width: 5px
border-bottom-width: 10px
border-left-width: 15px
border-right-width: 20px

답: border-width: 5px 20px 10px 15px

 

2. 08/quiz-2.html에는 4개 항목이 있는 순서없는 목록이 삽입되어 있습니다. 여기에 다음 조건에 맞는 CSS를 적용해 가로 내비게이션 메뉴로 만드세요

1. 목록의 불릿을 없앱니다.
2. 목록의 항목을 가로로 배치합니다.
3. 각 항목에 1픽셀짜리 검은색 실선을 표시합니다.
4. 각 항목의 상하 패딩은 10px, 좌우 패딩은 20px로 지정합니다.
5. 각 항목의 네 방향 마진은 10px로 지정합니다.
<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>display 속성</title>
		<style>
			a:link, a:visited {
				color:black;
				text-decoration: none;
			}
		</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>

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>display 속성</title>
		<style>
			a:link, a:visited {
				border-style: solid;
				border-width: 1px;
				color:black;
				text-decoration: none;
				padding: 10px 20px;
				margin: 10px;
				list-style-type: none;
				display: inline-block;
			}
			ul li {
				list-style-type: none;
				display: inline-block;
			}
		</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>

저작자표시 비영리

'HTML > CSS 박스 모델' 카테고리의 다른 글

CSS 박스 모델  (0) 2021.08.14

웹 문서에 내용을 배치할 때는 각 요소를 박스 형태로 구성하고, 이것을 'CSS 박스 모델'이라고 하는데 각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백들로 구성됩니다.

 

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

블록레벨(block-level)요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다.

너비나 마진, 패딩 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 합니다.

반면, 인라인 레벨(inline-level)요소는 줄을 차지하지 않는 요소입니다. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에넌 다른요소가 올 수 있습니다.

종류 해당 태그
블록 레벨 태그 <p>, <h1>~<h2>, <ul>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>
인라인 레벨 태그 <img>, <object>, <br>, <sub>, <span>, <input>, <textarea>, <label>, <button>

이 중 input, textarea, label태그는 display:를 이용해서 넓이와 높이를 블록태그처럼 지정 가능하다.

 

※박스 모델(box model)

박스 형태의 콘텐츠

웹 문서의 블록레벨 요소들은 모두 박스 형태입니다. 스타일시트에서는 박스 형태인 요소를 박스모델(boxmodel)요소라고 부릅니다.

박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding) 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다. 

테두리, 마진은 각각 상하좌우 네 방향으로 나뉘어져 있어 네 방향의 스타일을 따로 설젛알 수 있습니다.

 

width, height 속성

콘텐츠 영역의 크기

기본형 설명
width: <크기> | <백분율> | auto 너비를 속성값에 따라 지정한다.
height: <크기> | <백분율> | auto 높이를 속성값에 따라 지정한다.
속성 값 설명
<크기> 너비나 높이값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정합니다.
<백분율> 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정합니다.
auto 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정됩니다. 기본값입니다.

 

실제 콘텐츠 크기 계산하기

내벼유백+테두리값에 따라 증가할 수 있다.

모던 브라우저에서 박스 모델의 전체 너비 = width 값 + 좌우 패딩 + 좌우 테두리
인터넷 익스플로러 6에서 박스 모델의 width 값= 콘텐츠 너비 + 좌우 패딩 + 좌우 테두리

 

display 속성

화면 배치 방법 결정하기

기본형 설명
display: block; 해당 요소를 블럭 레벨로 지정합니다.
display: inline; 블록 레벨 요소를 인라인 레벨로 바꿀 수 있습니다.
display: inline-block; 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용한다.
display: none; 해당 요소를 화면에 표시하지 않고 공간도 차지하지 않습니다
display: contents;  
display: table;  
display: table-cell;  

display: none;과 visibility:hidden;과 다른점은 visibility:hidden은 공간을 차지합니다.

 

기타 display 속성 값들

속성 값 설명
inherit 상위 요소의 display 속성을 상속받습니다.
table 블록 레벨의 표로 만듭니다.
inline-table 인라인 레벨의 표로 만듭니다
table-row 표의 행으로 만듭니다
table-row-group 표의 행 그룹으로 만듭니다.
table-header-group 표의 제목 영역(header)그룹으로 만듭니다.
table-footer-group 표의 요약 영역(footer)그룹으로 만듭니다.
table-column 표의 열로 만듭니다.
table-column-group 표의 열 그룹으로 만듭니다.
table-cell 표에서 하나의 셀로 만듭니다.
table-caption 표의 캡션을 만듭니다.
list-item 목록의 항목을 표시할 수 있도록 기본적인 블록 박스와 표시자를 만듭니다.

 

 

테두리 관련 속성들

border-style 속성

테두리 스타일 지정하기

기본형 설명
none 테두리가 나타나지 않습니다.(기본값)
hidden 테두리가 나타나지 않습니다. border-collapse:collpase일 경우, 다른 테두리도 표시되지 않습니다.
dashed 테두리를 짧은 선(직선으로 된 점선)으로 표시합니다.
dotted 테두리를 점선으로 표시합니다.
double 테두리를 이중선(겹선)으로 표시합니다. 두 선 사이의 간격은 border-width 값으로 지정합니다.
groove 테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인듯 입체적으로 보입니다.(기본값)
inset border-collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 border-collapse:collpase일 경우, ridge와 똑같이 표시됩니다.
outset border-collapse:separate일 경우, 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고 border-collapse:collpase일 경우, ridge와 똑같이 표시됩니다.
ridge 테두리를 창에서 튀어나온 것처럼 표시합니다.
solid 테두리를 실선으로 표시합니다.

 

border-width속성

테두리 두께 지정하기

기본형 설명
border-top-width: <크기> | thin | medium | thick 위쪽 테두리 속성
border-right-width: <크기> | thin | medium | thick 오른쪽 테두리 속성
border-bottom-width: <크기> | thin | medium | thick 아래쪽 테두리 속성
border-left-width: <크기> | thin | medium | thick 왼쪽 테두리 속성
border-width: <크기> | thin | medium | thick 모든 방향 테두리 속성

 

border-color

테두리 색상 지정하기

기본형 설명
border-top-coor: <색상> 위쪽 테두리 색상
border-right-coor: <색상> 오른쪽 테두리 색상
border-bottom-coor: <색상> 아래쪽 테두리 색상
border-left-coor: <색상> 왼쪽 테두리 색상
border-coor: <색상> 모든 테두리의 색상

 

border 속성

테두리 스타일 묶어 지정하기

기본형 설명
border-top: <두께> <색상> <스타일> 위쪽 테두리 스타일을 묶어서 지정한다.
border-right: <두께> <색상> <스타일> 오른쪽 테두리 스타일을 묶어서 지정한다.
border-bottom: <두께> <색상> <스타일> 아래쪽 테두리 스타일을 묶어서 지정한다.
border-left: <두께> <색상> <스타일> 왼쪽 테두리 스타일을 묶어서 지정한다.
border: <두께> <색상> <스타일> 모든 테두리 스타일을 묶어서 지정한다.

 

border-radius 속성

박스 모서리 둥글게 만들기

기본형 설명
border-top-left-radius: <크기> | <백분율> 왼쪽위의 원의 크기와 백분율을 지정한다.
border-top-right-radius: <크기> | <백분율> 오른쪽위의 크기와 백분율을 지정한다.
border-bottom-right-radius: <크기> | <백분율> 오른쪽아래의 크기와 백분율을 지정한다.
border-bottom-left-radius: <크기> | <백분율> 왼쪽아래의 크기와 백분율을 지정한다.
border-radius: <크기> | <백분율> 모든 모서리의 크기와 백분율을 지절한다.

모서리 원의 반지름이 border-radius 속성값이 됩니다.

속성 값 설명
<크기> 둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시합니다.
<백분율> 현재 요소의 크기를 기준으로 둥글게 처리할 반지름의 크기를 %로 지정합니다.

 

타원 형태로 둥글게 만들기

기본형 설명
border-top-left-radius: <가로 크기> <세로 크기> 왼쪽위모서리의 타원형으로 가로, 세로크기를 지정한다.
border-top-right-radius: <가로 크기> <세로 크기> 오른쪽위모서리의 타원형으로 가로, 세로크기를 지정한다.
border-bottom-right-radius: <가로 크기> <세로 크기> 오른쪽아래모서리의 타원형으로 가로, 세로크기를 지정한다.
border-bottom-left-radius: <가로 크기> <세로 크기> 왼쪽아래모서리의 타원형으로 가로, 세로크기를 지정한다.
border-radius: <가로 크기> <세로 크기> 모든곳모서리의 타원형으로 가로, 세로크기를 지정한다.

 

box-shadow 속성

기본형 설명
box-shadow: none | <그림자 값> [, <그림자 값>];
<그림자값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset		 선택한 요소에 그림자 효과를 낼 수 있다.
속성 값 설명
<수평 거리> 그림자의 수평 옵셋 거리(수평으로 얼마나 떨어져 있는지)입니다. 양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만듭니다. (필수 속성)
<수직 거리> 구림자의 수직 옵셋 거리(세로로 얼마나 떨어져 있는지)입니다. 양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽에 그림자를 만듭니다.(필수 속성)
<흐림 정도> 그림자의 흐림 정도(blur radius)를 지정합니다. 이 값을 생략하면 0을 기본값으로 해 진한 그림자를 표시합니다.이 값이 커질수록 부드러운 그림자를 표시하며 음수값은 사용할 수 없습니다.
<번짐 정도> 그림자의 번지는 정도를 나타냅니다. 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나가기 때문에 그림자가 박스보다 크게 표시됩니다. 음수 값은 모든 방향으로 축소되어 보입니다. 기본값은 0입니다.
<색상> 그림자의 색상을 지정합니다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 개의 색상을 지정할 수도 있습니다. 필요한 경우에만 사용하는 옵션 값이며 기본 값은 현재 글자 색입니다.
inset 이 키워드를 함께 표시하면 안쪽 그림자로 그립니다. 필요한 경우에만 사용하는 옵션입니다.

 

 

 

여백을 조절하는 속성들

margin 속성

요소 주변 여백 설정하기 

기본형 설명
margin-top: <크기> | <백분율> | auto 위쪽 한 요소와 다른요소의 여백을 조절한다.
margin-right: <크기> | <백분율> | auto 오른쪽 한 요소와 다른요소의 여백을 조절한다.
margin-bottom: <크기> | <백분율> | auto 아래쪽 한 요소와 다른요소의 여백을 조절한다.
margin-left: <크기> | <백분율> | auto 왼쪽 한 요소와 다른요소의 여백을 조절한다.
margin: <크기> | <백분율> | auto 모든 한 요소와 다른요소의 여백을 조절한다.
속성 값 설명
<크기> 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정합니다.
<백분율> 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정합니다.
auto display 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다.

margin 속성을 이용해 마진 값을 한꺼번에 설정할때는 값의 개수에 따라 어느 방향에 적용될지 결정됩니다.

(한개면 전체 두개면 상하+좌우 세개면 top + (right+left) + bottom)

top > right > bottom > left순으로 지정됩니다.

 

padding속성

콘텐츠 영역과 테두리 사이 여백 설정하기

패딩(padding)이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다.

기본형 설명
padding-top: <크기> | <백분율> | auto 위쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding-right: <크기> | <백분율> | auto 오른쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding-bottom: <크기> | <백분율> | auto 아래쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding-left: <크기> | <백분율> | auto 왼쪽의 콘텐츠-테두리사이의 여백을 조절한다.
padding: <크기> | <백분율> | auto 모든 방향의 콘텐츠-테두리사이의 여백을 조절한다.

 

저작자표시 비영리

'HTML > CSS 박스 모델' 카테고리의 다른 글

CSS 박스 모델 예제  (0) 2021.08.15

연습문제1~3

1. quiz-1.html에는 <div> 영역 안에 텍스트가 표시되어 있습니다. 다음 조건에 맞는 스타일 속성을 <div>영역의 스타일에 추가하세요.

1. <div> 영역에 적용한 .container 스타일을 수정합니다.
2. 배경 색은 rgba 표기법을 사용하고 파란색에 불투명도를 0.2로 합니다.
3. 기존 테두리 색(#ccc)을 파란색(blue)으로 바꿉니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				width:500px;
				padding:10px;
				border:1px solid #ccc;
			}
			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>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				background-color: rgba(0, 0, 255, 0.2);
				width:500px;
				padding:10px;
				border:1px solid blue;
			}
			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>

 

 

2. quiz-2.html에는 <div> 영역에 연한 파란색의 배경 색이 적용되어 있습니다. 이 영역 위에 마우스 커서를 올려 놓았을 때의 스타일을 바꾸려고 합니다. 다음 조건에 맞게 스타일을 추가하세요.

1. <div> 영역에 마우스 커서를 올려 놓았을 때의 색상이므로 .container:hover 스타일을 추가합니다.
2. 배경 색은 파란색(blue)로 바꿉니다.
3. 글자 색은 흰색으로 바꿉니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				width:500px;
				padding:10px;
				border:1px solid blue;
				background:rgba(0,0,255,0.2);
			}
			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>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				width:500px;
				padding:10px;
				border:1px solid blue;
				background:rgba(0,0,255,0.2);
			}
			.container:hover {
				background: rgb(0,0,255);
				color: white;
			}
			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. quiz-3.html에는 텍스트 한 줄이 표시되어 있습니다. 사각 영역에 배경 이미지를 채우고 텍스트 부분에도 배경 색을 넣어 결과 화면처럼 만들어 보세요.

1. 영역 전체를 감싸는 스타일은 .container이고 텍스트 영역을 감싸는 스타일은 .content입니다.
2. 영역 전체에 배경 이미지(images/apple.bg.jpg)를 삽입하는데 반복하지 않고 영역 전체를 덮을 수 있도록 합니다(.container 스타일 속성에 추가).
3. 배경 이미지를 추가하면 텍스트가 눈에 잘 띄지 않습니다. 텍스트 영역에 흰색 배경을 깔되 너무 진하지 않게 불투명도(alpha 값)를 0.5로 지정합니다(.content 스타일 속성 추가).
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				position: relative;
				width: 600px;
				height: 400px;
				padding: 20px;
				border: 1px solid #ccc;
			}

			.content {
				position: absolute;
				top: 300px;
				width: 90%;
				padding: 10px;
			}

			h1 {
				font-size: 30px;
				text-align: center;
			}

			p {
				font-size: 16px;
				line-height: 25px;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<div class="content">
				<h1>하루 한 알의 사과는 의사를 멀리 한다</h1>
			</div>
		</div>
  </body>
</html>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				background: no-repeat;
				background-position: 100% 100%;
				position: relative;
				width: 600px;
				height: 400px;
				padding: 20px;
				border: 1px solid #ccc;
			}

			.content {
				background: rgba(255, 255, 255, 0.5);
				position: absolute;
				top: 300px;
				width: 90%;
				padding: 10px;
			}

			h1 {
				font-size: 30px;
				text-align: center;
			}

			p {
				font-size: 16px;
				line-height: 25px;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<img src="images/apple-bg.jpg">
			<div class="content">
				<h1>하루 한 알의 사과는 의사를 멀리 한다</h1>
			</div>
		</div>
  </body>
</html>

저작자표시 비영리

'HTML > 색상과 배경을 위한 스타일' 카테고리의 다른 글

색상과 배경을 위한 스타일  (0) 2021.08.14

웹 문서에는 문서 전체뿐 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있는데, 배경에는 단순한 색상이나 이미지를 사용할 수도 있습니다. 또한 그러데이션을 넣거나 색의 투명도도 조절할 수 있습니다.

 

 

웹에서 색상 표현하기

16진수 표기법

#ffff00처럼 # 기호 다음에 6자리의 16진수로 표시하는 것으로 가장 기본적인 방법입니다.

#RRGGBB형식으로 표시하며, 두자리씩 중복될 경우 #ff0로 줄여서 표기할 수 있습니다.

 

rgb와 rgba표기법

기본형 설명
rgb(red 값, green 값, blue 값); 빨간색, 초록색, 파란색의 양을 나타낸다
rgba(red 값, green 값, blue 값, alpha 값); 빨간색, 초록색, 파란색, 불투명도값을 나타내며 1은 완전 불투명한 값이고 0은 투명한 값입니다.

hsl과 hsla 표기법

기본형 설명
hsl(<hue 값>, <saturation 값>, <lightness 값>); hue는 각도, saturation은 채도로 %로 표시하고 아무것도 섞이지 않은 상태가 채도가 높다. , lightness는 밝기로 %로 표시하며 높을수록 밝다.
hsla(<hue 값>, <saturation 값>, <lightness 값>, <alpha 값>); 앞의 세 값은 위와 같고 alpha는 불투명도를 나타낸다.

색상 이름 표기법

모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상이라고 하며 기본 16가지 색상을 포함해 모두 216가지입니다.

 

 

배경 색과 배경 이미지

background-color 속성

배경 색 지정하기

기본형 설명
background-color: <색상> 16진수, rgb값 또는 색상 이름을 사용해 지정합니다.

배경 색 스타일과 상속

글꼴이나 글자 크기 등은 <body>태그 선택자에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용되었으나, 예외적으로 background-color값은 상속되지 않습니다.

* 배경의 기본색은 투명색(transparent)입니다.

 

background-clip 속성

배경 적용 범위 조절하기

박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 (padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있습니다.

기본형 설명
background-clip: border-box 박스 모델의 가장 외곽인 테두리(border)까지 적용합니다.
background-clip: padding-box 박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용합니다.
background-clip: content-box 박스 모델에서 내용 부분에만 적용합니다.

background-image 속성

웹 요소에 배경 이미지 넣기

웹 요소에 배경 이미지 넣기 배경 이미지는 웹에서 사용 가능한 파일인 jpg, gif, png 파일을 사용하며 이것을 'url(파일 경로)'형식으로 사용합니다.

기본형 설명
body {background-image: url('bg1.png');}
#area {background-image: url('bg2.png');}		 배경 이미지는 여러 개를 사용할 수 있는데 이럴 경우, 첫 번째 이미지부터 순서대로 표시합니다.

background-repeat속성

배경 이미지 반복 방법 지정하기

배경 이미지를 반복하지 않게 할 수도 있고 반복하더라도 가로 반복이나 세로 반복 등 반복 방향을 지정할 수 있습니다.

기본형 설명
background-repeat : repeat 브라우저 화면에 가득 찰 때까지 배경이미지를 가로와 세로로 반복합니다.
background-repeat : repeat-x 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복합니다.
background-repeat : repeat-y 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복합니다.
background-repeat : no-repeat 배경 이미지를 한 번만 표시하고 반복하지 않습니다.

background-size 속성

배경 이미지 크기 조절하기

기본형 설명
background-size: auto 원래 배경 이미지만큼 표시됩니다.
background-size: contain 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소합니다.
background-size: cover 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소합니다.
background-size: <크기 값> 너비 값과 높이 값을 지정합니다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정합니다.
background-size: <백분율> 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경이미지를 확대하거나 축소합니다.

background-position 속성

배경 이미지 위치 조절하기

기본형 설명
background-position: <수평 위치> <수직 위치>; 수평 위치 값과 수직 위치 값을 함께 표시
수평 위치 : left | center | right | <백분율> | <길이 값> 수평 위치에 들어갈 수 있는 값
수직 위치 : top | center | bottom | <백분율> | <길이 값> 수직 위치에 들어갈 수 있는 값

 

background-origin 속성

배경 이미지 배치할 기준 조절하기

기본형 설명
background-origin: border-box  박스 모델의 가장 외곽인 테두리(border)가 기준이 된다.
background-origin: padding-box  박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 된다.
background-origin: content-box 박스 모델에서 내용 부분이 기준이 됩니다.

 

background-attachment속성

배경 이미지 고정하기

기본형 설명
background-attachment: scroll 화면 스크롤과 함께 배경 이미지도 스크롤됩니다.
background-attachment: fixed 화면이 스크롤되더라도 배경 이미지는 고정됩니다.

background 속성

속성 하나로 배경 이미지 제어하기

background:url('images/bg3.jpg') no-repeat fixed right bottom;

속성 속성 값
background-image url('images/bg3.jpg')
background-repeat no-repeat
background-attachment fixed
background-position right bottom
background-clip border-box
background-origin padding-box
background-size auto

축약형의 다양한 속성 확인하는 사이트

https://www.w3.org/TR/css-backgrounds-3/#background

 

CSS Backgrounds and Borders Module Level 3

Abstract This draft contains the features of CSS relating to borders and backgrounds. The main extensions compared to level 2 are borders consisting of images, boxes with multiple backgrounds, boxes with rounded corners and boxes with shadows. CSS is a la

www.w3.org

 

 

 

그라데이션 효과로 배경 꾸미기

그라데이션 브라우저 접두사

접두사 브라우저 버전
-webkit- 사파리 5.1~6.0
-moz- 파이어폭스 3.6 ~ 15
-o- 오페라 11.1 ~ 12.0 
<style>
	.grad {
    	background : blue;
        background : -webkit-linear-gradient(left top, blue, white);
        background : -moz-linear-gradient(right bottom, blue, white);
        background : -o-linear-gradient(right bottom, blue, white);
        background : linear-gradient(to right bottom, blue, white);
    }
</style>

 

선형 그라데이션

기본형 설명
linear-gradient( <각도> to <방향>, volor-stop, [color-stop,...]); 그라데이션의 방향을 설정한다., 색상의 수(한개면 단색)

 

방향

그라데이션의 방향을 지시할 때는 끝 지점을 기준으로 'to'키워드와 함께 사용합니다.

background: linear-gradient(to right bottom, blue, white);와 같이 사용합니다.

속성 값 설명
to top 아래에서 시작해 위로 그라데이션이 만들어집니다.
to left 오른쪽에서 시작해 왼쪽으로 그라데이션이 만들어집니다.
to right 왼쪽에서 시작해 오른쪽으로 그라데이션이 만들어집니다.
to bottom 위에서 시작해 아래로 그라데이션이 만들어집니다.

각도

기본형 설명
background: linear-gradient(45deg, #ff0000, #ffffff); 각도는 위가0deg, 오른쪽이 90deg, 아래가 180deg, 왼쪽이 270deg입니다.(시계방향)

색상 중지 점(color-stop)

선형 그라데이션을 만들기 위해서는 바뀌는 부분의 색을 지정해주어야 하는데, 바뀌는 지점을 색상 중지점이라고 합니다.

기본형 설명
background: linear-gradient(to bottom, #06f, white 30%, #06f); 방향, 시작색, 중지 점 색상과 위치, 끝색

원형 그라데이션

기본형 설명
radial-gradient( <최종 모양> 크기 at <위치> color-stop, [color-stop...]) 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다.
background: radial-gradient(circle, white, yellow, red); 모양 크기 at 위치, color-stop, color-stop, color-stop

위치

그라데이션이 시작하는 원의 중심도 지정할 수 있습니다. '모양'과 '크기'속성 다음에 at키워드와 함께 위치값을 지정합니다. 사용할 수 있는 값은 키워드(left, center, right중 하나, top, center, bottom중 하나)입니다.

크기

1. closet-side 속성 값

가까운 모서리에 그라데이션 가장자리가 닿을 때 까지 그라데이션을 그립니다.

2.closest-corner

그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 코너에 닿도록 합니다.

3. farthest-side

그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만나도록합니다.

4. farthest-corner

그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 합니다.(기본값)

 

색상 중지 점(color-stop)

기본형 설명
background-radial-gradient(red, yellow 20%, skyblue); 색옆에 %값을 넣으면 그라데이션 조절 가능

그라데이션 반복 패턴 만들기

기본형 설명
background: repeating-linear-gradient(yellow, red 20px); 그라데이션을 반복한다.
저작자표시 비영리

'HTML > 색상과 배경을 위한 스타일' 카테고리의 다른 글

색상과 배경을 위한 스타일예제  (0) 2021.08.14

문제 1~4

1. quiz-1.html에는 제목 아래에 여섯 개의 텍스트 문단이 있습니다. 각 문단의 하이픈(-) 앞에 있는 텍스트에 다음 조건을 따라 텍스트 스타일을 정의하고 적용하세요.

조건
1. 여러 텍스트에 적용하기 위해 class 선택자를 사용합니다.
2. 하이픈 앞에 있는 텍스트의 굵기를 '700'으로 설정합니다.
3. 하이픈 앞에 있는 텍스트의 크기는 상속한 글자 크기보다 한 단계 크게 지정합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:500px;
				padding:10px;
				border:1px solid #ccc;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<h1>최신 웹 디자인 트렌드</h1>
			<p>반응형 웹 디자인 - 다양한 화면 크기에 최적화하다</p>
			<p>플랫 디자인 - 입체에서 평면으로 </p>
			<p>풀스크린 배경 - 콘텐츠에 집중</p>
			<p>원 페이지 사이트 - 한 페이지에 모든 내용을 담다</p>
			<p>패럴랙스 스크롤링 - 동적인 효과로 강한 인상을!</p>
			<p>웹 폰트 - 웹 타이포그래피를 받쳐주는 기술</p>
		</div>
  </body>
</html>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:500px;
				padding:10px;
				border:1px solid #ccc;
			}
			p a{
				font-weight: 700;
				font-size : large;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<h1>최신 웹 디자인 트렌드</h1>
			<p><a>반응형 웹 디자인</a> - 다양한 화면 크기에 최적화하다</p>
			<p><a>플랫 디자인</a> - 입체에서 평면으로 </p>
			<p><a>풀스크린 배경</a> - 콘텐츠에 집중</p>
			<p><a>원 페이지 사이트</a> - 한 페이지에 모든 내용을 담다</p>
			<p><a>패럴랙스 스크롤링</a> - 동적인 효과로 강한 인상을!</p>
			<p><a>웹 폰트</a> - 웹 타이포그래피를 받쳐주는 기술</p>
		</div>
  </body>
</html>

 

 

2. quiz-2.html에는 순서 없는 목록이 포함되어 있습니다. 다음 조건에 맞게 목록 스타일을 정의하고 적용하세요.

조건
1. 순서 없는 목록의 불릿을 없앱니다.
2. 각 항목의 줄 간격을 글자 크기의 두배로 지정합니다.
3. 각 항목에서 진하게 표시되는 부분의 글자색을 #ad3000으로 수정합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:500px;
				padding:10px;
				border:1px solid #ccc;
			}
			.subject {
				font-weight:700;
				font-size:larger;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<h1>최신 웹 디자인 트렌드</h1>
			<ul>
				<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
				<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
				<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
				<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
				<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
				<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
			</ul>
		</div>
  </body>
</html>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:500px;
				padding:10px;
				border:1px solid #ccc;
			}
			.subject {
				list-style-type: none;
				font: 100%/200% bold;
				font-weight:700;
				font-size:larger;
				color: #ad3000;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<h1>최신 웹 디자인 트렌드</h1>
			<ul>
				<li><span class="subject">반응형 웹 디자인</span> - 다양한 화면 크기에 최적화하다</li>
				<li><span class="subject">플랫 디자인 </span> - 입체에서 평면으로 </li>
				<li><span class="subject">풀스크린 배경 </span> - 콘텐츠에 집중</li>
				<li><span class="subject">원 페이지 사이트 </span> - 한 페이지에 모든 내용을 담다</li>
				<li><span class="subject">패럴랙스 스크롤링 </span> - 동적인 효과로 강한 인상을!</li>
				<li><span class="subject">웹 폰트 </span> - 웹 타이포그래피를 받쳐주는 기술</li>
			</ul>
		</div>
  </body>
</html>

 

 

3. quiz-3.html에는 문서의 제목으로 사용할 '최신 웹 디자인 트렌드'라는 텍스트가 표시됩니다. 배경색이 짙기 때문에 제목 텍스트가 제대로 보이지 않는데 다음과 같은 조건에 맍고하도록 제목 텍스트의 스타일을 정의하고 적용하세요.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:500px;
        height:50px;
        margin:0 auto;
				background-color:#444;
			}    
    </style>
  </head>
  <body>
    <div class="container">
      <h1>최신 웹 디자인 트렌드</h1>
    </div>
  </body>
</html>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:500px;
        height:50px;
        margin:0 auto;
				background-color:#444;
        text-align: center;
			}    
      h1 {
        color:#fff;
        text-shadow: 3px 2px 5px #000;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>최신 웹 디자인 트렌드</h1>
    </div>
  </body>
</html>

4. quiz-4.html에는 <h1> 태그를 사용한 제목과 두 개의 텍스트 문단이 있습니다. 다음 조건에 맞게 텍스트 스타일을 정의하고 적용하세요.

1. 문서 전체의 글꼴은 "맑은 고딕"으로 하고 "맑은 고딕"이 없을 경우, "돋움"을 사용합니다.
2. h1 제목의 글자 크기는 17px로 합니다.
3. p 텍스트 문단의 글자 크기는 16px로 하고 줄 간격은 25px로 지정합니다.
4. accent라는 클래스 선택자를 만들어 '글자를 굵게, 색상은 red'로 지정합니다.
5. 두 번째 텍스트 문단의 첫 번째 문장("이 책은~ 기획되었다.")에 .accent 클래스 스타일을 적용합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			.container {
				width:750px;
				padding:10px;
				border:1px solid #ccc;
			}
			.book-img {
				float:left;
				padding:10px;
				margin-right:20px;
			}
			.book-desc {
				padding:10px;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<div class="book-img">
				<img src="images/book.png" alt="">
			</div>
			<div class="book-desc">
				<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
				<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. </p>
				<p><span class="accent">이 책은 HTML과 CSS에 대한 기초적인 내용만 알고 있다면 누구든 쉽게 코딩으로 여러 기기에 대응할 수 있는 웹 디자인을 만들 수 있도록 기획되었다.</span> jQuery를 몰라도 된다. jQuery 플러그인을 가져다 사용할 수 있는 방법을 소스 한 줄 한 줄 자세하고 친절하게 설명해 놓았으니까!</p>			
				<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/A001/65" target="_blank">[책 자세히 보기]</a></p>
			</div>
		</div>
  </body>
</html>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>텍스트 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			h1 {
				font-size:17px;
			}
			p {
				font-size:16px;
				line-height:25px;
			}
			.accent {
				font-weight:bold;
				color:red;
			}
			.container {
				width:750px;
				padding:10px;
				border:1px solid #ccc;
			}
			.book-img {
				float:left;
				padding:10px;
				margin-right:20px;
			}
			.book-desc {
				padding:10px;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<div class="book-img">
				<img src="images/book.png" alt="">
			</div>
			<div class="book-desc">
				<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
				<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. </p>
				<p><span class="accent">이 책은 HTML과 CSS에 대한 기초적인 내용만 알고 있다면 누구든 쉽게 코딩으로 여러 기기에 대응할 수 있는 웹 디자인을 만들 수 있도록 기획되었다.</span> jQuery를 몰라도 된다. jQuery 플러그인을 가져다 사용할 수 있는 방법을 소스 한 줄 한 줄 자세하고 친절하게 설명해 놓았으니까!</p>			
				<p><a href="http://www.easyspub.co.kr/20_Menu/BookView/A001/65" target="_blank">[책 자세히 보기]</a></p>
			</div>
		</div>
  </body>
</html>

저작자표시 비영리

'HTML > 텍스트 관련 스타일' 카테고리의 다른 글

텍스트 관련 스타일  (0) 2021.08.12

+ Recent posts

티스토리툴바