Study Web Development

12월 14일

이전으로

CSS3

3. 선택자

기본 선택자의 연계

태그 선택자와 ID 선택자의 연계
  1. 새 HTML 파일 s06_complex.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 ID 선택자 연계</title>
<style type="text/css">
	h1 {
		color:darkseagreen;
		background:darkslategray; /* 배경색 지정에는 background-color와 background 모두 사용 가능 */
	}
	h1#target { /* h1 태그를 검색 후, 여러 개의 h1 태그 중 ID가 target인 h1 태그를 검색; 태그 선택자와 ID 선택자를 연계할 때는 선택자 사이에 공백이 없어야 함; 태그나 ID 단독 선택자보다 우선순위가 높음 */
		color:mistyrose;
		background:tomato;	
	}
</style>
</head>
<body>
<h1 id="target">가을</h1>
<h1>별</h1>
<span>바다</span>
</body>
</html>

그룹 지정(동일 스타일을 사용하는 엘리먼트 정의)

  1. 새 HTML 파일 s07_group.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<style type="text/css">
	h1,.winter,#fall { /* 여러 개의 태그에 동일한 스타일을 적용하고 싶을 때 태그를 가리키는 선택자들을 ,로 나열해서 지정 */
		font-size:20pt;
		color:aliceblue;
		background:plum;
	}
</style>
</head>
<body>
<h1>여러 개의 태그를 동시에 선택</h1>
<span id="fall">가을이 지나가네요!!</span>
<p class="winter">겨울 눈</p>
</body>
</html>

조합 선택자(결합자)

하위(후손) 선택자
  1. 새 HTML 파일 s08_descendant.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하위 선택자 또는 후손 선택자(descendant selector)</title>
<style type="text/css">
	body div { /* 공백을 결합자로 하위(후손) 선택자를 지정; body 태그 안에서 지정한 하위(후손) 태그인 div 태그와 일치하는 모든 태그를 선택함 */
		border:3px solid peachpuff; /* 테두리 */
	}
</style>
</head>
<body>
	<div> <!-- 선택됨 -->
		<ul>
			<li>사과</li>
			<li>귤</li>
			<li>바나나</li>
			<li>토마토</li>
			<li>배</li>
		</ul>
		<div>하늘</div> <!-- 선택됨 -->
	</div>
	<p>
		<span>하하</span>
	</p>
</body>
</html>
자식 선택자
  1. 새 HTML 파일 s09_child.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자식 선택자(child selector)</title>
<style type="text/css">
	body > div { /* >를 결합자로 선택자를 지정시, 지정한 자식 태그(직계 자식)만 선택 */
		border:3px solid peachpuff;
	}
</style>
</head>
<body>
	<div> <!-- 선택됨 -->
		<ul>
			<li>사과</li>
			<li>귤</li>
			<li>바나나</li>
			<li>토마토</li>
			<li>배</li>
		</ul>
		<div>하늘</div> <!-- 선택되지 않음 -->
	</div>
	<p>
		<span>하하</span>
	</p>
</body>
</html>
이웃(인접 형제) 선택자
  1. 새 HTML 파일 s10_adjacent.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이웃 선택자(adjacent sibling selector)</title>
