다연이네

[days02] 간단한 페이지 만들기+반응형 웹 본문

Web/HTML

[days02] 간단한 페이지 만들기+반응형 웹

　다연　 2020. 12. 1. 23:05
반응형

1. clear 속성

   float 속성을 적용한 해당 객체의 다음에 오는 객체가 붙지 않게 함

  = 사진 주위로 글자가 따라붙지 않도록  함
   none: 기본값으로 설정 안한것과 동일
   left: 왼쪽 취소
   right: 오른쪽 취소
   both: 양쪽 취소

2. float 속성 

   정렬하기 위해 사용되는 속성

   none: 띄우지 않음

   left: 왼쪽에 띄움

   right: 오른쪽에 띄움

   initial: 기본값으로 설정

   inherit: 부모 요소로부터 상속함

 

반응형 웹

 

<style>
@media(max-width: 600px){   반응형 웹을 디자인할 때 사용, 미디어 쿼리  
                                       너비가 최대 6백 픽셀 까지는 라는 뜻
#nav, #article{
width: 100%;
height: auto;                       높이는 내용물 따라 자동으로 맞추겠다 
                                        f12눌러서 스마트폰 모드해서 보기 
  }
}
</style>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width = device-width, initial-scale =1">
<style >
	*{		/* 모든 컬럼이라는 의미*/
	box-sizing: border-box; /* 의미는 나중에... */
	}
	
	body {
		fon-family: Arial, Helvetica, sans-serif; /* 글꼴을 지정하는 속성 */
	/*  폰트 3개주는 이유: 1째 없으면 2째쓰고 것도 없으면 3째쓰고 다없으면 시스템 기본 글꼴 사용함*/
	}

	#header{
		background-color: #666;
		padding: 30px;
		text-align: center;
		color: white;
		font-size: 35px;
	}
	
	
	#footer{
		background-color: #777;
		padding: 10px;
		text-align: center;
		color: white;
		font-size: 25px;
		
		/* clear: both; */ /*article과 겹치지 않아짐  */
		/* 밑에 section에서 주게 여기서는 주석처리 */
	}
	
</style>

<style >/*관리 목적으로 나누려고 style하나 더 줌  */
	#nav{
		width: 30%;
		height: 300px;
		background-color: #ccc;
		padding: 20px;
		
		float: left;
	}
	
	#nav ul{/* nav 안에 있는 자식 태그인 ul 이라는 뜻 */
		list-style-type: none; /* none함으로써 앞의 모양 지움  */
		padding: 0; /* 0일때만큼은 px(단위)없어도 됨 */
	}
	
	#article{
		width: 70%;
		background-color: #f1f1f1;
		/* height: 300px; *//*오버플로우가 발생하면 방법1. height를 지정하지 말자  */
		min-height:300px; /* 방법2. 최소 높이를 지정하자  */
		padding: 20px;
		
		float: left;
		
		/* border: 2px solid red; */
	}
	
	
	#section:after{ /* section이라는 div태그가 만들어진 후 */
		content: "";
		display: table;
		clear: both;		
	}
</style>

<style>
	@media(max-width: 600px){ /* 반응형 웹을 디자인할 때 사용, 미디어 쿼리 */
		/* ex03_04에서 <source media~ 있었다 */
		/* 너비가 최대 6백 픽셀 까지는   */
		#nav, #article{
		width: 100%;
		height: auto; /*높이는 내용물 따라 자동으로 맞추겠다*/
		/* f12눌러서 스마트폰 모드해서 보기 */
		}
	}
</style>


</head>
<body>
	<h2>CSS + Layout(배치) Float</h2>
	<p>아무 데이터나 입력하기 안녕하세요 저는 블로거 배다연입니다. 제 블로그에 들러주셔서 고맙습니다.</p>

	<p>아무 데이터나 입력하기2 안녕하세요 저는 블로거 김동준입니다. 저는 먹방 블로거 입니다.</p>

	<div id="header">
		<h2>Cities</h2>
	</div>


	<div id="section">
		<div id="nav">
			<ul>
				<li><a href="#">London</a></li>
				<li><a href="#">Paris</a></li>
				<li><a href="#">Seoul</a></li>
			</ul>
		</div> <!-- nav -->
		<div id="article">
			<h1>London</h1>
			<p>런던내용</p>
			<p>런던내용2</p>
			
			<h1>Paris</h1>
			<p>파리내용</p>
			<p>파리내용2</p>
			
			<h1>Seoul</h1>
			<p>서울내용</p>
			<p>서울내용2</p>
		</div> <!-- article -->
	</div> <!-- section  -->
	
	
	<div id="footer">
		<p>Footer</p>
	</div>
