1. style
<head>
<style>
.style_tag {
margin: 10px 20px;
padding: 10px 20px;
display: block;
∙
∙
∙
</style>
</head>css 파일을 만들지 않고 html 파일안에 작성하려면 <head> 안에 <style>을 이용하여 작성
<div class="style_tag" style="margin: 0px;"> </div>아니면, tag에 style="css_tag:값;"으로 작성
2. link
css파일을 사용하려면 html파일과 연결해야 되는데, 이때 link tag를 사용
<link rel="stylesheet" href="파일명.css">3. width, height
width(너비) 와 height(높이)는 요소의 크기를 결정하는 태그
.style_tag {
width: 300px;
height: 40%; }
이렇게 사용가능4. margin, padding
margin 은 요소가 포함되지 않는 바깥쪽 여백, padding 은 요소가 포함되어 있는 바깥쪽 여백
값을 10px; 하나만 입력하면 상하좌우 10px;
값을 10px 15px; 두개 입력하면 상하 10px, 좌우 15px;
값을 10px 15px 20px 25px; 네개 입력하면 상 10px, 우 15px, 하 20px, 좌 25px;
margin과 padding 동일5. text-align
text-align은 text 를 정렬할 때 사용
left, right, center, justify 등이 있다text-align: left; 왼쪽 정렬
text-align: right; 오른쪽 정렬
text-align: center; 중앙 정렬
text-align: justify; 좌우 거리 일정하게 정렬
6. font
크기 조절은 font-size: 20px;
글꼴 수정은
link tag 활용해서 폰트 url을 연결 시킨 후,
font-family: '폰트명'7. background-color
바깥쪽 배경 색상 지정 background-color: grey;8. text-decoration, list-style
text-decoration: none; 글자에 대한 꾸밈을 없애거나 지정
list-style:none; 리스트에 대한 꾸밈을 없애거나 지정9. position
position: absolute; box의 배치 위치를 지정
static 은 기본값
relative 는 현재 위치한 곳에서 떨어뜨릴 때 사용
absolute 는 현재 위치한 컨테이너의 첫번째 요소 위치부터 떨어뜨릴 때 사용
fixed 는 페이지의 위치를 지정 할 때 사용10. display
display: block; 요소를 배치할 때 레이아웃을 지정
block 한줄을 다 차지하는 레이아웃
inline 속한 박스의 크기 만큼 자리를 차지하는 레이아웃
flex 요소를 유연하게 배치 가능 11. flexbox
display: flex;로 지정하고, 설정하면 원하는대로 배치 가능
justify-content 현재 설정된 방향에서 요소들 배치 (가운데 정렬, 일정한 간격으로 정렬등)
align-items 현재 설정된 방향 반대방향에서 요소들 배치(요소의 현재 위치에서 배치 조정)
align-content 현재 설정된 방향 반대방향에서 box안에 요소들 배치(처음, 중간, 양쪽 끝 등)
flex-direction 요소들의 배치를 가로, 세로를 변경 할 수 있음
flex-wrap 요소 배치보다 화면이 작아졌을때 다음 줄로 넘길 수 있음
flex-flow flex-direction flex-wrap 순으로 하나의 명령으로 설정 가능12. animation, @keyframes
animation:name 2s infinite; 요소에 움직이는 효과를 주고 싶을 때 사용
이름, 움직이는 속도, 한번 움직일지 영원히 움직일지 등을 지정
@keyframes name {
0% {width:0%; }
100% {width:50%; }
}
keyframes은 처음에는 어떤 상태였던게, 나중에 어떻게 될것이다 라고 지정 가능
form to 를 사용해서도 지정 가능13. @media
@media (max-width: 1024px;) {
조건들 }
미디어 쿼리는 화면의 크기에 따라서 배치를 바꾸거나, 크기를 바꾸거나, display를 none으로 하는 등의 설정을 할 수 있다
제가 참고하기 위해 만든 블로그라 글을 편하게 작성했습니다. 틀린거 있다면 댓글 부탁드립니다.