[css] css 정리

정예은·2019년 12월 27일
CSSweb
3

web

목록 보기
5/27

CSS는 웹페이지의 스타일을 준다.

코드 실행해놓은 페이지: http://marin.dothome.co.kr/2020Camp/class/css_tutorial.html

css 형식

h1{color:blue;font-size:12px;}

h1 -> selector: 스타일을 주고 싶은 태그,id,class등
color:blue; -> declaration: ;로 구분
color -> property, blue-> value : :으로 구분

css 주석

p {
  color: red;
  /* 짧은 주석 */
  text-align: center;
}

/* 여러 줄
  주석
  도 이렇게*/

css 주석은 길고 짧은 것 모두 /* */로 구분한다.

selector

*: 전체에 같은 스타일을 줄 때 selector

p: name 전체에 같은 스타일 줄 때 selector

.class: 같은 class 전체에 같은 스타일 줄 때 selector
#id: 특정 id에 스타일을 줄 때 selector

,를 사용해서 여러 곳에 같은 스타일을 줄 수 있음
p.classname: p태그 중에서 class 전체에 같은 스타일 줄 때 selector

css 추가하기

  1. external CSS
    외부에 css 파일을 만들어 link태그로 css를 추가한다.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  1. internal CSS
    head 태그 안 style태그 안에 css를 추가한다.
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
  1. inline css
    태그 안에 style attributes로 css를 추가한다.
<p style="color:red;">이런 식으로 태그 안 style attributes에!! </p>

color

색은
rgb(106, 90, 205), #ffa500, DodgerBlue
hsl(0, 100%, 50%), hsla(9, 100%, 64%, 0.4)
모두 표현 가능

<head>
    <meta charset="utf-8">
    <title>css Tutorial</title>
    <style>
      p{
        background-color:rgb(106, 90, 205);
        color:LightGray;
        border:2px solid Tomato;
      }
    </style>
  </head>
  <body>
    <h1 style="background-color:DodgerBlue;color:#ffa500;border:2px solid Violet;">이건 inline css로!!</h1>
    <p>이거는 internal css로!!</p>
  </body>

background

background-color: 배경색 삽입
background-image: 배경 이미지 삽입
background-repeat: 배경을 반복해서 삽입 할 것인지 정함(repeat, norepeat)
background-attachment: 스크롤할 때 배경을 움직일지 움직이지 않을지 정함(fixed, scroll)
background-position: 어디를 기준으로 맞춰서 보여줄 것인지(left top, right top 같은 식으로 value를 줌)
background-size: 크기 조정

body{
  background-image: url("../img/winter.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
  /*아니면
  background: #ffffff url("img_tree.png") no-repeat right top;
  }
  이렇게 한꺼번에 줄 수도 있음
  */
}

border

border-style(required):
dotted - 점선
dashed - dashed
solid - 직선
double - 이중선
groove - 3D grooved 효과, border 색에 따라 효과가 달라진다.
inset - 3D 안으로 들어간 효과, border 색에 따라 효과가 달라진다.
outset - 3D 안으로 들어간 효과, border 색에 따라 효과가 달라진다.
none - 선이 없음
hidden - 선을 숨김

border-width: 선 두께
border-color: 선 색깔
border-radius: 꼭지점 둥근 모양

#border1{
        border-style: dotted dashed solid double;
        border-width: 2px 10px 4px 20px;
        /*border-top-style: dotted;
          border-right-style: solid;
          border-bottom-style: dotted;
          border-left-style: solid;
        */
}
#border2{
        border-style: groove;
        border-width: 5px;
        border-color: Tomato;
}
#border3{
        border-style: ridge;
        border-width: medium;
  		border-radius: 5px;
}
#border4{
        border-style: inset;
  		border-radius: 8px;
}
#border5{
        border-style: outset;
  		border-radius: 12px;
}
#border6{
        border-style: none hidden;
}

margin

margin: 태그 바깥쪽 여백

#border5{
  border-style: outset;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  /*margin: 25px 50px 75px 100px;*/
}

padding

padding: 태그 안쪽 여백

box-sizing: padding 크기를 정하는 기준

content-box : 콘텐트 영역을 기준으로 크기를 정함
border-box : 테두리를 기준
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속

#border3{
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

height, weight

auto - 브라우저가 자동으로 지정(default)
length - px, cm등으로 지정
% - %으로 지정
initial - default 값으로 설정
inherit - 부모 값 상속

