css 기초 문법을 활용하기 이전에 html 기초 문법 정리를 한번 보고 오시는 것을 추천드립니다.
Style 속성
html의 태그에 CSS를 적용하려면 style이라는 속성을 사용합니다.
태그 안에 css를 적용하는 방법 말고, 좀 더 편하게 css를 사용하는 방법들도 존재합니다. 그건 CSS 핵심 문법에서 다뤘으니 확인해보세요.
<div style="...">
...
</div>
CSS코드를 추가할 때는 CSS속성: CSS속성값 형태로 적습니다.
<div style="color: #272928">
...
</div>
여러 개의 CSS속성을 사용할 때는 세미콜론으로 구분합니다.
<div style="color: #272928; background-color: #eeeeee">
...
</div>
CSS기본 속성 사용법 예시
배경색
background-color: #272928
글자색
color: #ffffff
글꼴
font-family: Poppins, 'Noto Sans KR', sans-serif
구글폰트에서 구할 수 있고, 우선 적용할 글꼴부터 차례로 적어 주면 된다.
글자 크기
font-size: 16px
글자 굵기
font-weight: 400
100에서 900까지 100단위로 늘어난다.
너비
width: 560px
페이지나 단락의 너비를 지정한다.
안쪽 여백
padding: 10px 20px
세로 10, 가로 20
바깥 여백
margin: 10px 20px
세로 10, 가로 20
바깥 여백(자동)
margin: 10px auto
세로 10, 가로 auto(auto는 margin의 가로에서만 동작한다.)
줄간격
font-size: 16px;
line-height: 1.5; /* 16px * 1.5 = 24px */
상대적인 값으로, font-size가 16px이라면 line-height: 1.5 은 16px * 1.5 = 24px 으로 조정된다.
텍스트 꾸미기
<a href="https://codeit.kr">
링크
</a>
<br>
<a class="none" href="https://codeit.kr">
밑줄 없는 링크
</a>
<br>
<span class="underline">
밑줄
</span>
<br>
<span class="line-through">
취소선
</span>
.none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
'Development > CSS' 카테고리의 다른 글
CSS 핵심 개념 정리 (0) | 2024.03.05 |
---|
댓글