HTML이 문서의 뼈대라면, CSS는 살을 붙히고 옷을 입히는 요소라고 할 수 있다.(내가 배운한에는 그렇다) 그래서 시각적으로 조금더 풍성하게 보여질 수 있다. 다만, 역동적인 역할은 미미해 추후 JAVA SCRIPT와의 연동으로 이를 개선하게 될 것이다.
일단 CSS를 활용하기 이전에 알아두면 좋을 것들을 먼저 설명하자면
1. CSS를 적용하고 싶은 콘텐츠 불러오기
내가 원하는 콘텐츠에 도달해 디자인을 입히기 위해서는 잘짜여진 HTML 구조와 이를 타고들어갈 태그와 속성을 이해하는 것이다.
* 태그 : 태그이름 {CSS}
- 하위태그로 들어갈때 : 태그>태그{CSS}
* 속성
- class : .클래스이름 {CSS}- id : #아이디이름{CSS}
2. 메소드 사용하기
편의상 메소드라고 했는데, 여기에서는 기능을 가진 애들을 어떻게 말하지는 잘 모르겠다. 아무튼 조금더 풍요로운 느낌을 위해 지정된 콘텐츠에 기능을 넣는걸 의미한다.
예를 들어 .클래스: hover{CSS}라고하면 해당 콘텐츠에 마우스를 올리면 CSS로 적용된 기능을 넣어준다. 밝기변화나, 쉐도우 지정같은 것으로 조금더 풍성-한 느낌을 줄 수 있다.
이렇게 매소드 자체가 이런것도 있지만, CSS 구문을 통해서도 가능한데 그 기능은 아주 무수하기때문에 추후에 다루기로 하겠다.
3. 예시보기
다음코드는 테이블을 만드는 일부 코드로,
css에는
1) .name로 클래스를 지정한 것
> 가로길이 100px
> 텍스트 중간정렬
2) tr로 태그를 지정한것
> 배경색이 분홍색
> 태그에 마우스를 올리면 손가락모양으로 변경
이 포함되어있다.
...
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table(표작성하기)</title>
<style>
.name {
width: 100px;
text-align: center;
}
tr:hover {
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th class="name">이름</th>
<th class="phone">전화번호</th>
<th class="addr">주소</th>
</tr>
...
</table>
</body>
