티스토리 뷰
-CSS를 이용해 웹 문서를 만들 때 모든 웹 브라우저에서 똑같은 모습으로 보이게 하기 위해 문서에서 사용할 CSS속성들을 원하는 값으로 미리 정의해 놓는다.
Why ????
예를들어, 문서 전체의 글꼴을 지정하지 않았을 경우 브라우저 기본 값에 따라 브라우저에 표시하게 되는데, 브라우저마다 기본 글꼴이 같지 않다. 따라서 문서 전체의 글꼴을 통일시켜 주어야 어느 브라우저에서나 똑같이 보이기 때문이다. 마진 or 패딩 역시 값을 지정하지 않으면 브라우저마다 각기 다른 기본 값을 적용하게 된다.
->이렇게 CSS기본 값들을 미리 설정하는 것을 'CSS리셋(reset)'이라고 합니다.
ex) <style>
body{
margin:0;
padding:0;
font-family:"돋움";
font-size:1em;
}
a:linlk {
text-decoration:none; ->텍스트 링크 밑줄 없앰
}
a img{
border:0; ->이미지 링크 테두리 없앰
}
%css리셋을 위한 별도의 스타일시트 파일을 구할 수도 있다. 이런 파일을 링크해서 아용하면 따로 리셋 소스를 작성하지 않아도 됩니다
화면 중앙에 내용 전체 배치하기
-내용 전체를 <div>태그로 묶고 내용 전체의 배경색을 조절하거나 내용 전체의 위치를 브라우저 화면 중앙으로 옮길 때 편리하다.
ex)
미디어 쿼리 추가하기
-미디어 쿼리는 기기의 해상도에 따라 웹 페이지를 다르게 구성하는 것을 말합니다.
반응형 웹을 만들 때는 스마트폰에서 사용할 CSS가 기본이 됩니다.
그 후 , PC와 태블릿등 CSS는 다음과 같이 해상도에 따라 달라지는 CSS들만 정의하면 됩니다.
ex)
/* 스마트폰에서 실행할 CSS */
...
/*태블릿에서 실행할 CSS */
@media all and (min-width:768px) and (max-width:1024px) {
...
}
/*PC에서 실행할 CSS */
@media all and (min-width:1025px) {
...
}
내용 입력하기 – 헤더 부분에 사이트 로고 넣기
-헤더 부분에는 사이트 로고가 포함된 이미지를 넣는다. 로고 이미지를 그대로 넣을 수 있지만 이미지 너비보다 화면 너비가 좁아질 경우 스크롤 막대가 생긴다 때문에 CSS를 이용해 헤더 부분에 배경 이미지 형태로 넣는다
해상도에 따라 헤더에 들어갈 배경 이미지를 다르게 한다면 각 미디어 쿼리마다 각각 다른 배경 이미지를 넣는 #topbanner스타일을 지정한다.
메뉴 부분에 내용 입력하기
-사이트 로고 아래에 메뉴를 만들 때 메뉴 부분에 다음과 같이 ul 태그를 사용해 목록으로 넣는다.
1.
<body>
<div id=“wrapper”>
<header id=“topbanner”></header>
<nav>
<ul>
<li><a href=“#”> 꽃다발 </a> </li>
<li><a href=“#”>꽃바구니</a><li>
</ul>
</nav>
...
</body>
2. 내용 입력이 끝나면 CSS를 이용해 메인 메뉴 부분의 디자인을 결정합니다.
3.<style>
...
nav {
width:100%;
height:50px;
background-color:#C51A3A;
margin:0;
padding-top:1px;
}
nav ul {
list-style:none;
text-align:center;
}
nav ul li {
float:left;
}
4. 링크 텍스트 스타일을 조절해서 메뉴처럼 보이게 한다.
5. a:visited속성을 이용해 평소 a스타일과 함께 정의하고 a:hover스타일은 배경색과 글자색이 달라지도록 한다.
6. <style>
...
nav ul li a, nav ul li a:visited {
padding:15px,10px; / 패딩을 이용해 메뉴 항목의 공간 마련
font-weight:600 / 글자를 약간 진하게 400 : 보통 900 : 진함
color:white;
text-shadow:0 0.5px 0.5px red;
}
nav li a:hover {
color : red;
background-color:white;
text-shadow:0 0.5px 1px white ;
border-radius:10px 10px 0 0; /윗부분만 둥글게 처리
}
...
</style>
꽃집을 소개하는 이미지와 텍스트 입력하기
-사이트에 꽃집을 소개하는 이미지와 간단한 텍스트를 입력해보자.
PC에서는 왼쪽에 이미지, 오른쪽 : 텍스트가 나타나도록 할 것.
태블릿,스마트폰에서는 다르게 배치하기 위해 다른 <div>태그에 삽입한다.
<div id=“shop”> 와 </div> 사이에 꽃집 사진을 넣기 위해 다음과 같은 소스를 추가한다.
ex)
1. <body>
...
<div id=“shop”>
<img src=“shop.png” alt=“꽃집 전경”>
</div>
2.<div id=“intro”>와 </div>사이에 꽃집을 소개하는 텍스트 추가. <hr>태그도 꼭 입력한다 .
<div id=“intro”>
<h3>향기나는 꽃집입니다</h3>
<p>향기나는 꽃집은 식물과 함께하는 건강하는 삶</p>
</div>
<hr>
...
</body>
스마트폰과 태블릿 스타일에서는 꽃집 이미지를 위에, 텍스트를 아래에 배치하고,
그리고 앞에서 입력했던 <hr>태그는 문서 안의 요소에서 float:left나 float:right속성을 사용했을 때 그 이후의 요소들이 영향을 받지 않도록 하기 위해 한 것.
CSS소스에 다음과 같은 <hr>태그 스타일을 추가하면 <hr>요소, 즉 가로 줄은 화면에 보이지 않으면서 clear:both 속성을 적용할 수 있다. 스마트폰 CSS를 입력하는 부분에 이어서 소스를 추가한다.
'HTML&CSS > HTML5' 카테고리의 다른 글
| <HTML5+CSS3>반응형 웹사이트 만들기 (0) | 2018.11.02 |
|---|---|
| HTML5+CSS3 -유동형 레이아웃 만들기,이미지,비디오 (0) | 2018.11.02 |
| <HTML+CSS>유동형 레이아웃이란 ? (0) | 2018.11.02 |
| <HTML5+CSS3> 미디어 쿼리 적용하기 (0) | 2018.10.26 |
| <HTML5+CSS3>반응형 웹 사이트 만들기 (0) | 2018.10.24 |