티스토리 뷰
style tag의 단점과 극복
style태그의 단점은, 똑같은 내용을 계속 반복해서 써야 한다는 점이다.
<td style = ~~>
<td style = ~~>
<td style = ~~>
<td style = ~~>이렇게 쓰는건 너무 귀찮다.
CSS의 기본에 대해 잠깐 알아보자.
html은 <html></html> 이렇게 열기, 닫기가 있는 마크업 언어이다.
CSS코드는 기본적으로 속성이름: 속성값;
이렇게 쓰게 된다.
width: 100px;<!-- inline 방식 -->
<태그 style = "속성이름: 값;">
<태그 style = "속성이름: 값; 속성이름: 값;">inline 방식을 쓴다.
html에 style을 적용시키는 방식에는 두가지가 있다.
앞서 설명한 inline 방식 말고도,
하나의 방식은 style 태그를 이용하는 방식이다.
table {
border: 1px;
color: black;
...
}이런식으로 스타일태그를 마련해서, table이 등장하면 저렇게 만들도록 정의하는 것!
예제를 보자!
<body>
<style>
table{
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
</style>
</body>
그런데 table마다 다르게 속성을 정의하려면 어떻게 해야할까?
Class 사용하기
class 개념을 이용하면 된다!
div class="header"
div class = "content"
이렇게 이름 붙여주고,
div.header {
}
div.content{
}이렇게 정의해서 쓰면 된다~!~!
tag name>class>id
tag name은 굳이 명시하지는 않아도 되다
.women{
color:blue;
}
.men{
color:red;
}
이렇게 해줬으면,
<td class="men"~~~~~>이런식으로 해서 쓰면 된다.
#phone{
color: yellow;
}
phone이라는 id를 가진 애에게 저 값 부여.
id는 하나의 값만 가지게 해준다.
<th id="phone"> 전화번호 </th>
class는 재활용 할 수 있다.
'Web > CSS' 카테고리의 다른 글
| [CSS] 마진(margin)과 패딩(padding)의 차이점은? (0) | 2018.11.05 |
|---|---|
| CSS에서 글자 색깔 바꾸는 법 (0) | 2018.11.05 |
| CSS에서 폰트 크기 바꾸는 법 (0) | 2018.11.05 |