1. LESS
브라우저에서 해석되지는 않지만 CSS에서 제공되지 않는 기능들을 사용할 수 있다.
따라서 LESS로 코드를 작성한 후 CSS로 변환하는 방법을 사용하면 좋다.
online 변환 사이트는 여기서 찾을 수 있다.
http://lesscss.org/tools/#online-less-compilers
2. 변수
@base_color : gray;
.wrap{
color: @base_color;
}
3. 중첩
.wrap{
h1{
color: @base_color;
}
}
4. mixin
.wrap{
height: 300px;
weight: 200px;
}
.content{
.wrap;
}
5. 연산
@base_height: 400px;
.wrap{
height: @base_height / 2;
}
1. html에 적용하는 방법(우선순위: inline>internal>external)
1) inline: html 태그 안에 넣기
<body>
<span style="color:red;">Limycat</span>
</body>
2) internal → 추천x, 유지보수, 관리 어려움
<head>
<style>
span {
color:red;
}
</style>
</head>
<body>
<span>Limycat</span>
</body>
3) external
- main.css
span {
color:red;
}
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<span>Limycat</span>
</body>
2. 상속
border, padding 등을 제외한 대부분의 속성은 상속받음
<head>
<style>
div ul li {
color:green;
font-size:20px;
}
</style>
</head>
<body>
<span>Limycat</span>
<ul>
<li>name</li>
<li>age</li>
<li>
<div>
<span>job</span>
<p>my job is blah blah</p>
</div>
</li>
</ul>
</body>
→ name, age, job, my job is blah blah의 color=green, font-size=20px
3. cascading: 충돌이 발생한 경우 우선순위 => CSS specificity
1) 동일한 경우에는 나중 것
span{
color: red;
}
span{
color: blue;
}
→ blue
2) 구체적으로 표현된 것
body > span{
color: red;
}
span{
color: blue;
}
→ red
3) id > class > element
<div id="a" class="b"> </div>
#a {
color: red;
}
.b {
color: blue;
}
div {
color: green;
}
→ red
4. style
1) color
color: red;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); // alpha = 희미하게
color: #ff0000;
color: #f00;
2) font-size
font-size: 16px;
font-size: 2em; // 2 * 기준값(기본 16px, font-size로 정의해주거나 상속받는 경우 달라짐)
3) background-color
background-color: green;
...
4) font-family
font-family: "Gulim";
font-family: monospace;
font-family: sans-serif;
5. box model
1) margin
margin: 10px 10px 10px 10px; // 위, 오른쪽, 아래, 왼쪽 (시계방향)
margin: 10px;
margin: 10px 15px; // top, bottom 10px, left, right 15px
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
인접한 두 개의 block element가 다른 margin을 가지면? 가장 큰 값의 margin이 공유되어 사용됨
인접한 두 개의 inline element가 다른 margin을 가지면? 각각의 margin 합으로 표현됨
2) border
border: 4px solid gray; // 회색 4px 직선 테두리를 두름
3) padding
padding: 10px 10px 10px 10px;
padding: 10px;
padding: 10px 15px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
6. position
1) static
position: static;
2) relative: 원래 자신이 위치하던 곳에서부터 움직임
position: relative;
3) absolute: 다른 것들이 자신을 무시함, 기본 레이어 관계에서 벗어남(독립적)
position: absolute;
4) fixed: 스크롤 등을 하더라도 그 위치에 고정되어있음
position: fixed;
7. float
float: left;
- 하늘로 떠있음. float끼리는 겹치지 않음
- layer를 상하가 아닌 좌우로 배치할 때 사용 가능
- 이 때, 부모가 float된 것이 자신의 자식이라고 생각하지 않아 문제가 발생함 → overflow: auto;로 해결할 것
- 같은 자식이지만 float가 있는 경우 형제라고 생각하지 않아 문제가 발생함 → clear:left;로 해결할 것(float와 같은 속성값을 따라감)
8. flex: 구성
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
9. z-index: 앞, 뒤로 배치
z-index: 1;
- 기본값: 0
- 값이 커질수록 앞에 오고, 작아질 수록 뒤로 감
- 기본적으로는 나중에 있는 것이 앞에 옴
1. structure
<html>
<head> </head>
<body> </body>
2. tag
1) commnet: <!-- -->
2) title: <title>limycat</title>
3) link: <a href="google.com">go to google</a>
- a: hyperlink / href: hypertext reference
4) heading: <h1></h1> to <h6></h6>
5) unordered list:
<ul>
<li>apple</li>
<li>banana</li>
</ul>
- ul: unordered list / li: list item
3. block
1) div: 아무때나 사용 가능
2) section: 논리적 집합체
3) article: 독립적인 부분, 다른 곳에 옮기더라도 실행 가능
4. span
div와 비슷하지만 inline이므로 줄바꿈x