CSS 는 “Cascading Style Sheets” 의 약자이다.
HTML 은 레이아웃과 필요한 요소들을 웹 페이지에 붙여놓는 것이라고 생각하면
CSS 는 디자인 같은 요소?라고 해야하나 뭐 암튼 예쁘게 꾸미기 위해 쓰는 언어이다
CSS Syntax
CSS Selector: 스타일하고 싶은 HTML 요소들을 찾아준다. 총 다섯가지 selector 들이 있다.
1. Simple Selector: 요소를 이름, id, 클라스에 따라 선택하는 것.
id selector : #id {}
class selector: .class {}
혹은 p.class{}
Universal selector: * {}
grouping selector: h1, h2, p {} 여러가지 요소들이 같은 스타일링을 이용할 때 사용할 수 있음
2. Combinator Selector.
셀렉터 간의 관계를 보여줌
Descendant selector : 특정 요소의 후손(?) 그니까 특정 요소 안에 소속된 다른 요소들을 다 선택하는 셀렉터
div p {
background-color: yellow;
}
이 코드는 div 안에 있는 모든 p 에 대해 셀렉터가 선택한다.
Child selector :
div > p {
background-color: yellow;
}
여기서 보시다시피 > 라는 기호를 사용함.
div 의 자식은 모든 p 를 선택한다는 뜻
Adjacent Sibling selector :
div + p {
background-color: yellow;
}
옆에 있는 “형제” 요소를 선택하겠다라는 의미.
여기서는 div 바로!! 옆에 있는 p 를 선택하겠다는 의미
똑같은 부모 요소를 가져야함
General Sibling selector :
div ~ p {
background-color: yellow;
}
모든 “형제” 요소를 선택하겠다라는 의미.
여기서는 div 와 같은 부모를 가진 모든 요소 p 를 선택하겠다는 의미
3. Pseudo Class Selector
Pseudo Class 는 어떤 요소의 특정한 state 를 정의할 때 사용된다.
예를 들자면 !
> 사용자가 버튼 위에 마우스를 올려둔다던지…
>방문했던 링크, 방문하지 않았던 링크 구분하기 위해..?
등등…
Syntax 는
selector:pseudo-class {
property: value;
}
Selector
Example
Example description
a:active
Selects the active link
input:checked
Selects every checked <input> element
input:disabled
Selects every disabled <input> element
p:empty
Selects every <p> element that has no children
input:enabled
Selects every enabled <input> element
p:first-child
Selects every <p> elements that is the first child of its parent
p:first-of-type
Selects every <p> element that is the first <p> element of its parent
input:focus
Selects the <input> element that has focus
a:hover
Selects links on mouse over
input:in-range
Selects <input> elements with a value within a specified range
input:invalid
Selects all <input> elements with an invalid value
p:lang(it)
Selects every <p> element with a lang attribute value starting with “it”
p:last-child
Selects every <p> elements that is the last child of its parent
p:last-of-type
Selects every <p> element that is the last <p> element of its parent
a:link
Selects all unvisited links
:not(p)
Selects every element that is not a <p> element
p:nth-child(2)
Selects every <p> element that is the second child of its parent
p:nth-last-child(2)
Selects every <p> element that is the second child of its parent, counting from the last child
p:nth-last-of-type(2)
Selects every <p> element that is the second <p> element of its parent, counting from the last child
p:nth-of-type(2)
Selects every <p> element that is the second <p> element of its parent
p:only-of-type
Selects every <p> element that is the only <p> element of its parent
p:only-child
Selects every <p> element that is the only child of its parent
input:optional
Selects <input> elements with no “required” attribute
input:out-of-range
Selects <input> elements with a value outside a specified range
input:read-only
Selects <input> elements with a “readonly” attribute specified
input:read-write
Selects <input> elements with no “readonly” attribute
input:required
Selects <input> elements with a “required” attribute specified
root
Selects the document’s root element
#news:target
Selects the current active #news element (clicked on a URL containing that anchor name)
input:valid
Selects all <input> elements with a valid value
a:visited
Selects all visited links
여러 Anchor Pseudo Class 는 여러가지 방법으로 보여 줄 수 있다.
/* unvisited link */
a:link {
color: #FF0000;
}
방문하지 않은 링크
/* visited link */
a:visited {
color: #00FF00;
}
방문한 링크
/* mouse over link */
a:hover {
color: #FF00FF;
}
위에 마우스를 둔 링크
/* selected link */
a:active {
color: #0000FF
}
선택한 링크
이 코드는 그냥 신기해서 가져옴
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
이랬는데 hover 하면
:first-child
첫번째 p 에만 적용됨
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
:lang
이것은 언어에 따라 스타일 선택할 수 있게 함
4. Pseudo Element Selector
어떤 요소의 특정한 부분을 스타일링 할 수 있게 해줌!
예를 들어 첫번째 캐릭터라던지 등등
이것이 Syntax
selector::pseudo-element {
property: value;
}
::first-line
텍스트의 첫번째 줄에다가 스타일을 넣어줌
신기하당
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
first line 에는 이런 ‘pseudo-element’ 들이 적용 될 수 있다
::first-letter
첫번째 글자
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
이렇게 여러가지 셀렉터가 있다.
5. Attribute Selector
CSS 에서 주석을 달고 싶으면 /* */ 사용하면 된다
CSS Backgrounds
* background-color : 배경색 바꿔줌
*background-image: 배경이미지 선택해서 바꿀 수 있음
*background-repeat: 배경이미지가 해당 공간을 완전히 채우지 않으면 반복해서 해당 공간을 채우는데 이 css 를 none 이라고 설정하면 배경이 반복적으로 배열 되지 않음
*background-attachment : 배경이미지가 스크롤 할때 같이 내려가야하는지 아니면 고정 되어야하는지
https://www.w3schools.com/css/
*background-shorthand 는 위에 있는 모든 것을 한 줄의 코드로 정리할 수 있음
body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}
순서는 : background: background-color, background-image, background-repeat, background-attachment, background-position:
CSS Border
* border-style: 보더의 스타일을 여러가지 지정해줄 수 있음.
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
이런 식으로 각 side 의 특성을 정해 줄 수 있음.
*border-width: 는 border 의 두께 지정할 수 있음 그리고 좀 더 customizing 할 수 있게 한줄에 각 side 의 두께를 명시 할 수 있음
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
border-color: 는 보더의 색깔을 지정해줌
border-radius: 는 보더의corner 의 모서리를 설정하는데
CSS Margin
요소 주변에 공간을 넣어주는 CSS element.
auto : 브라우저가 margin 을 계산한다
length: 는 px, pt, cm 기준으로 margin 계산해서 넣음
%는 specifies a margin in % of the width of the containing element
inherit: 부모 요소로부터 margin 을 받아온다
margin collpase 는 위아래 margin 에만 적용 된다.
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
살펴보면 h1의 밑에 margin 은 50px, h2 는 20인데 실제로 코드를 돌려보면
h1 과 h2 사이의 margin 은 50px 이 된다. 70 이 아니라!
CSS Padding
요소의 보더 안에 공간을 채워 넣어주는! margin 은 밖! padding은 안!
CSS Height & Width
넓이와 세로 길이를 결정해주는
max-width: 는 어떤 요소의 최고넓이를 설정해주는 것
CSS Height & Width
최고넓이를 설정
그래서 정리하면 이렇게 layout 이 배치됨.
CSS Outline
border 는 outline 이랑 다른게 outline 는 어떤 요소의 border 밖에 그려지고 어떤 요소의 dimension 에 포함 안된다. 그래서 어떤 element 의 규격이 50px 50px 이고 outline 이 10px 이어도 element 의 규격은 50px 50px 이다.
outline-style
outline-color
outline 의 색깔 지정
outline-width
outline-offset
outline과 border 사이의 간격을 정해줌
outline
CSS Text
border 는 outline 이랑 다른게 outline 는 어떤 요소의 border 밖에 그려지고 어떤 요소의 dimension 에 포함 안된다. 그래
color; background-color: 텍스트의 색깔과 배경색을 지정해줌
text-align: left, right, center, justify 값들이 있다
(justify 는 모든 line 이 같은 넓이를 가질 수 있도록 세팅해줌)
direction: 방향을 바꿔줌
vertical-align:
text-decoration: 텍스트의 decoration 을 세팅할 수 있거나 삭제할 수 있음
(보통 링크를 달 때 밑에 underline 을 제거해주는 역할을 함)
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
text-transform:
> uppercase, lowercase, capitalize 가 있다
text-indent:
tab 기능을 함
text-shadow:
text-shadow: horizontal shadow, vertical shadow, blur, color;
CSS Fonts
.p1 {
font-family: “Times New Roman”, Times, serif;
}
서체 정해줌. TimesNew Roman 을 찾을 수 없으면 Times 를 대신 쓴다.
Web-Safe fonts
Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
Font Style
font-style: normal, italic, oblique 가 있다.
font-weight: 는 폰트의 무게?라고 해야하나
normal, lighter, bold 이렇게 설정할 수 있다 px 로 설정도 가능
font-variant: normal, small-caps
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
font-variant: 폰트의 크기
CSS Lists
HTML 에서 리스트는 총 두가지로 분류됨
> unordered lists <ul> (uses bullets)
> ordered lists <ol> (uses numbers)
list-style-type, list-style-image: 옆에 붙는 bullet? 의 스타일 지정해줌
ul.a {
list-style-type: circle;
}
list-style-image: url(‘sqpurple.gif’);
list-style-position: specifies the position of the list-item markers (bullet points)
CSS Layout
display 는 어떻게 element 를 보여줘야하는지 설정해줌
display: block
>always starts on a new line and takes up the full width available
display: inline
>does not start on a new line and only takes up as much width as necessary.
display: none;
>숨긴다, visibility: hidden 과 비슷한 역할 함. 하지만 visibility hidden 보여주지 않기만 하는데 레이아웃에는 아직 그대로 남아있다. display: none 은 마치 페이지에 없듯이 보여준다
display: inline-block :
>display: inline 과 같은데 width 와 height 를 지정할 수 있게 해줌
CSS Position
position: static
not affected by the top, bottom, left, and right properties.
position: relative
positioned relative to its normal position
position: fixed
it always stays in the same place even if the page is scrolled.
position: absolute
positioned relative to the nearest positioned ancestor
positioned: sticky
positioned based on the user’s scroll position.
CSS Overflow
너무 많은 정보가 제공 될 때 overflow 는 이 content 를 스크롤? 할 ㅜ 있게 해줌
overflow: visible
not clipped and it renders outside the element’s box
overflow: hidden
overflow is clipped, and the rest of the content is hidden
overflow: scroll
overflow is clipped and a scrollbar is added to scroll inside the box.
overflow: auto
similar to scroll, but it adds scrollbars only when necessary:
overflow-x , overflow-y
수평으로 혹은 수직으로 스크롤하고 싶은지 정하는 것
CSS Float
used for positioning and formatting content
float: right
float: left
float: none
CSS Align
이거 진짜 중요함…
Horizontally center:
margin: auto; 사용
이미지를 중간에 넣는 방법
display: block;
margin-left: auto;
margin-right: auto;
왼쪽과 오른쪽 align: position 이용해서
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
왼쪽과 오른쪽 align: float 이용해서
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
.left {
float: left;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Center Vertically Using padding
.center {
padding: 70px 0px;
border: 3px solid green;
}
Center Vertically & Horizontally Using padding
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
CSS Opacity
specifies opacity/ transparency
0.0.-1.0
1 에 가까울수록 더 선명하고 0 에 가까울수록 더 희미해짐
CSS Navigation Bar
이렇게 생긴 애들을 네비게이션 바라고 부름
보통 <ul> 이랑 <li> <a> 을 이용해서 만들 때도 있다.
navigation bar 는 vertical, horizontal 로 구분됨
vertical navigation bar:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
horizontal navigation bar:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
active 을 이용해 사용자에게 어떤 화면에 있는지 어떤 버튼을 클릭했는지 알려줄 수 있음
CSS DropDown
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> — needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class=”dropdown”>
<button class=”dropbtn”>Dropdown</button>
<div class=”dropdown-content”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
</div>
일단 코드 복붙
CSS ImageSprite
많은 이미지들을 한꺼번에 한 이미지로 묶어놔서
필요한 부분 가져옴
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img id=”home” src=”img_trans.gif” width=”1" height=”1">
<img id=”next” src=”img_trans.gif” width=”1" height=”1">
</body>
</html>
img_trans.gif라는 파일에 #home 은 0 0 px 에 위치한 아이를 가져았고
옆에 넥스트 버튼은 #next 는 -91px 0 에 위한 아이 가져옴
CSS Attribute
[attribute] selector is used to select elements with a specified attribute.
[attribute|=”value”] selector is used to select elements with the specified attribute starting with the specified value.
Note: The value has to be a whole word, either alone, like class=”top”, or followed by a hyphen( — ), like class=”top-text”!
[attribute~=”value”] selector is used to select elements with an attribute value containing a specified word.
attribute^=”value”] selector is used to select elements whose attribute value begins with a specified value.
does not have to be a whole word!
[attribute$=”value”] selector is used to select elements whose attribute value ends with a specified value.
[attribute*=”value”] selector is used to select elements whose attribute value contains a specified value.
CSS Counter
counter-reset — 새로운 카운터를 만들거나 초기화 시킨다
counter-increment — 카운터 값을 더해준다
content — 생성한 콘텐츠를 투가해줌
counter() or counters() function — 어떤 요소에 카운터 추가해줌
CSS Specificity
충돌되는 스타일 요소가 있으면 이 hierarchy 를 따라 제일 높은 위치에 명시되어 있는 스타일을 따라 적용함
Inline styling > ID > Classes, attributes, pseudoclass > Elements and Pseudo elements > External
Resources: