HTML+CSS 고급 - 웹문서의 Style표현

CSS-스타일시트란?

CSS란 Cascading Style Sheets(계단식 스타일 시트)의 약어로 HTML로 작성된 웹문서의  디자인과 표시 방법을 기술하기 위한 스타일 시트 언어를 말한다.  본문에 해당되는 Body부터 내부의 서식의 스타일을 규정하는 표현식을 스타일시트라고 한다. 보통은 해당된 태그에 입력하는 인라인방식과 head문에 스타일을 묶어서 표현하는 방식, 다수의 문서간 공유할 수 있는 별도 CSS파일을 연동해서 보여주는 방식이 있다.  요즘 트랜드인 이미지를 슬라이드 방식으로 만드는 카드뉴스도 대부분 CSS와 자바스크립트로 만들어진 결과물이다.

 

 

CSS Tutorial (w3schools.com)

CSS Tutorial

주요표현식

• 안쪽여백-padding,바깥쪽여백-margin
• 배색-background,글자색-color
• 테두리-border
• 박스모델의 레이아웃-display etc....

특정대상

• 다수의 대상-지정없이
• 특별한 대상들-class(.점+클래스명)
• 특별하고 유일 대상-id(#+아이디명)

 

처음에 만들어본 스타일적용 예제 ▼

CS_01.html

0.00MB

---

와이어프레임에 맞춘 공간표현 - 레이아웃 코딩의 시작

레이아웃을 위한 박스모델 CSS - DIV, SECTION, 미디어쿼리문 / 영상강좌 아래 예시에 나오는 소스가 적용된 HTML문서입니다.  div는 가장 일반적인 박스모델로 그 내부에 또 작은 박스들이 다양한 형태로 들어갑니다.   너무 많다보니 id, class의 이름을 줘서 관리를 합니다.   특정 주제에 맞게 div는  header, footer, section..... 등 많은 형태의 태그로 파생된 원천이 됩니다.  

 

 

 

반응형웹을 위한 미디어쿼리문의 기초-더 자세한 RWD의 예는 뒤에 소개하는 시간을 별도로 갖겠습니다.

pc버전에서 보는 대상에 작아진 화면크기에 맞게 바뀌는 것이 뷰포트와 미디어쿼리를 지정하면서 스타일을 표현할 수 있는데, 박스모델에는 다양한 소스들이 들어가기 때문에 잠시 미디어쿼리문의 원리를 기초적으로 소개하는 소스도 일부 소개해봅니다.

 

head에 삽입해야하는 뷰포트 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">

style태그의 마지막 부분에 삽입하는 미디어쿼리문
/*반응형 미디어 쿼리문-맨위 뷰포트와 연동 너비320px이내에서는 body, div, section의 변화를 주었다. */
@media(max-width:320px){
    body{background:yellow;} #container{width:100%;margin:0px auto 200px;border:1px blue solid;}         
    section{background:orange;}
}

 

https://www.w3schools.com/css/css_rwd_intro.asp

Responsive Web Design Introduction

 

위 수업한 레이아웃 구성을 위한 div와 section, 미디어 쿼리문 등의 내용을 반영한 소스는 아래와 같습니다. 다운받아서서브라인텍스트 등 웹에디터에서 확인해보세요.

CS_02.html

0.00MB

 

 

 

---

마우스 오버(호버)   :hover

 

디자인요소인 타이포그래픽,그림,박스모델(div)등에 마우스를 올리면 다른 색,형태로 변하게 하는 hover 스타일규정(Rule)을 말한다.  호버는 공중을 맴돌다라는 뜻을 갖는 사전적의미가 있다.  영화 Back to the Future에 나온 개념으로 이동수단 중에 손잡이가 없는 호버보드(hoverboard)란 명사에서 온 개념이다.

 

<style type="text/css"> body{margin:0px;} #container{width:1230px;border:1px #000 dashed;margin:20px auto;padding:20px;font-size:14px;} /*border - 단순한 선solid, 봉재 점선 dashed, 촘촘한 점선 dotted, 3px두께 이상 4px의 견출지 이중선 double*/ #nav{background:#eee;padding:10px;font-size:16px;text-align:center;} a{text-decoration:none;background:#f5f3bf;color:#0e3bad;padding:2px 30px;} a:hover{background:#0e3bad;color:#f5f3bf;} /*데코없다=밑줄없앰*/ h1{color:blue;} /*h1:hover{color:orangered;}*/ .box{border:1px #ff0000 solid; width:200px;height:200px;text-align:center;} .box:hover{transform:rotate(15deg);background:yellow;} </style>

아래는 위 스타일시트를 적용한 웹문서 원본입니다.

CS_03.html

0.00MB

 

---

폰트어썸 이용

https://fontawesome.com/

Font Awesome

---

웹에서 가장 인기 있는 아이콘 세트 및 툴킷인 Font Awesome을 사용하여 웹 사이트에서 벡터 아이콘과 소셜 로고를 얻으십시오.

폰트어썸의 버전 4.7은 다운로드 후 사용가능하고, 5버전이상은 코드를 입력해야 합니다.  2021년 현재 버전6이 최신이고 대부분 메일일증을 받아서 사용하는데 다른 방법으로는 폰트어썸자체의 웹용 소스를 다운받아서 이용할 수 있습니다.   > 폰트어썸6 다운로드 

 

다운로드 후 압축을 풀고, html문서에 fa라는 하부폴더를 만들어서 내용을 아래와 같이 모아주세요.

 

다운로드