<style type="text/css">
	div+p {color:#ff0000;} /* +를 결합자로 하여 첫 번째 선택자로 태그를 검색하고, 그 태그의 바로 다음에 위치하는 태그가 두 번째 선택자와 일치하면 CSS를 지정 */
</style>
</head>
<body>
	<div>테스트1</div>
	<p>테스트2</p> <!-- CSS 적용됨 -->
	<div>테스트a</div>
	<span>테스트b</span>
	<p>테스트c</p>
	<div>테스트4</div>
	<p>테스트3</p> <!-- CSS 적용됨 -->
</body>
</html>
형제 선택자
  1. 새 HTML 파일 s11_sibling.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형제 선택자(sibling selector)</title>
<style type="text/css">
	div~div {color:#ffc700;} /* ~를 결합자로 하여 첫 번째 선택자로 태그를 검색하고, 그 태그 자신을 제외한 모든 형제들 중 두 번째 선택자와 일치하는 태그들에 CSS를 지정 */
</style>
</head>
<body>
	<div>test1</div>
	<p>테스트</p>
	<div>test2</div> <!-- CSS 적용됨 -->
	<span>테스트</span>
	<div>test3</div> <!-- CSS 적용됨 -->
</body>
</html>

속성 선택자

  1. 새 HTML 파일 s12_attribute.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style type="text/css">
/* 
속성 선택자
선택자[속성] : 특정 속성을 가지고 있는 태그를 선택
선택자[속성=값] : 속성 안의 값이 특정 값과 같은 태그를 선택
선택자[속성~=값] : 속성 안의 값이 특정 값을 단어로써 포함하는 태그를 선택
선택자[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 태그를 선택
선택자[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 태그를 선택
선택자[속성*=값] : 속성 안의 값이 특정 값을 포함하는 태그를 선택
 */
	a {
		padding:5px; /* 테두리 안 여백 */
		margin-bottom:10px; /* 테두리 밖 여백 */
	}
	
	a[title] {color:thistle;background:indigo;font-size:20pt;}
	a[title="홈페이지"] {color:azure;background:indianred;font-size:25pt;}
	a[title~="email"] {color:lemonchiffon;background:lawngreen;font-size:18pt;} /* 공백으로 구분되어 있는 값(단어)을 검색 */
	a[href^="https://"] {color:whitesmoke;background:lightseagreen;font-size:15pt;}
	a[href$=".co.kr"] {color:beige;background:darkorchid;font-size:20pt}
	a[href*="nate"] {color:linen;background:darkolivegreen;font-size:30pt;} /* 문자열 안에 포함되어 있는 값(문자열 일부)을 검색 */
</style>
</head>
<body>
	<h2>속성 선택자</h2>
	<a href="a.html" title="포트폴리오">포트폴리오</a> <!-- a[title]로 검색 -->
	<a href="a.html" title="홈페이지">홈페이지</a> <!-- a[title="홈페이지"]로 검색 -->
	<a href="a.html" title="contact email link">이메일</a> <!-- a[title~="email"]로 검색 -->
	<br><br>
	<a href="https://www.daum.net">다음</a> <!-- a[href^="https://"]로 검색 -->
	<a href="www.google.co.kr">구글</a> <!-- a[href$=".co.kr"]로 검색 -->
	<a href="www.nate.com" title="네이트로 이동">네이트</a> <!-- a[href*="nate"]로 검색 -->
</body>
</html>

가상 클래스 선택자

  1. 새 HTML 파일 s13_alink.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상 클래스 선택자</title>
<style type="text/css">
/* 
:hover : 마우스 커서가 링크에 올라가 있는 상태
:active : 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
:link : 링크를 클릭하지 않은, 그냥 링크되어 있는 상태
:visited : 링크를 눌러서 방문한 후의 상태
 */
	a:link {
		text-decoration:none; /* a 태그의 밑줄 제거 */
		color:rgb(255,102,102);
	}
	a:visited {
		text-decoration:none;
		color:rgb(89,71,71);
	}
	a:hover {
		border-bottom:1px dotted rgb(255,0,0);
		background-color:skyblue;
	}
	a:active {
		text-decoration:none;
		color:white;
		background-color:black;
	}
</style>
</head>
<body>
	<a href="https://www.naver.com">네이버</a><br>
	<a href="http://www.netian.com">네티앙</a>
</body>
</html>

4. 텍스트 관련 스타일

4-1 text-decoration 속성

  1. 새 폴더 ch07-cssText 생성 후 새 HTML 파일 s01_text_decoration.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
<style type="text/css">
	#t1 {text-decoration:underline;}
	#t2 {text-decoration:overline;}
	#t3 {text-decoration:line-through;}
</style>
</head>
<body>
	<h1>text-decoration</h1>
	<p id="t1">밑줄</p>
	<p id="t2">윗줄</p>
	<p id="t3">취소선</p>
</body>
</html>

4-2 text-align 속성

  1. 새 HTML 파일 s02_text_align.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-align</title>
<style type="text/css">
	#t1 {text-align:left;} /* 왼쪽 정렬; 기본값 */
	#t2 {text-align:right;} /* 오른쪽 정렬 */
	#t3 {text-align:center;} /* 가운데 정렬 */
	#t4 {text-align:justify;} /* 양쪽 정렬 */
</style>
</head>
<body>
	<h1>text-align</h1>
	<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
	<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
	<p id="t3">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
	<p id="t4">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
</body>
</html>

4-3 text-indent 속성

  1. 새 HTML 파일 s03_text_indent.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-indent</title>
<style type="text/css">
	p {width:500px;border:1px solid black;margin:auto;} /* margin을 auto로 지정하면 왼쪽, 오른쪽 여백을 동등하게 배분(=가운데 정렬) */
	#t1 {text-indent:2em;} /* 2글자 폭만큼 들여쓰기 */
	#t2 {text-indent:-1em;} /* 1글자 폭만큼 내어쓰기 */
</style>
</head>
<body>
	<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
	<br>
	<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
</body>
</html>

4-4 letter-spacing 속성, word-spacing 속성

  1. 새 HTML 파일 s04_letter_spacing.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>letter-spacing/word-spacing</title>
<style type="text/css">
	#t1 {letter-spacing:2em;} /* 글자 간격을 2글자 폭으로 지정 */
	#t2 {word-spacing:2em;} /* 단어 간격을 2글자 폭으로 지정 */
</style>
</head>
<body>
	<h1>letter-spacing/word-spacing</h1>
	<p id="t1">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
	<br>
	<p id="t2">예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.</p>
</body>
</html>

4-7 white-space 속성

  1. 새 HTML 파일 s05_white_space.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>white-space</title>
<style type="text/css">
	#t1 {white-space:pre;} /* 연속 공백 유지; 개행 문자 인정; 화면 너비에 따라 자동 줄바꿈되지 않음 */
	#t2 {white-space:pre-line;} /* 연속 공백을 하나로 합침; 개행 문자 인정; 화면 너비에 따라 자동 줄바꿈됨 */
	#t3 {white-space:pre-wrap;} /* 연속 공백 유지; 개행 문자 인정; 화면 너비에 따라 자동 줄바꿈됨 */
	#t4 {white-space:nowrap;} /* 연속 공백을 하나로 합침; 개행 문자 무시; 화면 너비에 따라 자동 줄바꿈되지 않음 */
</style>
</head>
<body>
	<h1>white-space</h1>
	<p id="t1">
	예를 들어          다음 그림처럼     스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	</p>
	<p id="t2">
	예를 들어          다음 그림처럼     스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	</p>
	<p id="t3">
	예를 들어          다음 그림처럼     스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	</p>
	<p id="t4">
	예를 들어          다음 그림처럼     스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다. 예를 들어 다음 그림처럼 스마트폰은 고정이고 스크린에 들어가는 이미지를 다양하게 교체해야 한다.
	</p>
</body>
</html>

4-6 text-transform 속성

  1. 새 HTML 파일 s06_text_transform.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-transform</title>
<style type="text/css">
	#t1 {text-transform:capitalize;} /* 각 단어의 첫 글자를 대문자로 변환 */
	#t2 {text-transform:uppercase;} /* 모든 글자를 대문자로 변환 */
	#t3 {text-transform:lowercase;} /* 모든 글자를 소문자로 변환 */
</style>
</head>
<body>
	<h1>text-transform</h1>
	<p id="t1">pOOR alice!</p>
	<p id="t2">pOOR alice!</p>
	<p id="t3">pOOR alice!</p>
</body>
</html>

4-8 text-shadow 속성

  1. 새 HTML 파일 s07_text_shadow.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style type="text/css">
	p {font-family:Arial;font-size:50px;}
	.text1 {color:#06f;} /* 06f와 0066ff는 같은 색상을 나타냄 */
	.text2 {color:#c30;}
	.text3 {
		color:#06f;
		text-shadow:-3px -3px 5px aqua;
		/* 
		가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지를 지정; 양수는 글자의 오른쪽에, 음수는 글자의 왼쪽에 그림자를 표시
		세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지를 지정; 양수는 글자의 아래쪽에, 음수는 글자의 위쪽에 그림자를 표시
		blur radius : 그림자가 번지는 정도를 지정; 생략시 그림자를 선명하게 표시
		그림자 색상 : 그림자의 색상을 지정
		 */
	}
	.text4 {
		color:#c30;
		text-shadow:3px 3px pink;
	}
</style>
</head>
<body>
	<p>
		<span class="text1">HTML</span> &amp;
		<span class="text2">CSS</span>
	</p>
	<p>
		<span class="text3">HTML</span> &amp;
		<span class="text4">CSS</span>
	</p>
</body>
</html>

4-9 text-overflow 속성

  1. 새 HTML 파일 s08_text_overflow.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
	div.div01 {
		border:1px solid teal;
		width:150px;
		text-overflow:ellipsis; /* 영역을 벗어나 보이지 않는 내용이 있으면 말줄임표 표시 */
		overflow:hidden; /* 영역 밖의 내용은 보이지 않게 처리 */
		white-space:nowrap; /* 자동 줄바꿈 안 됨 */
	}
</style>
</head>
<body>
	<div class="div01">
	엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않으면 엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않으면 엘리먼트가 잘리거나 부모 엘리먼트의 너비 및 높이가 내용을 다 보여줄 만큼 크지 않으면
	</div>
	<div class="div01">말줄임표 없음</div>
</body>
</html>

5. 글꼴 관련 스타일

  1. 새 폴더 ch08-cssFont 생성 후 새 HTML 파일 s01_text_font.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>font</title>
<style type="text/css">
/* 
font-family
serif : 명조 계열 글자체
sans-serif : 고딕 계열 글자체
cursive : 필기체
fantasy : 장식이 되어 있는 글자체
monospace : 일정한 공간으로 되어 있는 글자체

font-style
italic : 이탤릭체
oblique : 기울임체; normal 상태의 글자를 단순히 기울여서 표현

font-variant
small-caps : 작은 대문자로 변환

일괄 지정 font
font:font-style값
	font-weight값
	font-variant값
	font-size값/line-height값
	font-family값
예) .font {font:italic bold small-caps 30pt/50pt serif;}
 */
span {
	font-family:serif;
	font-size:20pt;
	font-style:oblique;
}
p {
	font:italic bold small-caps 30pt/50pt serif;
}
</style>
</head>
<body>
	<span>서울에서 인천까지</span>
	<p>Happy Sunday!!</p>
	<div>Welcome! 환영합니다.</div>
</body>
</html>

6. 목록 스타일

  1. 임의의 이미지 파일 bullet.gif를 C:\javaWork\workspace_jsp\HTML\src\main\webapp\images로 이동
  2. 새 폴더 ch09-cssList 생성 후 새 HTML 파일 s01_list.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트</title>
<style type="text/css">
	ul {
		list-style-type:circle; /* 목록의 기호/문자를 지정하는 속성 */
		list-style-image:url(../images/bullet.gif); /* 목록의 기호/문자로서 이미지를 지정하는 속성 */
	}
</style>
</head>
<body>
	<ul>
		<li>봄</li>
		<li>여름</li>
		<li>가을</li>
		<li>겨울</li>
	</ul>
</body>
</html>

과제

  1. 폴더 ch01-basic에 새 HTML 파일 s12_movie.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>밤쉘: 세상을 바꾼 폭탄선언</title>
<style>
	body {
		background-color:black;
		background-image:url("bombshell_poster.jpg");
		background-image:linear-gradient(to bottom, rgb(0 0 0 / 25%), rgb(0 0 0 / 100%)), url("bombshell_poster.jpg");
		background-size:1280px;
		background-position:top;
		background-repeat:no-repeat;
		color:white;
		text-align:center;
		font-family:sans-serif;
	}
	hgroup {
		margin-top:200px;
		line-height:0.8em;
		white-space:nowrap;
		font-size:2.4em;
		color:white;
		text-shadow:5px 0px rgb(176 224 230 / 25%);
	}
	h1 {
		font-style:italic;
		font-variant:small-caps;
	}
	#info {
		position:fixed;
		bottom:10px;
		margin:0px auto;
		text-align:left;
		font-size:1.4em;
		font-weight:bold;
		color:rgb(255 255 255 / 50%);
		white-space:nowrap;
	}
	#info td {
		padding:1px 1em;
	}
	#ban {
		border:1px solid;
		padding:-1em;
		font-size:90%;
	}
	section {
		width:1280px;
		margin:0 auto;
		font-size:2em;
		font-weight:bold;
	}
	article {
		margin:360px auto;
		padding:1em 4em;
		white-space:pre-line;
		word-wrap:break-word;
		word-break:keep-all;
	}
	.copy {
		background-color:rgb(0 0 0 / 25%);
		color:rgb(255 105 180 / 45%);
		text-shadow:2px 0 rgb(176 224 230 / 55%);
		font-style:italic;
	}
	#detail {
		font-size:60%;
		color:mintcream;
	}
	#media {
		white-space:normal;
	}
	#media th {
		padding-top:200px;
	}
	#media td {
		margin:0;
		padding:0;
	}
	#media img {
		margin:0;
		padding:0;
		height:200px;	
	}
	mark {
		text-shadow:2px 0 rgb(255 105 180);
		color:rgb(255 255 255 / 90%);
		background:rgb(176 224 230);
		font-variant:small-caps;
	}
