-
1.
<head> </head> 안에 <style> </style> 공간을 만들어 작성한다.
또한 특정 구역을 지정하여 꾸미고 싶을때,
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
</div>
</body>
이런식으로 class를 지정한다.
그다음
<style>
.mytitle {
color : white;
width : 300px;
}
</style>
이렇게 작성한다.
1).배경관련
background-color
background-image
background-image: linear-gradient
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) : (배경 더 어둡게)
background-size
2).사이즈
width (너비)
height (높이)
3).폰트
font-size
font-weight (글자굵기)
font-family (글꼴)
color
4).간격
margin (바깥쪽 여백)
padding (안쪽 여백)
ex) margin: 20px 은 (top, right, bottom, left 다 20px이란 뜻) 위에서 시계방향으로 돌아감
5).그 외
border radius (테두리 둥글게)
border : 1px sollid white; (선굵기 1px, 실선, 흰색)
text-align (텍스트 정렬 방향)
display flex (박스 안 내용물 정렬)
flex-direction: (flex 컨테이너의 주축방향)
(column은 위에서 아래 수직방향, column reverse는 아래서 위로 수직배치)
(row는 좌에서 우 수평배치, row reverse우에서 좌로 수평배치)
justify-content (플렉스 요소의 수평 뱡향 정렬 방식)
align-items (플렉스 컨테이너 지정하는 속성이며 교차축을 따라 플렉스 항복 열을 정렬하는 방식)
.mytitle > button : hover {border : 5px sollid white;}
(class 지정해놓은 mytitle 의 button 을 hover 마우스를 올려둘때, 선굵기 5px, 실선, 흰색이 된다)
<style> *font-family: Gowun Dodum; </style> (*을 붙이면 모든것에 적용됨)
2.
- 폰트 : https://fonts.google.com/?subset=korean¬o.script=Kore
- 주석: 처리하고 싶은 라인을 선택하고 ctr+/ 누르면 됨. 해체도 같은 조작임
- css 파일 분리 가능: style.css 파일을 같은 폴더에 만들고 head 태그에서 불르면 가능함.
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
head 안에 위에 태그를 붙이면 됨!
- 부트스트랩: 예쁜 css 모아놓은 곳
'종합웹개발 정리' 카테고리의 다른 글
(미정리)2주차-3 (이해도 떨어지는 부분) (0) 2023.01.13 (미정리)2주차-3 (이해도 떨어지는 부분) (0) 2023.01.12 1주차 HTML-meta (0) 2023.01.11 웹개발 종합 1~5주차 배움 순서 (0) 2023.01.11 1주차-웹의 동작 개념 (0) 2023.01.11