CSS 쓰는법

2022. 1. 13. 23:52

728x90

a:hover{background:green}

CSS(Cascading Style Sheets) 는 사이트 꾸밀때 쓰는거임

쓰면 사이트가 이뻐짐

Why using CSS? - 수업 ppt에서 가져옴

• Every element in HTML that is presentable has a set of style properties that can be modified via CSS

• Separating design from contents

• Hopefully handled by different teams in the development

• Easily changing the skin of a web page

• Sharing of the stylesheet among pages on the same site

Using CSS in html

external stylesheet: where a stylesheet file (.css) is linked
internal stylesheet: the styles are included in the HTML head
inline styles: specifying the behaviour for a particular tag directly using a style attribute

External Stylesheet example (쓰는법)

<head>
...
<link rel="stylesheet" href="style1.css" > 
...
</head>

<!--이런식으로 head 안에 link 달아서 만들어놓은 css 파일을 불러온다-->

Internal Stylesheet example (쓰는법)

<head> 
... 
<style>
  hr { color: sienna; }
  p { margin-left: 20px; }
  body { background-image: url("images/back40.gif"); }
</style>
... 
</head>

<!--head 안에 style 테그를 넣는다-->

Inline style example (쓰는법)

<p style="color: sienna; margin-left: 20px;"> 
This is a paragraph
</p>

<!--set style directly-->

style 걍 꼴아박는다

Inheritance and cascading (종속, 상속)

A child inherits the parent's properties if unspecified

The idea of “cascading” reflects the priority of CSS rules:

Overriding importance: inline style > internal stylesheets > external stylesheets
More specific ones override generic ones

Naturally, later ones override earlier ones

Element selectors	Description
p	Select all <p> elements
h1, h2	Select all <h1> and <h2> elements
*	Select all elements
p a	Select all <a> elements that is a child of a <p> element

Pseudo-element selectors	Description
p:nth-child(3)	Select all the <p> elements that are the 3rd child
p::first-letter	Select the first letters of all <p> elements

ID and class selectors	Description
#example	Select the only HTML element having attribute id="example" Note: the id value should be unique in the document
.new	Select all HTML elements having attribute class="new"
p.new	Select all <p> elements having attribute class="new"
pa	Select all <a> elements that is a child of a <p> element

Pseudo-class selectors	Description
a:hover	Select all <a> elements that has the mouse cursor over it
a:link	Select all unvisited <a> elements

a:hover: 마우스 커서를 가져가면 <a>를 선택함.

ex) 색을 바꾸라고 하면 마우스 가져다댈때마다 색변함

<html>
<head>
  <title>TITLE</title>
</head>
<body>
  <p id="p2" style="background:yellow">random</p>
  <a>new</a>
  

</body>
</html>

a:hover{background:green}

How to change Fonts

https://fonts.google.com/ 여기 들어가면 많은 폰트들을 볼수있다.

대충 이것들 복붙하면 폰트가 바뀜

원하는 폰트에 들어가서 다음과 같이 생긴 오른쪽 상단의 버튼을 누르면

이런 창이 나온다. 저기서 위에 있는 링크를 <head>안에 복붙하고 밑에있는 링크를 css에 넣으면 된다.

body{font-family: 'Mochiy Pop P One', sans-serif;}

이런식으로.

그러면 이런식으로 폰트가 이쁘게 바뀐다.

Inline vs. Block-level elements in html

Block-level elements	inline elements
p, h1, table, blockquote, li	i, a, img, small

차이는 이것과 같이 block level element는 줄 통째로 해당되는거고 inline은 글자가 있는만큼만 해당되는거다.

Positioning

By default, all HTML elements has a static position

• Four other possibilities
• absolute: define the top-left using top and left properties

• fixed: positioned relative to the browser window

• relative: relative to original static position

• sticky: position becomes fixed at a certain scroll position, often used for navigation bar or site title bar

The box model

All HTML elements are considered boxes, and they can occupy some space according to these properties

padding: 1px 2px 3px 4px; margin: 4px 3px 2px 1px;	top, right, bottom, left padding/margin being set accordingly
padding: 5px 0px; margin: 10px;	Only two values: top/bottom, left/right Only one value: all sides
padding-left: 5em; margin-top: 2em;	Also possible to set values independently
margin: 0 auto; border: 2px dotted red;	To align a box in middle, use auto x-margin

https://en.wikipedia.org/wiki/CSS_box_model