</style>
</head>
<body>
<header>
	<hgroup>
		<h1>Bombshell</h1>
		<h2>밤쉘: 세상을 바꾼 폭탄선언</h2>
	</hgroup>
</header>
<section>
	<article class="copy">대통령 후보에게 도전장을 던진 간판 앵커. 방송계 거물을 고소한 또 다른 앵커. 그리고 야심 찬 신입 사원. 그녀들이 침묵을 깨고 목소리를 낸다. 낡은 규칙에 얽매이지 않고 나답게 살고자.
	</article>
	<article id="detail">판단은 날카롭게, 외침은 당당하게, 행동은 과감하게!
	
	대선후보 토론회에서 트럼프와 설전을 벌인
	폭스뉴스의 간판 앵커 메긴 켈리(샤를리즈 테론)는
	트럼프의 계속되는 트위터 공격으로 화제의 중심에 선다.
	
	한편, 동료 앵커인 그레천 칼슨(니콜 키드먼)은
	‘언론 권력의 제왕’이라 불리는 폭스뉴스 회장을 고소하고
	이에 메긴은 물론, 야심 있는 폭스의 뉴페이스
	케일라 포스피실(마고 로비) 역시 충격을 감추지 못하는데…
	
	최대 권력을 날려버릴 폭탄선언
	이제 이들의 통쾌하고 짜릿한 역전극이 시작된다!
	</article>
	<article><table id="media">
		<tr>
			<th colspan="4"><mark>스틸 컷</mark></th>
		</tr>
		<tr>
			<td><a href="bombshell_still1.jpg" title="원본 보기" target="_blank"><img src="bombshell_still1.jpg"></a></td>
			<td><a href="bombshell_still2.jpg" title="원본 보기" target="_blank"><img src="bombshell_still2.jpg"></a></td>
			<td><a href="bombshell_still3.jpg" title="원본 보기" target="_blank"><img src="bombshell_still3.jpg"></a></td>
			<td><a href="bombshell_still4.jpg" title="원본 보기" target="_blank"><img src="bombshell_still4.jpg"></a></td>
		</tr>
		<tr>
			<th colspan="4"><mark>30초 예고편</mark></th>
		</tr>
		<tr>
			<td colspan="4"><iframe width="960" height="540" src="https://www.youtube.com/embed/GPe9PH_lcD8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></td>
		</tr>
		<tr>
			<th colspan="4"><mark>One Little Soldier 뮤직비디오</mark></th>
		</tr>
		<tr>
			<td colspan="4"><iframe width="960" height="540" src="https://www.youtube.com/embed/2abGV7CF6R4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></td>
		</tr>
		</table></article>
</section>
<footer>
	<table id="info">
		<tr>
			<td>2020</td>
			<td id="ban">15+</td>
			<td>1시간 48분</td>
			<td>드라마</td>
		</tr>
		<tr>
			<td colspan="4">주연: 샤를리즈 테론, 니콜 키드먼, 마고 로비</td>
		</tr>
	</table>
</footer>
</body>
</html>

다음으로