CSS 기초

CSS : HTML에 디자인적 요소를 넣기 위해 사용

div 구역에 "mytitle" class설정

1. 자주 쓰이는 css

class : 태그에 대한 이름을 지정해주는 것과 같다.

 

.mytitle로 세부정보를 설정한다.

 

<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 라이브러리를 모아놓은 툴킷

https://getbootstrap.kr/

Bootstrap

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코드를 복사해서 사용한다.