</body>
</html>

1. 화면이 넓은 경우

2. 화면이 좁은 경우

 

 

[html 시멘틱(Semantic) 요소(Element)] 
1. 의미가 명확하게 정의 -> 개발자, 브라우저 
header   : 소개 내용이나 탐색 링크의 집합에 대한 컨테이너 
footer  : 웹페이지 문서의 바닥글을 정의 (회사 정보, 연락 정보, 저자, 저작권 정보 등) 
section   : 제목이 있는 주제별 콘텐츠 그룹 
nav   : 탐색 링크의 집합 
article  : 독립적인 자체에 포함된 내용을 지정(그 기사 자체로 의미가 있다) 
aside  : 콘텐츠를 제외한 부분 
figure, figcaption : 지금은 넘어가는걸로... 
등등 
2. 비시멘틱 요소 : div, span

(애만 봐서는 뭘 담을지 몰라 그래서 의미를 정확하게 알 수 있도록 시멘틱 태그가 나와있어) 

 

위 div와 #을 모두 지우자 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width = device-width, initial-scale =1">
<style >
	*{	
	box-sizing: border-box; 
	}
	
	body {
		fon-family: Arial, Helvetica, sans-serif;
	}

	header{
		background-color: #666;
		padding: 30px;
		text-align: center;
		color: white;
		font-size: 35px;
	}
	
	
	footer{
		background-color: #777;
		padding: 10px;
		text-align: center;
		color: white;
		font-size: 25px;
		
	}
	
</style>

<style>
	nav{
		width: 30%;
		height: 300px;
		background-color: #ccc;
		padding: 20px;
		
		float: left;
	}
	
	nav ul{
		list-style-type: none; 
		padding: 0; 
	}
	
	article{
		width: 70%;
		background-color: #f1f1f1;
		
		min-height300px; 
		padding: 20px;
		
		float: left;
		
	
	}
	
	
	section:after{ 
		content: "";
		display: table;
		clear: both; 
		
	}
</style>

<style>
	@media(max-width: 600px){ 

		nav, article{
		width: 100%;
		height: auto; 
		
		}
	}
</style>


</head>
<body>
	<h2>CSS + Layout(배치) Float</h2>
	<p>아무 데이터나 입력하기 안녕하세요 저는 블로거 배다연입니다. 제 블로그에 들러주셔서 고맙습니다.</p>

	<p>아무 데이터나 입력하기2 안녕하세요 저는 블로거 김동준입니다. 저는 먹방 블로거 입니다.</p>

	<header>
		<h2>Cities</h2>
	</header>


	<section>
		<nav>
			<ul>
				<li><a href="#">London</a></li>
				<li><a href="#">Paris</a></li>
				<li><a href="#">Seoul</a></li>
			</ul>
		</nav> <!-- nav -->
		<article>
			<h1>London</h1>
			<p>런던내용</p>
			<p>런던내용2</p>
			
			<h1>Paris</h1>
			<p>파리내용</p>
			<p>파리내용2</p>
			
			<h1>Seoul</h1>
			<p>서울내용</p>
			<p>서울내용2</p>
		</article> <!-- article -->
	</section> <!-- section  -->
	
	
	<footer>
		<p>Footer</p>
	</footer>

</body>
</html>

근데 왜 London 크기가 작아졌지?

 

 

 

 

반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days02] 테이블 - 셀 병합, 체크할 수 있는 표 만들기  (0) 2020.12.02
[days02] 블럭 요소와 인라인 요소  (0) 2020.12.01
[days02] HTML 목록  (0) 2020.12.01
[days02] picture 태그  (0) 2020.12.01
[days02] 이미지 플로팅(Image Floating)  (0) 2020.12.01
'Web/HTML' Related Articles more
Comments