float: 다른 콘텐츠와의 뉴스기사같은 배치
clear: float의 속성을 해제
poosition: absoulte, relative, fixed 위치를 통한 배치 (too, right, bottom, lest)
z-index: 겹치는 태그에 대한 앞 뒤 우선순위 지정
visibilit:y 가시성
9-2. 다단 편집
column-width: 너비
column-count: 단의 갯수
column-gap: 단과 단 사이의 여백
column-rule: 구분선
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
.header-nav {float: right;}
.wrapper {width: 900px; padding: 10px; margin: 0 auto;}
.multi {column-width: 120px; clear: both;}
.multi2 {column-count: 4;}
.gap {column-gap: 50px; column-rule: 3px dotted #333;}
</style>
</head>
<body>
<div class="wrapper">
<ul class="header-nav">
<li><button>로그인</button></li>
</ul>
<div class="multi">
<p>대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
<p>언론·출판은 타인의 명예나 권리 또는 공중도덕이나 사회윤리를 침해하여서는 아니된다. 언론·출판이 타인의 명예나 권리를 침해한 때에는 피해자는 이에 대한 피해의 배상을 청구할 수 있다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 연소자의 근로는 특별한 보호를 받는다.</p>
<p>국가는 재해를 예방하고 그 위험으로부터 국민을 보호하기 위하여 노력하여야 한다. 모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다. 모든 국민은 통신의 비밀을 침해받지 아니한다. 예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다. 국무총리는 국회의 동의를 얻어 대통령이 임명한다.</p>
</div>
<div class="multi2">
<p>대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
<p>언론·출판은 타인의 명예나 권리 또는 공중도덕이나 사회윤리를 침해하여서는 아니된다. 언론·출판이 타인의 명예나 권리를 침해한 때에는 피해자는 이에 대한 피해의 배상을 청구할 수 있다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 연소자의 근로는 특별한 보호를 받는다.</p>
<p>국가는 재해를 예방하고 그 위험으로부터 국민을 보호하기 위하여 노력하여야 한다. 모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다. 모든 국민은 통신의 비밀을 침해받지 아니한다. 예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다. 국무총리는 국회의 동의를 얻어 대통령이 임명한다.</p>
</div>
<div class="multi2 gap">
<p>대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
<p>언론·출판은 타인의 명예나 권리 또는 공중도덕이나 사회윤리를 침해하여서는 아니된다. 언론·출판이 타인의 명예나 권리를 침해한 때에는 피해자는 이에 대한 피해의 배상을 청구할 수 있다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 연소자의 근로는 특별한 보호를 받는다.</p>
<p>국가는 재해를 예방하고 그 위험으로부터 국민을 보호하기 위하여 노력하여야 한다. 모든 국민은 법률이 정하는 바에 의하여 선거권을 가진다. 모든 국민은 통신의 비밀을 침해받지 아니한다. 예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다. 국무총리는 국회의 동의를 얻어 대통령이 임명한다.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
.wrapper {width: 90%; padding: 20px; margin: 10px auto; border: 1px solid #eee;
border-radius: 10px; box-shadow: 0 0 10px #aaa;}
.multi {column-count: 4;}
.multi h3 {break-before: column;}
.no-col {column-span: all;}
</style>
</head>
<body>
<div class="wrapper">
<h2>세계의 나라들</h2>
<h3>대한민국</h3>
<p>대한민국(한국 한자: 大韓民國, 영어: Republic of Korea)은 동아시아의 한반도 남부에 위치해 있는 민주공화국이다. 서쪽으로 황해를 사이에 두고 중국이, 동쪽으로는 동해를 사이에 두고 일본이 위치하며, 북쪽으로는 조선민주주의인민공화국 (북한)과 맞닿아 있다[3]. 수도는 사실상 서울특별시이고, 실질적 행정 수도는 세종특별자치시이다. 대한민국의 국기는 대한민국 국기법에 따라 태극기[4], 국가는 관습상 애국가[5], 국화는 관습상 무궁화이다. 공용어는 한국어와 한국 수어이다. 인구는 약 5,200만 명으로 전체 인구 중 절반이 수도권에 살고 있다.[6]</p>
<div class="multi">
<h3>가나</h3>
<p>가나 공화국(영어: Republic of Ghana 리퍼블릭 오브 가나[*]), 약칭 가나(영어: Ghana)는 서아프리카 기니만과 대서양에 면한 나라다. 총 면적은 238,535 km2 (92,099 sq mi)로 동쪽으로는 토고, 서쪽으로는 코트디부아르, 북쪽으로는 부르키나파소와 맞닿아 있으며, 남쪽으로는 대서양과 기니만을 면하고 있다. 나라 이름은 소닝케어로 '전사 왕'이라는 뜻이다.[6]</p>
<h3>독일</h3>
<p>독일 연방공화국(독일어: Bundesrepublik Deutschland 분데스레푸블리크 도이칠란트[*]), 약칭 독일(독일어: Deutschland 도이칠란트[*], 이 소리의 정보듣기 (도움말·정보))은 중앙유럽에 있는 나라이다. 북쪽으로 덴마크와 북해, 발트해, 동쪽으로 폴란드와 체코, 남쪽으로 오스트리아와 스위스, 서쪽으로 프랑스, 룩셈부르크, 벨기에, 네덜란드와 국경을 맞대고 있다. 독일 영토는 357,021 km²이며, 기후는 주로 온대 기후를 보인다. 인구는 2011년 기준 80,219,695명으로[1] 유럽 연합에서 인구가 가장 많은 나라이며, 이민자 인구는 미국에 이어 세계에서 두 번째로 많다.[2] 공용어는 독일어이고, 소수 민족어나 러시아어, 영어, 소르브어, 덴마크어, 프리지아어도 쓰인다.</p>
<h3>러시아</h3>
<p>러시아 연방(러시아어: Росси́йская Федера́ция 라씨스카야 페데라치야[*] [rɐˈsʲiɪ̯skəɪ̯ə fʲɪdʲɪˈrat͡sɨɪ̯ə]), 약칭 러시아(러시아어: Росси́я 라씨야[*] [rɐˈsʲiɪ̯ə])는 동유럽과 북아시아에 걸쳐 있는 연방제 국가이다. 세계에서 가장 영토가 넓은 국가로, 북아시아 전체와 동유럽의 대부분에 11개의 시간대에 걸친 넓은 영토가 있다. 동쪽은 태평양과 알래스카, 서쪽은 노르웨이, 핀란드, 폴란드, 에스토니아, 라트비아, 리투아니아, 벨라루스와, 남쪽은 조지아, 우크라이나, 아제르바이잔, 카자흐스탄, 중화인민공화국, 몽골, 조선민주주의인민공화국과, 북쪽은 북극해와 접해 있으며 오호츠크 해와 베링 해협, 알래스카주에서 미국, 일본과 해상 국경을 유지하고 있다. 수도는 모스크바이며 그 외 주요 도시로는 상트페테르부르크, 이르쿠츠크, 노보시비르스크, 블라디보스토크, 하바롭스크, 크라스노야르스크, 소치 등이 있다.</p>
<h3>터키</h3>
<p>터키 공화국(터키어: Türkiye Cumhuriyeti 튀르키예 줌후리예티[*]), 약칭 터키(터키어: Türkiye 튀르키예[*], 영어: Turkey, 문화어: 뛰르끼예)는 서아시아의 아나톨리아와 유럽 남동부 발칸 반도의 동트라키아에 걸친 국가이다. 수도는 앙카라이며 최대 도시는 이스탄불이다. 북서쪽으로는 그리스와 불가리아와 접경하고 있으며, 북동쪽으로는 조지아가 위치해 있고, 동부로는 아르메니아, 아제르바이잔, 이란이 위치하며, 남동쪽으로는 이라크, 남쪽에는 시리아와 지중해가 자리하고 있으며, 서쪽으로는 에게 해가 있다. 대략 70%에서 80%에 달하는 인구가 터키인이며, 나머지 인구는 소수민족인데, 그들 중 쿠르드인이 15%에서 20% 정도로 가장 많은 비율을 차지한다.</p>
<div class="no-col">
<h3>프랑스</h3>
<p>프랑스 공화국(프랑스어: République française, 영어: French Republic) 약칭 프랑스(프랑스어: France)는 서유럽의 본토와 남아메리카의 프랑스령 기아나를 비롯해 여러 대륙에 걸쳐 있는 해외 레지옹과 해외 영토로 이루어진 국가로서, 유럽 연합 소속 국가 중 영토가 가장 넓다. 수도는 파리이며, 프랑스 본토는 남북으로는 지중해에서 영국 해협과 북해까지, 동서로는 라인강에서 대서양에 이른다. 그 지형적 모양으로 인해 프랑스인들은 종종 이곳을 L'Hexagone(육각형)이라고 부른다. 주요 도시로는 파리, 낭트, 툴루즈, 마르세유, 몽펠리에, 메스 등이 있다.</p>
</div>
</div>
</div>
</body>
</html>
9-3. 표 스타일
border
border-collapse
border-spacing
table-layout
text-align
vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
.tbl1 {border: 1px solid; border-collapse: collapse;} /* 셀, 테이블 간격 없애줌. */
.tbl1 td {border: 1px dotted; padding: 10px;}
.tbl2 {border: 1px solid; border-spacing: 10px;}
.tbl2 td {border: 1px dotted; padding: 10px; empty-cells: hide;}
.tbl3 {border: 1px solid; border-collapse: collapse; width: 400px; height: 300px;} /* 셀, 테이블 간격 없애줌. */
.tbl3 td {border: 1px solid; padding: 10px;}
.ulsan {width: 100px; text-align: center; vertical-align:middle ; /* 테이블셀일때만 가능 */}
.tbl4, .tbl4 td{border: 1px solid;}
.tbl4 {width: 300px; table-layout: fixed;}
.tbl4 td {width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>
</head>
<body>
<table class="tbl1">
<caption>프로축구 경기일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
<table class="tbl2">
<caption>프로축구 경기일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
<table class="tbl2">
<caption>프로축구 경기일정</caption>
<tr>
<td>울산</td>
<td>울산 vs 인천</td>
<td>tv 중계</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
<td></td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
<td></td>
</tr>
</table>
<table class="tbl3">
<caption>프로축구 경기일정</caption>
<tr>
<td class="ulsan">울산</td>
<td>울산 vs 인천</td>
</tr>
<tr>
<td>부산</td>
<td>부산 vs 대전</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 강원</td>
</tr>
</table>
<table class="tbl4">
<tr>
<td>가나다라마바사가나다라마바사가나다라마바사가나다라마바사가나다라마바사</td>
<td>ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG</td>
</tr>
</table>
</body>
</html>
'HTML5' 카테고리의 다른 글
| 21. 02. 04. 12장- 선택자, 가상클래스 (0) | 2021.02.04 |
|---|---|
| 21. 02. 03. 10장- HTML5와 시맨틱 태그, 11장- HTML과 멀티미디어 (0) | 2021.02.03 |
| 21. 02. 02. 09장- CSS 포지셔닝 (0) | 2021.02.02 |
| 21. 02. 02. 08장- 레이아웃을 위한 스타일 (0) | 2021.02.02 |
| 21. 02. 01. 07장- 색상과 배경을 위한 스타일 (0) | 2021.02.02 |
