웹 디자인의 기본 CSS 파헤치기

CSS 는 HTML 만으론 다소 투박한 웹의 요소들을 꾸밀 때 사용할 수 있습니다. HTML5가 되면서 여러 속성과 기법이 추가 되면서 오히려 스타일적인 속성들은 더이상 지원하지 않게 되었습니다.

그 이유는 CSS가 이를 아예 분리해서 담당하도록 한것이죠.

그래서 HTML은 요소의 구조를 만들고 디자인적 요소인 코드는 CSS가 담당하게 되면서 웹사이트를 꾸미고 싶다면 무조건 CSS를 배워야 합니다.

그러다 보니 HTML5를 배울 때 함께 포함되어 가르치거나 예제 소스에도 자연스럽게 포함되어 있습니다.

즉, HTML 만큼 CSS는 웹 개발에 없어선 안될 요소고 무조건! 필수적으로! 배워야 하는 기술 입니다.

나무위키에서 보면 CSS는 Cascading의 약자로 상위 요소의 스타일 속성을 자손 요소들에게 상속해 주는 모습이 마치 폭포수처럼 내려가는 모습을 닮아서 그렇다고 하네요. 이건 처음 안 재밌는 사실 입니다.

CSS는 HTML 말고도 마크업 언어로 작성된 문서들과 함께 사용되는 모양 입니다. 제가 이번 포스팅에서 정리해보고자 하는 것은 HTML에 사용되는 CSS 들을 다룰 생각 입니다.

이전글
웹의 기본 HTML 파헤치기
HTML로 표 만들기: Table 태그 기본

콘텐츠

HTML 문서에 CSS를 코딩 하는 방법

HTML에선 기본적으로 두가지 방식을 통해 CSS를 적용 할 수 있습니다.

(1) 태그에 직접 삽입하기

이전 글에서 한번 다뤄 본 테이블 태그를 이용해서 한번 삽입해 보도록 하겠습니다.

<table>
  <tr>
    <td>테이블</td><td>다루기</td>
  </tr>
</table>

HTML

위의 코드를 사용해서 HTML을 출력해보면 ”테이블 다루기“ 이렇게 단순 두 글자만이 보이게 됩니다. 그 때 제 이전글 에선 border 속성을 통해 테두리를 만들어 보았습니다. 하지만 이번엔 CSS 를 통해 table에 테두리를 만들어 볼 것 입니다. 사용법은 간단 합니다. 바로 태그 뒤에 style 속성을 입력하고 CSS를 입력해 주면 됩니다.

<table style=“border:1px solid black;”>
  <tr>
    <td>테이블</td><td>다루기</td>
  </tr>
</table>

HTML

다음과 같이 입력하면 테이블에 테두리가 생깁니다.

이 코드 속 border:1px solid black; 이란 글자가 CSS 코드 입니다. 이처럼 각종 코드의 CSS는 태그 내의 style 속성 안에 입력하여 개별적으로 입력할 수 있습니다.

(2) head 태그 속 style 태그에 입력하기

위의 방법은 한 태그에 한 스타일만 적용할 수 있습니다. 개별적으로 스타일을 다르게 줄 땐 좋겠지만, 만약 p 태그와 같이 여러번 입력되는 태그가 있다면 일일이 입력을 해줘야 하겠죠. 그런 경우 head 태그에 style 태그를 입력하여 CSS를 사용 할 수 있습니다. 사용법은 다음과 같습니다.

<html>
<head>
<style>
table{
  border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
  <td>테이블</td><td>다루기</td>
</tr>
</table>
<body>
</html>

HTML

출력은 동일하죠? 위에 코드와 같이 “태그명{ CSS 코드 }” 로 작성하면 됩니다. 위는 table 태그를 꾸민 것 이구요. 이 방식은 중요 합니다. 지금 제 블로그에도 적용되어 있는 darkmode 와 이후 Media Query 등 여러가지 조건에 따른 CSS 변화와 애니메이션 효과를 줄 수 있습니다. 물론 이번 포스팅은 진짜 기초 중의 기초만 다룰 생각 입니다. 👍