#width1{
  width: 10%;
}
#width2{
  height: 50px;
  max-width: 300px;
}
#width3{
  min-width: 200px;
  max-width: 400px;
}

box modeling

Content : 태그 박스 안의 내용, 텍스트나 이미지
Padding : content 주위 영역(태그 안)
Border : padding과 content를 둘러싼 주위 영역(태그와 밖의 경계)
Margin - border의 밖(태그와 태그 밖 밖깥 태그나 body 사이 영역)

outline

border 밖으로 그려지는 선
outline-style: border-style과 value가 같음
outline-color: border-color과 value가 같음
outline-width: border-width과 value가 같음
outline-offset: outline과 border 사이 여유공간 크기
outline: 여러 속성 한 번에 추가 가능

#width1{
  width: 10%;
  outline: dotted red;
}
#width2{
  height: 50px;
  max-width: 300px
    outline: 5px solid yellow;
}
#width3{
  min-width: 200px;
  max-width: 400px;
  outline: thick ridge pink;}
}

Text

text-align: 어느 쪽에 정렬할지 정함(left, center, right, justify-> 양쪽 정렬)
text-decoration: 텍스트 꾸밈(overline-> 텍스트 위에 줄, line-through-> 텍스트 가운데 선, underline->텍스트에 밑줄)
text-transform: 모두 대문자나 소문자로 바꿔주거나 첫 글자를 capitalize 해주는 것(uppercase, lowercase, capitalize)
text-indent: 들여쓰기
letter-spacing: 글자 사이 간격
line-height: 줄 사이의 간격
word-spacing: 단어 사이 간격
text-shadow: 글자에 그림자 주기
direction: 왼쪽에서 오른쪽으로 쓸지 오른쪽에서 왼쪽으로 쓸지 정하는 것(rtl, ltr)

#left{
  text-align: left;
  text-decoration: overline;
}
#center{
  text-align: center;
  text-decoration: line-through;
  word-spacing: -5px;
}
#right{
  text-align: right;
  text-decoration: underline;
  text-indent: 50px;
  text-shadow: 3px 2px red;
}
#justify{
  text-align: justify;
  text-transform: capitalize;
}

Font

font-family: 먼저 첫번째 것으로 찾고 지원하지 않으면 두번 째 것 그 다음 으로 세번째 것을 찾아서 반영한다.

font-style:

normal - 보통
italic - 기울어짐
oblique - italic과 비슷, 지원하는 브라우저가 적음

font-size: 폰트 크기

vw: viewpoint width-> 브라우저 크기에 따라 폰트 크기가 정해짐

font-weigh: 폰트 굵기

font-variant: small-caps로 볼지 말지 정함.

#justify{
  text-align: justify;
  font-variant: small-caps;
}
p{
	font-family: "Times New Roman", Times, serif;
  	font-size: 20px;
    font-weight: bold;
}

icon

<head>
  /*Font Awesome Icons*/
  <script src="https://kit.fontawesome.com/yourcode.js"></script>
  /*Bootstrap Icons*/
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  /*Google Icons*/
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

a:link : 방문하지 않은 링크(unvisited link)
a:visited : 방문한 링크(visited link)
a:hover :마우스를 링크 위에 올렸을 때
a:active : 마우스로 링크를 클릭한 순간

두 개씩 묶어서 효과 줄 수 있음

a:link {
  color: red;
  text-decoration: none;
}
a:visited {
  color: green;
  text-decoration: line-through;
}
a:hover {
  color: hotpink;
  text-decoration: none;
}
a:active {
  color: blue;
  text-decoration: none;
}

lists

list-style-type: ul은 circle,square, ol은 upper-roman,lower-alpha 선택 가능
list-style-image: url 사용해서 설정 가능
list-style-position: 글 속에 기호를 포함 할지 말지 결정(inside, outside)
list-style-image: 기호나 숫자 대신 image넣기
list-style: type, position,url 한꺼번에 설정 가능

#ul1{
  list-style: square inside url("../img/icon.png");
  /* list-style-image: url('sqpurple.gif');*/
}
#ul2{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#ol1{
  list-style-position: outside;
}
#ol2{
  list-style-position: inside;
}
profile
정예은
이전 포스트

[html] html5, canvas, SVG

다음 포스트

[Javascript] Javascript 정리

0개의 댓글