1. 상속
- 부모 엘리먼트의 속성을 자식 엘리먼트가 물려받는 것을 의미한다.
상속은 CSS에서 생산성을 높이기 위한 주요한 기능이다.
2. 우선순위
- '구체적인 것'을 기준으로 우선순위가 정해진다.
- !important : 우선순위가 가장 먼저 적용된다. 쉬운 방법이긴 하나
좋은 방법은 아니다.
3. float
- 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법이다.
- left : 요소를 부모박스 안에서 왼쪽에 고정시킨다.
right : 요소를 부모박스 안에서 오른쪽에 고정시킨다.
inherit : 부모 요소에 적용된 float 속성값을 상속 받는다.
none : 기본값, float속성을 적용하지 않는다.
<style>
img{
width: 300px;
float: left;
margin: 20px;
}
p{ border: 1px solid gray; }
</style>
</head>
<body>
<img src="puppy.jpg">
<p>
There are many variations of passages of Lorem Ipsum available
</p>
<p>
There are many variations of passages of Lorem Ipsum available
</p>
</body>4. position
- 포지션 속성 위치를 지정하는 4가지 방법
-> static
-> relative
-> absolute
-> fixed - css 각각의 엘리먼트는 위치가 정적(static)으로 존재한다.
<style>
html{ border: 1px solid gray; }
div{
border: 5px solid tomato;
margin: 10px;
}
#me{
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>5. multi-column
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#column{
text-align: justify;
column-count: 4;
/*column-width: 200px;*/
column-gap: 30px;
column-rule-style: solid;
column-rule-color: tomato;
column-rule-width: 5px;
}
h1{
column-span: all;
}
</style>
</head>
<body>
<div id="column">
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
<h1>There are many variations of passages of Lorem Ipsum available</h1>
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
</body>
</html>6. background
<style>
div{
border: 5px solid gray;
background-color: tomato;
height: 500px;
background-image: url('sun.png');
background-repeat: no-repeat;
background-attachment: scroll;
/*background-size: 500px 1000px;*/
/*background-size: contain;*/
background-position: left bottom;
}
</style>
</head>
<body>
<div>
There are many variations of passages of Lorem Ipsum available
There are many variations of passages of Lorem Ipsum available
</div>
</body>7. link와 import
** Cache
- 자주 접근하는 데이터를 복사 해놓는 임시 저장소
** Browser Cache
- 서버 지연을 중이기 위해 사용하는 웹 캐시의 일종
<style> /*h1{ color: tomato; }*/ @import url("style.css"); </style><link rel="stylesheet" href="style.css"> <style> /*h1{ color: tomato; }*/ </style> </head> <body> <h1>page2</h1> </body>
개발자로 진로 변경을 위해 준비하고 있습니다