[1] CSS 를 이용한 HTML 디자인

CSS ?

어렵지만 디자인에 대한 근본적인 해결을 위해 구현된 새로운 언어

 

• Inline Style Sheet
  HTML 태그의 style 속성에 CSS 코드를 넣는 방법
• Internal Style Sheet
  HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법
• Linking Style Sheet
  별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

1. <font> 태그를 이용한 디자인 (사용하지 않음)

CSS가 등장하기 전, 쉽지만 한계가 있었던 방법. 지금은 사용되지 않는 디자인을 위한 태그
웹페이지가 많아지고 웹이라는 기술이 중요해짐에 따라서 이런 방식에 한계를 느끼게 됨.

<h1><a href="index.html"><font color="red">Javakong Cafe</font></a></h1>

  <ul> <!--ul : Unordered List 부모태그. 어디까지의 li가 의미있는 한 그룹인지 그룹핑 -->
    <li><h3><a href="1.html"><font color="red">커피</font></a></h3></li> <!-- li : 자식태그. -->
    <li><h3><a href="2.html"><font color="red">차</font></a></h3></li>
    <li><h3><a href="service.html"><font color="red">고객만족</font></a></h3></li>
  </ul>

<font> 태그의 한계

<a> 태그와 <h>태그는 font태그와는 다름
<a> 태그는 'WEB' 이라는 정보가 '링크'라는 것을 정보임.
<h> 태그는 'WEB' 이라는 문자가 이 웹페이지에서 제목이라는 중요한 정보임
이러한 정보를 해석해서 검색엔진 시스템이 사용자에게 필요한 정보를 찾아주게 됨.
하지만 font 태그는 이 'WEB' 에 대해서 어떠한 정보를 가지고 있지않음. 그저 빨간색으로 나타내야 된다는 디자인 정보를 가지고 있음.
* 시각장애인이 보았을 때 정보가 아닌것은 정보가 아니라고 보면됨.
정보라고 볼 수 없는 디자인 태그가 웹페이지에 섞이면서 웹페이지가 '정보'로서 가치가 떨어지게 됨

<a>태그가 1억개라면 ??

극단적인 문제의 상황을 생각했을 때 문제 해결 -> 'CSS'

 

---

2. <style> 태그를 이용한 디자인

웹브라우저가 처음 나왔을 때 기본적으로 HTML 문법만을 해석해서 보여줬다.
CSS 는 HTML과 완전히 다른 컴퓨터 언어이다.
웹브라우저에 CSS 코드를 쓸거니깐 HTML이 아니라 CSS 문법에 따라서 해석하라고 HTML 문법으로 알려줘야한다.
태그 안쪽에 있는 내용은 CSS 니깐, CSS라는 언어의 문법에 맞게 해석해서 처리하라는 의미

• 선택자(selector) : CSS 효과를 어느 대상에게 적용할 것인지 알려주기 위해 필요한 코드 Ex. a{ }
• 선언(declaration) : 선택자에게 줄 효과 정의

>> 웹페이지의 모든 <a>태그의 폰트색을 빨간색으로 설정

<!-- 여기부분이 CSS 내용이라는 것을 웹브라우저에 알려줌.-->
<style> 
    a {     /* 선택자(selector) */
      color:red;     /* 선언(declaration)    */
    }
  </style>

CSS 를 사용하는 이유 ?

1. 웹페이지 유지/ 보수 가 용이 (중복된 코드 제거, 효율적인 코드 수정)
2. 가독성이 좋아짐
3. <font> 태그를 지운 원래의 코드에 더 이상 정보가 아닌 태그 는 없다. 디자인에 대한 태그는 <style> 태그 내에 모두 적음.
4. 디자인이 필요없는 작업 시, <style> 태그는 해석하지 않고, 원하는 정보만을 다룰 수 있게됨 (ex 크롤링)

---

3. CSS 속성(style 속성)을 이용한 디자인

특정 태그에 대해서 CSS 효과를 주고 싶을 때, CSS 속성값을 사용

기술문서 : style="" 이 부분은 HTML의 속성이다. 속성의 값으로 반드시 CSS의 효과가 들어온다.

속성의 값을 웹브라우저는 CSS 문법에 따라서 해석해서 style 속성이 위치해 있는 태그에 적용한다. (따라서 선택자는 필요하지 않음)

 

>> 현재 사용자가 접속 중인 페이지를 다른 색으로 표시

<li><h3><a href="2.html" style="color:red">차</a></h3></li>

 

>> 밑줄 제거&추가

text-decoration: none;
text-decoration: underline;

 

 

---

CSS 속성 알아내기

>> css를 이용해 html 글씨크기 디자인 : css text size property

검색 결과 > https://www.w3schools.com/cssref/pr_font_font-size.asp

CSS font-size property

>> 제목 가운데 정렬 : css text center property