HTML5 - 190616 Basic Study 44(WebSite Layout Basic 2)

1. Section HTML Code

<div id="content">
        <section id="main_section">
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
        </section>

 

2. Section 위치 지정 CSS Code

/* section 위치 */
div#content{
	border:1px solid black;
	width:900px;
	overflow:hidden;
}
#main_section{
	width:700px;
	float:left;
}
#main_aside{
	width:200px;
	float:right;
}

 

3. Section 효과 CSS Code

/* main_section 테두리 작업 */
#main_section{
	border:1px solid black;
	box-sizing:border-box;
}
.main_article{
	padding:10px;
	border:1px solid black;
	margin:5px;
	/* 텍스트 양쪽 정렬 */
	text-align:justify;
}

/* 맨 앞 한글자 대문자 / 색 지정 */
.main_article p:first-letter{
	font-size:2em;
	color:blue;
	font-weight:bold;
}

/* 맨 뒤에 end */
.main_article p:after{
/* 	content:'-End-';
	color:gray; */
}

/* 드래그 효과 주기 */
.main_article p::selection{
	background:red;
	color:white;
}

/* Main Article(h1) 마우스 올릴시 동적인 효과 주기 */
.main_article h1:hover{
	background:orange;
}

 

4. Aside HTML Code

<aside id="main_aside">
            <input id="first" type="radio" name="tab" checked="checked" />
            <input id="second" type="radio" name="tab" />
            <section class="buttons">
                <label for="first">First</label>
                <label for="second">Second</label>
            </section>
            <!-- first tap menu -->
            <div class="tab_item">
                <ul>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Canvas</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Audio</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Video</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Semantic Web</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                </ul>
            </div>
            <!-- second tap menu -->
            <div class="tab_item">
                <ul>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Transition</strong><p>2012-03-15</p>
                        </div>
                    </a>
                    </li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Animation</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Border</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Box</strong><p>2012-03-15</p>
                        </div>
                    </a>
                    </li>
                </ul>
            </div>
        </aside>
    </div>

 

5. Aside 효과 CSS Code(Tap Menu)

/* 탭 메뉴 구현하기 체크 시 움직임 */
#first~div.tab_item:first-of-type{
	display:none;
	}
#second~div.tab_item:last-of-type{
	display:none;
	}
#first:checked~div.tab_item:first-of-type{
	display:block;
	}
#second:checked~div.tab_item:last-of-type{
	display:block;
	}
	
/* 라디오 버튼 숨기기 */
#first, #second{
	display:none;
}

/* 탭 메뉴 디자인하기 */
section.buttons{
	overflow:hidden;
	}
section.buttons label{
	width:100px;
	border:1px solid black;
	box-sizing:border-box;
	float:left;
	text-align:center;
	line-height:30px;
}
#first~section.buttons label:nth-child(1){
}
#second~section.buttons label:nth-child(2){
}
#first:checked~section.buttons label:nth-child(1){
	background:black;
	color:white;
}
#second:checked~section.buttons label:nth-child(2){
	background:black;
	color:white;
}

/* 탭 콘텐츠 디자인 하기 */
li.item{
	padding:10px;
	}
li.item a:after{
	content:'';
	display:block;
	clear:both;
	}
li.item a{}
li.item a div.thumbnail{
	float:left;
	}
li.item a div.description{
	float:left;
	margin-left:10px;
	/* 말줄임표만들기 */
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	width:120px;	
	}
li.item a div.description:hover{
	white-space:normal;
}

.tumbnail img{
	width:45px;
	height:45px;
}

 

6. Footer HTML Code

<footer id="main_footer">
        <h3>HTML5 + CSS3 Basic</h3>
        <address>Website Layout Basic</address>
    </footer>

 

7. Footer 위치 지정 CSS Code

/* footer 위치 */
#main_footer{
	width:900px;
	border:1px solid black;
	text-align:center;
}

 

8. 문장 끝에 번호 매기기 CSS Code

/* 문장 끝에 번호 매기기 */
body{
	counter-reset:abc;
}
article p{
	counter-increment:abc;
}
article p:after{
	content:counter(abc)".End of paragraph";
	color:red;
}
article p:before{
	content:counter(abc)".Begin paragraph ";
	color:blue;
	font-size:1.5em;
}
article p:first-line{
	line-height:1;
	font-size:16px;
	color:black;
}

 

9. HTML / CSS 파일

Main.html

0.01MB

main_css.css

0.01MB

 

10. 미리보기

< Website Layout Basic >