CSS 들여다보기

8725 단어 CSSCSS

CSS

1.CSS라는 것은?

Cascading Style Sheet의 약자이며 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 만들어졌다.
C를 뜻하는 Cascading은 Author Style / User Style / Browser 우리가 정의한 스타일이 없다면 사용자가 지정한 스타일로 가고, 사용자가 지정한 스타일이 없다면 브라우저가 지정한 스타일로 가는 것, 이런식으로 떨어지는 느낌을 의미하는 것이다.

HTML의 body라는 상자안에 다양한 섹션으로 나뉘어서 요소마다 레이블링을 해주는데, 열심히 레이블링 해준 결과는 바로 CSS에서 진가를 발휘한다.

selectors(html에 어떤 태그들을 고를 것인지 규정하는 문법)

Universal (모든 태그) : *
Type : Tag (ex.div태그이면 div라고 작성)
ID : #id
Class: .class
State: :
Attribute(해당하는 속성 값들): []


✔ 작성코드 🟠 (HTML, CSS)

<! DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=100%">
   <title>CSS<title>
 </head>
 <body>
    <ol>
     <li id="special">First</li>
     <li>Second</li>
    </ol>
    <button>Button 1</button>
    <button>Button 2</button>
    <div class="red"><button></button></div>
    <div class="blue"></div>
    <a href="naver.com">Naver</a>
    <a href="google.com">Goolgle</a>
  </body>
 </html>
/*selector{
  property : value;
} */

*{
	color: green;
}

li{
	color: blue;
}


li#spcial{
	color: pink;
}

.red{
	background: yellow;
   width: 100px
   height: 100px;
}

button:hover{
	color: red;
   background: beige; 
}

a[href$=".com"]{
	color: purple;
}

✔ 작성코드 🔴 (CSS)**

.red{
	width: 100px;
    height: 100px;
    background: yellow;
}

.red{
	width: 100px;
    height: 100px;
    padding: 20px; 
    background: yellow;
}

padding은 컨텐츠 안에 들어가는 스페이싱

padding-top/-righ/-left/bottom 각각 하나씩 넣을 수도 있지만
시계방향으로 padding: 위; 오; 아; 왼; 가능

.red{
	width: 100px;
    height: 100px;
    padding: 20px; 
    margin: 20px;
    background: yellow;
}


margin은 컨텐츠 밖에 들어가는 스페이싱

💛CSS reference 💛

스프링 MVC - 기본기능(3) - 응답
[Django] Django ORM, 자주 사용되는 명령어

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage