CSS : HTML에 디자인적 요소를 넣기 위해 사용
1. 자주 쓰이는 css
class : 태그에 대한 이름을 지정해주는 것과 같다.
<style>안에서 .클래스이름{속성 값}으로 세부정보를 설정한다.
width : 가로길이
height : 세로길이
color : 폰트 색
text-align : 텍스트 정렬(start, center, end, justify(양쪽정렬))
padding : 안쪽 여백(-bottom, top, right, left로 특정 구역만 여백 설정이 가능하다)
margin : 바깥쪽 여백 (-bottom, top, right, left로 특정 구역만 여백 설정이 가능하다)(auto를 사용해 끝까지 설정할 수 있)
border : 테두 설정(-radius로 모서리를 둥글게 설정할 수 있다)
background-color : 배경 색
background-img : 배경에 이미지를 적용
background-position : 배경이미지의 위치를 설정(top, left, center, right, bottom)
background-size : 배경이미지의 크기를 설정
tip) <div>로 구역을 나누고 설정할 때 background-color를 잘보이는 색으로 설정 후 세부조정을 하면 편하다.
2. 구글폰트 쓰기
https://fonts.google.com/?subset=korean&script=Kore
1) 원하는 폰트를 선택한 후 get pont -> get embed code 순으로 클릭한다.(@import형식으로 가져와야한다)
2) style부분의 코드를 복사해서 head속 style부분에 붙여넣는다
3) css부분을 복사해서 @import 바로 밑줄에 붙여넣는다
3. 부트스트랩 쓰기
부트스트랩 : HTML,CSS,Javascript 라이브러리를 모아놓은 툴킷
Bootstrap
강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기
getbootstrap.kr
head부분에 부트스트랩 CDN를 붙여넣고 사용한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-VSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-부트스트랩에서 원하는 틀의 HTML코드를 복사해서 사용한다.
'HTML,CSS,Javascript' 카테고리의 다른 글
| HTML 기초 (1) | 2024.09.30 |
|---|