HTML 기본
<div> : 구역을 나눔
<p> : 문단을 나눔
<ul> <li> : 리스트(점)
<span> : 글자의 일부를 구역으로 지정
<input> : 한 줄 입력
<textarea> : 긴 글 입력
CSS
1. image
background-image: url("");
background-position: center;
background-size: ;
2. margin과 padding
margin : 바깥 여백
.wrap {
width: 300px;
margin: 20px auto 0px auto;
/*위에부터 시계방향*/
}padding : 안쪽 여백
FONT
https://fonts.google.com/?subset=korean
select + 버튼 → <link herf = >로 된 마지막 줄 복사 → title 아래 붙여넣기 → css rules to specify families 내용 복사 → style * { } 괄호 안에 붙여넣기
스타일 시트 연결
<link rel="stylesheet" type="text/css" href="스타일시트명.css">
부트스트랩
https://getbootstrap.com/docs/5.0/components/buttons/
더보기
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
정렬하기
. align {
display: flex;
flex-direction: column; /*세로정렬 : column, 가로정렬 : row*/
justify-content: center;
align-items: center;
}
버튼 꾸미기
더보기
.wrap > button {
color: white;
height: 50px;
width: 150px;
margin-top: 10px;
border-radius: 50px;
border: 1px solid white;
background-color: transparent;
}
.wrap > button:hover {
border: 2px solid white;
}
/*background-color 투명, 마우스가 hover되면 border 크기 굵게*/
이미지 어둡게 하기
더보기
.image {background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("")}
/*0.5 수치를 조정하면 밝거나 어둡게 만들 수 있음*/
이모티콘 모음
https://kr.piliapp.com/facebook-symbols/
post box
더보기
.mypost {
max-width: 500px;
width: 95%;
height: 350px;
box-shadow: 0px 0px 3px 0px gray;
margin: 20px auto 0px auto;
padding: 20px;
}
.btn_post {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 20px auto 20px auto;
}
.btn_post > button {
margin-right: 10px;
}
/*NEW
box-shadow
max-width와 width를 이용해 모바일도 보기 편하게 세팅
div안에 버튼은 div_stylesheet > button으로 세팅가능*/
단축키
ctrl + alt + L : 탭 자동 맞춤
shift + tab : 왼쪽으로 탭
ctrl + / : 주석달기
'css' 카테고리의 다른 글
| [CSS] Grid (0) | 2023.04.23 |
|---|---|
| [CSS] display (0) | 2023.04.22 |
| [CSS] Flexbox (0) | 2023.03.17 |
| [CSS] position (0) | 2023.03.16 |