[CSS] CSS tag 정리
https://www.w3schools.com/css/default.asp
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.w3schools.com/css/css_examples.asp
CSS Examples
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.w3schools.com/css/css_quiz.asp
CSS Quiz
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.w3schools.com/css/exercise.asp
W3Schools CSS Exercise
I completed all the CSS exercises on w3schools.com
www.w3schools.com
- CSS link
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
- CSS backgound
<style>
body {
background-image: url("paper.gif") ;
}
</style><style>
body {
background-image: url("img_tree.png");
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed
}
</style>background-attachment: fixed - not scroll
<style>
body {
background-image: url('img1.gif'), url('img2.gif');
background-repeat: no-repeat, no-repeat;
background-position: left top, right top;
}
</style>Position the two background images in each top corner.
<style>
#example1 {
padding: 20px;
background-image: url('img1.gif');
background-repeat: no-repeat;
background-origin: content-box;
}
</style>background-origin: content-box; :
<style>
#example1 {
border: 10px dotted red;
padding: 20px;
background-color: yellow;
background-clip: padding-box;
}
</style>padding-box:
- CSS Border/Margin/Padding
<style>
p {
border-left-style: dotted;
}
</style><style>
h1 {
margin-left: 20px;
}
</style>
<style>
h1 {
margin: (top&bottom)px (left&right)px
margin: top right bottom left;
margin: auto;
}
</style>auto: Use the margin property to center align the <h1> element.
<style>
h1 {
padding: (top&bottom)px (left&right)px;
}
</style><style>
{
width: 200px;
border: 2px solid red;
}
</style><style>
div {
outline-style: solid;
outline-width: 5px;
}
</style>border설정 - outline-style
<style>
div {
outline: 4px dotted red;
}
</style>- CSS Text
text decoration:none;
text-transform: uppercase;
text-transform: capitalize;
text-indent: ;font-weight: bold;
font-variant: small-caps;font-variant: Specifies whether or not a text should be displayed in a small-caps font
<style>
/* unvisited link */
a:link {text-decoration: none;}
/* visited link */
a:visited {text-decoration: none;}
/* mouse over link */
a:hover {text-decoration: underline;}
</style>- CSS Lists / Tables
<style>
ul {
list-style-type: square;
list-style-type: none;
list-style-type: upper-roman
}
</style><style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid green;
}
</style>boder-collapse: the table borders into a single border.
- CSS Display/Visibility
<style>
h1 {
visibility: hidden;
display: none;
}
</style>visibility none 자리는 그대로 있는데 안보이게
display none 아예 안보이게
inline - 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치 <span> <a> <em>
block - 전후 줄바꿈 들어감 <div> <p> <h1> 등
- CSS Positioning
<style>
h1 {
position: fixed;
position: relative;
position: absolute;
}
</style>absoulte- relative to the HTML page
- CSS Z-index
<style>
#mytitle {
position: absolute;
top: 0;
z-index: 1;
}
#myintro {
position: absolute;
top: 0;
z-index: 0;
}
</style>
<body>
<h1 id="mytitle">This is a heading</h1>
<p id="myintro">This is a paragraph</p>
</body>z-index: -1 뒤에, 앞에 위치 이런거 조정
- CSS Overflow
overflow: scroll;
overflow: hidden;
overflow-x: scroll;x 가로로 스크롤
- CSS Combinators
<style>
div > p
{
color: red;
}
</style><style>
div + p {
color: red;
}
</style>div > p div의 child <p>만 적용
div + p 첫번째 <p> element만 적용
div ~ p 모든 siblings of a <div>
- CSS Pseudo-classes
<style>
p:first-child {
background-color: red;
}
</style>any <p> element that are the first child of any element.
<style>
input:focus {
background-color: red;
}
</style>any <input> element that are in focus.
- CSS Pseudo-elements
<style>
.intro::first-line {
background-color: red;
}
</style>.intro::first-line : the first line of the paragraph. (paragraph 첫번째 라인만 적용)
.intro::first-letter : for the first letter
<style>
p::before {
content: url('smiley.gif');
}
p::after {
content: url('smiley.gif');
}
</style>
- CSS Attribute Selectors
<style>
a[target] {
background-color: red;
}
</style>Set the background color to "red" for <a> elements that have a target attribute.
[target="_blank"]
[title~="blue"] : title attribute that contains the word blue.
[title$="flower"] : ending with the word
[title*="flower"] : containg word (flowers도 포함됨)
- CSS Gradients
<style>
div {
background-image: linear-gradient(white, green);
background-image: linear-gradient(to right, white, green);
background-image: linear-gradient(to bottom right, white, green);
background-image: linear-gradient(70deg, white, green);
background-image: radial-gradient(white, green);
background-image: radial-gradient(circle, white, green);
}
</style>- CSS Effects
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>text-overflow: ellipsis; (...)
word-wrap: break-word; ?
word-break: break-all;
- CSS Web Fonts
<style>
@font-face {
font-family: sansation;
src: url('sansation_light.woff');
font-weight: bold;
}
- CSS Tranforms
- CSS Trangitions
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-delay: 0.5s;
transition: background 2s, transform 2s;
transition-timing-function: ease-in-out;
}
- CSS Animations
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes example {
from {background-color: red;}
to {background-color: blue;}
}
</style>