---

1) 가로로 배치되어있는 div들을 세로로 배치시키는 방법

display: flex;
flex-direction: column;

• 자식div들을 포함하는 부모 div에다가 설정해야 한다.
• flex-direction: column; 주축과 수직축의 방향이 바껴서 세로로 배치될 수 있는 것이다.

---

2) position: fixed;를 맨 위나 맨 밑에서 고정시키는 방법

position: fixed; 설정한후에 top: 0; 또는 bottom: 0; 설정하면 된다.

• 주의사항 : 폭이 바뀌는 경우가 있다. 이때는 width:100%; 설정하자

---

3) 화면 밖으로 빠져나갔을때, 대처법

box-sizing: border-box;

---

4) 사각형을 원으로 만드는 방법 & 수제 icon만들기

• 사각형을 원으로 만드는 방법

  1. 사각형을 정사각형으로 만든다.
  2. border-radius: 50%; 설정한다.

• 수제 icon만드는 방법
  들어보기

  • icon 모양 : ①

<span>1</span>

display: block; (span은 width와 height값을 줄수없기 때문에)

width:10px; 

height:10px;(정사각형에서 원을 만들수있다.)

border-radius: 50%;(width의 절반값)

display: flex;

justfy-content: center;

align-items: center; (1을 중간에 위치시킨다.)

---

5) 같은 tag들이 수평구조로 있을때, css지정하기

<div></div>
<div></div>
<div></div>
<div></div>

첫번째 div 지정하기
div:first-child {
  background-color: teal;
}

마지막 div 지정하기
div:last-child {
  background-color: teal;
}

중간의 div 지정하기
div:nth-child(2) {
  background-color: teal;
}

홀수번째 div 지정하기
div:nth-child(odd) {
  background-color: teal;
}

짝수번째 div 지정하기
div:nth-child(even) {
  background-color: teal;
}

---

6) 다른 tag들이 수평구조로 있을때, css 지정하기

<p>쿠팡</p>
<span>카카오</span>
<p>네이버</p>
<address>토스</address>
<p>라인</p>

span + p {
  background-color: green;
}

• span tag와 같은 선상에 있으면서 바로 밑에 붙어있는 <p>네이버</p> 가 선택된다.

span ~ p {
  background-color: green;
}

• span tag랑 같은 선상에 있고, 밑에 있는 <p>네이버</p> 와 <p>라인</p> 들이 선택된다.

---

7) 특정 attribute가 포함된 tag를 지정하기

<form class="login-box">
  <input placeholder="firstname" type="text" />
  <input placeholder="lastname" type="text" / >
  <input type="submit" value="submit" />
</form>

input[placeholder="firstname"] {
  background-color: tomato;
}

• placeholder="firstname"를 가지고 있는 tag를 지정

input[placeholder*="name"] {
        background-color: tomato;
}

• placeholder라는 attribute의 값이 name을 포함하는 input tag를 지정한다

input[placeholder~="name"] {
        background-color: tomato;
}

• placeholder라는 attribute의 값이 name을 포함하는 input tag를 지정한다,
  • 단 name은 띄워쓰기가 되있어야한다.

input[placeholder$="name"] {
        background-color: tomato;
}

• placeholder라는 attribute의 값의 처음 부분에 name이 있는 tag를 지정한다.

input[placeholder^="first"] {
        background-color: tomato;
}

• placeholder라는 attribute의 값의 끝부분에 name이 있는 tag를 지정한다.

---

8) 마우스 행동에따라 css 지정하기

input:active {
  background-color: tomato;
}

• input을 꾹 누르고 있으면 css를 적용한다.

input:focus {
  background-color: tomato;
}

• input을 클릭하면, css를 적용한다.

input:hover {
  background-color: tomato;
}

• input을 에 마우스를 갖다대면, css를 적용한다.

a:visited {
  background-color: tomato;
}

• 링크를 클릭후, 방문했을 때, css 적용한다.

form:focus-within {
  background-color: tomato;
}

• form의 자식들을 클릭하면, form에 css를 적용한다.
  • 자식을 클릭하면, 부모가 바뀌도록 지정한다.

---

9) css지정 방법정리

1. id, class
2. 자식과 부모관계
3. 같은 tag & 수평관계
4. 다른 tag & 수평관계
5. 특정 attributes를 가지는 tag지정
6. 마우스행동에따라 css지정하기

---

10) input tag의 placeholder attribute 꾸미기

input::placeholder {
  color: brown;
}

---

11) 변수 만들기 & 사용하기

:root {
    --color1: rgb(250, 100, 100);
}

• 변수 만들기
• 속성이 변수명이다. 이때, 변수명앞에 -- 붙여야한다.

color: var(--color1);

• 변수 사용하기

---

12) transition 마우스를 갖다대거나, 클릭할때, 모습이 천천히 변하게 하는법

.coffee-img {
    width: 200px;
    height: 200px;
    border-radius: none;
    border: 1px solid black;
    transition: border-radius 1s ease;
}
.coffee-img:hover {
    border-radius: 50%;
}

• 변화전 모습과 변화후 모습이 있다.
  • 변화후 모습은 state이다. 그러니까 마우스에 행동에 따라 지정된다.
  • 변화후 모습은 이미지에 마우스 포인터를 갖다댄 것이다.
• 변화후의 모습에 transition: border-radius 1s ease; 을 설정한다.
  • transition: 변경요소 변화시간 변화방식
  • 변경요소는 변화전과 변화후에 두 곳에 반드시 설정되어 있어야한다.