CSS 들여다보기

camille·2022년 3월 25일
0

Css

목록 보기
1/2
post-thumbnail

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 💛


2. CSS 작성 방법

📗 인라인 스타일: 태그 style 속성에 직접 작성할 수 있다.

<h1 style="color: red;">FRONTEND 101</h1>

빠르고 편하지만, 적용해야할 스타일이 많아지면 코드 가독성이 떨어질것이다.
따라서, html 태그와 style코드가 혼재되어 있기 때문에 유지보수에도 좋지 않다.

📘 style 태그: html 파일 내에 css를 작성할 수 있는 방법이다.

<style> 사이에 css문법을 사용하여 스타일을 작성합니다.

<style>
 h2 {
  color: #408090;
 }
</style>

html 파일에 HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법이다.
하지만 기능적으로(HTML구조와 디자인) 분리되지 않았기 때문에 유지보수에 어려움이 있다.
HTML을 수정하려면 html 파일을 확인하고, 디자인을 수정하려면 css파일을 확인하는 것이 개발하기 편리한 환경이라고 볼 수 있다.

📕 css 파일에 작성: html 파일과 분리하여 css파일에 따로 작성하는 방법이다.

html파일에서 어느 css파일이 쓰였는지 브라우저에 알려야 하므로, 링크를 해주는 태그를 추가해야 한다는 것이 특징이다.

<link href="style.css" rel="stylesheet" type="text/css" />
  1. link — link태그로 사용할 css파일을 링크를 해준다.
  2. href — href 속성에 css 파일 경로를 작성한다.
  3. type — link태그로 연결되는 파일이 어떤 것인지 알려주는데 css file을 연결하므로 type값은 항상 "text/css"으로 설정해야한다.
  4. rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성이며 css파일을 링크할 때는 항상 "stylesheet"값을 대입해주는 것이 원칙이다.

0개의 댓글