티스토리 뷰

Programming/.common

HTML + CSS 연습

가그린민트 2017. 11. 16. 10:59


개발 환경 : atom + github (+ git desktop)

atom 사용기 : 자동 완성 단축키 

[tab]
! + [tab]
li*3 + [tab]

사용 패키지

1. minimap
2. pigments
3. color-picker
4. prettier-atom
5. emmet
6. gitplus
7. autoclose-html

theme 적용 (glacier dark) - prettier-atom 세팅 (format on save)

HTML

semantic 태그 : 의미가 있는 태그

non-semantic (<div>, <span>) : 텍스트를 위한 컨테이너

id : 고유 / class : 중복되도 됨


1
2
3
4
5
6
7
8
9
10
11
12
13
14
/// 템플릿
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <style></style>
</head>
<body>
  <div></div>
</body>
</html>
cs

CSS | css-syntax, css-html 연결, 박스모델(마진, 패딩)


box에는 4개의 요소가 있다. contents, border, padding, margin



1
2
3
4
5
6
7
8
9
selector (id, class, tag name) {
  property-name: value;
}
id : #ID
class : .class
tag name : h1
h1 .class {
    property-name: value;
}
cs
\


CSS | display(block inline-block inline)


inline은 box가 아니다. text만 존재한다 따라서 높이, 폭도 존재하지 않는다.(box들이 서로 옆에 붙는 것) block은 어떤 element도 존재할 수 없다.(박스들이 밑에 붙는 것)


CSS | 포지션(static, fixed, relative, absolute)


static은 디폴트, fixed는 고정(어디든 오버랩해서 계속 해당 위치에 고정)

포지션 absolute는 포지션 relative에 상대적으로 포지션을 잡는 것.

relative 포지션이 없을 경우, absolute는 문서의 body에 맞춰서 포지션을 잡음


CSS | flexbox  (연습하기)


justify-content : 수평으로 적용

align-item : 수직으로 적용

flex-direction : column / row 

(-> justify-content는 수직이되고, align-item은 수평이 된다)

flex는 부모박스에만 적용하기

부모박스가 아래 딸려있는 칠드런 박스를 움직이는 것..(플렉스박스이기 때문)

부모 컨테이너(father)를 플렉스로 선언하면, 그 안에 종속된 칠드런 박스들을 움직일 수 있다. 그렇기 때문에 각각 박스에 일일히 명령할 필요가 없다. 그리고 플렉스박스는 그 안의 element도 움직일 수 있다.


CSS | 가상셀렉터(type, nth child)


class 말고 가상 셀렉터

가상셀렉터는 셀렉터인데 element가 아닌 것을 뜻한다.

1
2
3
4
5
6
7
## 기존 class 사용시 코드
<style>
  .submit{
    background-color: red;
  }
</style>
  <input type="submit" class="submit">
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
## 가상 셀렉터 사용
<style>
  input[type="submit"]{
    background-color: red;
  }
  input[required="required"]{
  background-color: red;
  }
</style>
  <input type="submit">
 
<input type="password" required="required">
<input type="submit" required="required">  
cs

CSS 설정시 직계까지만 적용됨 (직계의 직계는 안됨)


1
2
3
4
5
6
7
8
<script>
input + .box{
  border:1px solid yellow;
} // 형제
input > .box{
  border:1px solid yellow;
} // 직계
</script>
cs

element states(hover, active, focus, visited)

Advanced CSS | tranisitions - 이동 / 변경


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <style>
  .box{
    background-color: green;
    color:white;
    transition:all .5s ease-in-out;
  }
  .box:hover{
    background-color: red;
    color:blue;
  }
  </style>
</head>
<body>
  <span class="box">
    Text
  </span>
cs

Advanced CSS | transformations - html 문서의 elements들을 변경, 모습이 변하는 효과를 뜻함 (관련 문서)


1
2
3
4
5
6
7
8
9
10
11
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
      transition: transform .5s ease-in-out;
    }
    .box:hover{
      transform: rotate(1turn) scale(.5, .5);
    }
  </style>
cs

Advanced CSS | animations


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: red;
      animation: 1.5s scaleAndRotateSquare infinite ease-in-out;
    }
    /*@keyframes scaleAndRotateSquare {
      from{
      }
      to{
      }
    }*/
    @keyframes scaleAndRotateSquare {
      0%{
        transform:none;
      }
      50%{
        transform: rotate(1turn) scale(.5, .5);
        color:white;
      }
      100%{
        transform: none;
        color:blue;
      }
    }
  </style>
cs

Advanced CSS | media query (관련 문서)


1
2
3
4
5
6
7
8
9
10
  <style>
  body{
    background-color: green;
  }
  @media screen and (min-width:320px) and (max-width:640px){
    body{
      background-color: blue;
    }
  }
  </style>
cs

http://getbem.com/introduction/

https://en.bem.info/methodology/key-concepts/

https://en.bem.info/methodology/quick-start/


















'Programming > .common' 카테고리의 다른 글

왜 스파크인가?  (0) 2018.12.09
git flow  (0) 2018.06.17
Java Logging with Eclipse  (0) 2017.11.10
RESTful API란 ?  (11) 2017.11.08
'객체 지향과 디자인 패턴' 후기  (0) 2017.10.02
공유하기 링크
댓글
링크
최근에 달린 댓글
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Total
Today
Yesterday