독학/css

CSS독학3(배경)

나아눙 2022. 8. 19. 22:10

요소의 위치 설정

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>여백 설정하기</title>
<style>
div{width:300px;height:100px;background-color:skyblue;border:2px groove #ff0000;border-radius:10px;padding:50px}
</style>                                                                                         굵기 선스타일 색값
</head>
<body>
<div>
</div>
</body>
</html>

 

1.외곽선 주기 div{border: 굵기 선스타일 색값}

선스타일

  • solid : 그냥 한줄
  • dotted : 점으로 표현.
  • dashed : 점선으로 표현.
  • double : 두 줄로 표현.
  • groove : 입체감 있게 표현.
  • ridge : 볼록하게 표현.
  • inset : 들어가 보이게 표현
  • outset : 튀어나오게 표현

2.모서리를 둥굴게 하기 div{border-radus:값}

값이 클수록 더 둥근모양으로 변한다.

 

3.이미지를 배경으로 넣기 div{background-image:url('주소');}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>배경꾸미기</title>
<style>
    div{width:500px;height:300px;
    background-image:url('star.jpg');
    border:2px groove #ff0000;border-radius:10px}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>여백 설정하기</title>
<style>
    div{width:1000px;height:700px;
    background-image:url('maltese.jpg');
    background-repeat:no-repeat;
    border:2px groove #ff0000;
    border-radius:10px;
    background-position:center center}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

4.이미지 반복 설정 div{background-repeat:값}

  • repeat:가로와 세로로 계속 반복
  • no-repeat: 한번만 나타남
  • repeat-x:가로 방향으로 반복
  • repeat-y:세로 방향으로 반복

5.백그라운드 위치 설정

div{background-position:가로값 세로값}

  • 가로값 : left center right %
  • 세로값: top center botton %

 

6.스크롤바 생성시키기(text가 길때)

div{overflow:값}

  • scroll:스크롤바 생김
  • hidden:넘어가는 부분 표현되지 않고 숨김으로 변함

 

7.배경이미지를 고정 여부 컨트롤

div{background-attachment:값}

  • scroll 스크롤하면 배경그림도 스크롤
  • fixed 스크롤해도 배경이 그대로 그 위치에 있음

배경에 그라디언트 효과 적용

  • background:linear-gradient(시작하는 색,끝나는 색)
  • background:radial-gradient(시작하는 색,끝나는 색)

linear-gradient

<body>
    <div style="background:linear-gradient(skyblue,hotpink);width:300px;height:100px"></div>
</body>

linear-gradient

<body>
    <div style="background:radial-gradient(skyblue,hotpink);width:300px;height:100px"></div>
</body>

radial-gradient

박스에 그림자 전용

box-shadow:가로 세로 번짐 효과 그림자색

<body>
    <div style="background:radial-gradient(skyblue,hotpink);

                      width:300px;height:100px; 

                      box-shadow:10px 10px 10px lightpink"></div>
</body>

box-shadow

 

visibility

  • visibility:visible(표시)
  • visibility:hidden(숨김)
  • visibility:inherit(부모 태그의 값)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>visibility</title>
<style>
b{visibility:hidden}
</style>
</head>
<body>
    <b>b tag - pinkcoding</b>
    <p>p tag - pinkcoding</p>
</body>
</html>

hidden vs none

hidden에서 b태그는 보이지 않지만 레이아웃에 영향미침

none에서 b태그는 보이지 않고 레이아웃에 영향 미치치 않음

 

 

외곽선 border:선굵기 선스타일 색

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>외곽선</title>
  6. <style>
  7. div{width:200px;height:50px;margin-top:10px}
  8. .solid{border:4px solid #cccccc}
  9. .dotted{border:4px dotted #cccccc}
  10. .dashed{border:4px dashed #cccccc}
  11. .double{border:4px double #cccccc}
  12. .groove{border:4px groove #cccccc}
  13. .ridge{border:4px ridge #cccccc}
  14. .inset{border:4px inset #cccccc}
  15. .outset{border:4px outset #cccccc}
  16. </style>
  17. </head>
  18. <body>
  19. <div class="solid">solid</div>
  20. <div class="dotted">dotted</div>
  21. <div class="dashed">dashed</div>
  22. <div class="double">double</div>
  23. <div class="groove">groove</div>
  24. <div class="ridge">ridge</div>
  25. <div class="inset">inset</div>
  26. <div class="outset">outset</div>
  27. </body>
  28. </html>
  29.  

input 태그 외곽선 없애기 input{outline:none}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS의 outline속성 적용</title>
<style>
  input{outline:none}
</style>
</head>
<body>
    <input type="text" value="input" />
</body>
</html>

이게 외곽선이 제거한 상태래요...

흐름조정

float:right

float:left

float:none

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>float</title>
  6. <style>
  7. div{float:left;width:50px;height:50px;margin:10px;border:1px solid #000000}
  8. </style>
  9. </head>
  10. <body>
  11. <div>box 1</div>
  12. <div>box 2</div>
  13. <div>box 3</div>
  14. </body>
  15. </html>

float:left O
float:left X&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 한라인씩 차지함

흐름조정 없애기 clear

  • clear:left float 속성값이 left가 적용된 박스 아래에 위치
  • clear:right float 속성값이 right가 적용된 박스 아래에 위치
  • clear:both left,right 상관없이 적용된 박스 아래에 위치

 

<style>
div{float:right;width:50px;height:50px;margin:10px;border:1px solid #000000}
.box2{clear:left}
</style>

 

<body>
    <div>box 1</div>
    <div class="box2">box 2</div>
    <div class="box3">box 3</div>
</body>

 

float:right; clear:left

 

<style>
div{float:right;width:50px;height:50px;margin:10px;border:1px solid #000000}
.box2{clear:right}

</style>

float2번째 박스부터 라인 변경

<style>
div{float:both;width:50px;height:50px;margin:10px;border:1px solid #000000}
.box2{clear:left}

</style>

float:right clear:both

 CSS리셋

  1. @charset "UTF-8";
  2. body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{margin:0;padding:0}
  3. body,button,input,select,table,textarea{font-size:12px;font-family:Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif}
  4. button,input{border-radius:0}
  5. fieldset,img{border:0}
  6. ol,ul{list-style:none}
  7. address,em{font-style:normal}
  8. a{text-decoration:none}
  9. a:hover{text-decoration:underline}
  10. iframe{overflow:hidden;margin:0;padding:0;border:0}

네이버에서 가져온 리셋 코드

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 사이즈 조정</title>
<link rel="stylesheet" href="reset.css">
<style>
p{font-size:50px}
</style>
</head>
<body>
    <p> hello world </p>
</body>
</html>

원래 margin값이 설정

reset.css로 인해 margin,padding값이 0으로 되었다.

margin속성 사용없이 reset.css인해 여백이 사라짐

CSS애니메이션

  1. 선택자{animation:키프레임 이름, 시간, 반복 횟수}
  2. @keyframes 키프레임 이름{
  3. from{시작할 CSS 속성 값)
  4. to{끝날 CSS 속성 값}
  5. }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 애니메이션 </title>
<link rel="stylesheet" href="reset.css">
<style>
.move{width:100px;height:50px;background:pink;position:relative;
animation: move 3s 1}
@keyframes move {
    from{
        left:0
    }
    to{
        left:1000px
    }
}
</style>
</head>
<body>
    <p class="move"> hello world </p>
</body>
</html>

왼쪽에서 오른쪽으로 움직입니다..

  1. 선택자{animation:키프레임 이름, 시간, 반복 횟수}
  2. @keyframes 키프레임 이름{
  3. from{시작할 CSS 속성 값)
  4. 10%{10% 정도의 진행 상황에 적용할 CSS 속성과 값}
  5. 20%{20% 정도의 진행 상황에 적용할 CSS 속성과 값}
  6. 30%{30% 정도의 진행 상황에 적용할 CSS 속성과 값}
  7. 40%{40% 정도의 진행 상황에 적용할 CSS 속성과 값}
  8. 50%{50% 정도의 진행 상황에 적용할 CSS 속성과 값}
  9. 60%{60% 정도의 진행 상황에 적용할 CSS 속성과 값}
  10. 70%{70% 정도의 진행 상황에 적용할 CSS 속성과 값}
  11. 80%{80% 정도의 진행 상황에 적용할 CSS 속성과 값}
  12. 90%{90% 정도의 진행 상황에 적용할 CSS 속성과 값}
  13. to{끝날 CSS 속성 값}
  14. }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 애니메이션 </title>
<link rel="stylesheet" href="reset.css">
<style>
.move{width:100px;height:80px;border-radius:20px;background:pink;position:relative;
animation: move 3s infinite}
@keyframes move {
  from{
    left:0
  }
  10%{width:100px;height:100px;left:100px}
  35%{width:200px;height:200px;left:200px}
  60%{width:300px;height:300px;left:300px}
  75%{width:200px;height:200px;left:200px}
  95%{width:100px;height:100px;left:100px}

  to{
    left:0px
  }
}
.move p{float:left;width:100%;text-align:center;margin:20px 0 0 0;font-size:30px;color:#fff;
  font-weight:bold}
</style>
</head>
<body>
    <div class="move"> <p>animation</p></div>
</body>
</html>

커졌다가 작아졌다가 무한반복으로 움직입니다..

각도조정 transform:rotate(각도deg)

transform:rotateX(값) 또는 rotateY(값)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>박스 각도 변경</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.transform{width:100px;height:100px;margin:50px;background:pink;transform:rotate(40deg)}
</style>
</head>
<body>
    <div class="transform"> rotate(40deg) </div>
</body>
</html>

기울이기 선택자{transform:skew(가로 기울기 각도, 세로 기울기 각도)}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>기울이기</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
.box{float:left;width:100px;height:100px;margin:10px;background:skyblue}
.box1{transform:skew(30deg, 0deg)}
.box2{transform:skew(0deg, 30deg)}
.box3{transform:skew(30deg)}
</style>
</head>
<body>
    <div class="box box1"> skew(30deg,0deg) </div>
    <div class="box box2"> skew(0deg,30deg)</div>
    <div class="box box3"> skew(30deg)</div>
</body>
</html>

잘기울어짐

트랜지션

선택자{transition:적용할 CSS 속성, 지속 시간, 표현효과종류}

선택자:hover{transition에 사용할 속성}

표현효과종류

  • linear:일정한 속도
  • ease: 느리게 -> 빠르게 -> 느리게
  • ease-in : 시작 시 느리게
  • ease-out : 종료 시 느리게

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>트랜지션</title>
<link rel="stylesheet" href="reset.css">
<style>
.transform{width:100px;height:100px;margin:50px;background:pink;transform:rotateX(0deg);transition:all 5s linear}
.transform:hover{transform:rotateX(50deg)}
</style>
</head>
<body>
    <div class="transform"> transition </div>
</body>
</html>

커서를 올리자 납작해졌어요

  1. <style>
  2. .transform{width:100px;height:100px;margin:50px;background:pink;
  3. transform:rotateX(0deg);transition:width 5s linear}
  4. .transform:hover{transform:rotateX(50deg);width:400px}
  5. </style>

all: hover에 작성된 모든 속성이 바뀜

width:100px -> 400px 5s

 

<style>
.transform{width:100px;height:100px;margin:50px;background:pink;
    transform:rotateX(0deg);transition:width 5s linear, background 8s ease-in}
.transform:hover{transform:rotateX(50deg);width:400px;background:blue}
</style>

width:100px -> 400px 5s

background :pink -> blue 8s

 

display

p태그 :block방식 태그

b태그 :inline방식 태그

display:값

  • block
  • inline
  • inline-block
  • none

display:block

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline block</title>
<link rel="stylesheet" href="Reset.css">
<style>
b{background:pink;display:block}
</style>
</head>
<body>
    <b> b태그(inline) ->display:block </b>
    <b> b태그(inline) ->display:block </b>
    <b> b태그(inline) ->display:block </b>
</body>
</html>

display:block O

 

display:block X

display:inline

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline block</title>
<link rel="stylesheet" href="reset.css">
<style>
p{background:blue;display:inline;margin:0 10px;width:100px;height:100px}
</style>
</head>
<body>
    <p> p태그(block) ->display:inline </p>
    <p> p태그(block) ->display:inline </p>
    <p> p태그(block) ->display:inline </p>
</body>
</html>

display:inline O
display:inline X

자신의 크기만 차지하므로 width , height 속성 적용 X

 

display:inline-block

inline 자신의 크기를 가지면서도 width,height속성이 설정되어 있는 경우 block과 마찬가지로 크기를 따름

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline block</title>
<link rel="stylesheet" href="reset.css">
<style>
p{background:blue;display:inline-block;margin:0 10px;width:100px;height:8px}
</style>
</head>
<body>
    <p> p태그(block)->display:inline-block </p>
    <p> p태그(block)->display:inline-block </p>
    <p> p태그(block)->display:inline-block </p>
</body>
</html>

display:inline-block O

width,height적용O

 

none

해당 태그 X ,레이아웃에 영향 X

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline block</title>
<link rel="stylesheet" href="reset.css">
<style>
p{background:blue;display:none}
</style>
</head>
<body>
    <p> p태그(block)->display:none </p>
    <p> p태그(block)->display:none </p>
    <p> p태그(block)->display:none </p>
    <b> display:none으로 b태그만 있음 </b>
</body>
</html>

b태그