04-15 수업내용 복습

CSS 코드

Normalize 노말라이즈 (전체에 주는 코드)
Custom 커스텀 (객체에 주는 코드)
---------------------------------------

숫자로 되어있는 이미지 쉽게 넣는 방법

 

ex)  <img src="http://bnx.oa.gg/img/bnx_16fw_visual_01_list.jpg" alt="#">

 

01~10번까지 이미지가 있다고 할 때에

숫자를 매겨야하는 부분에 $$를 사용하고 *10을 하 

 

img [src="http://bnx.oa.gg/img/bnx_16fw_visual_$$_list.jpg"] * 10
순서대로 01~n번까지 숫자가 차례로 매겨진다.

margin 은 border 바깥의 공백이다.

padding 은 border 내부의 공백이다.

 

margin과 padding은

margin-top / padding-top과 같이 속성이 적용 될 방향을 지칭할 수 있다

 

margin a b c d 순으로 기입 할 수 도 있다.

padding a b c d 순으로 기입 할 수 도 있다.

abcd순서는 top에서 부터 시계방향으로 top right bottom left이다

---------------------------------------------------

깨알 팁

고양이 사이즈별로 만들어주는 사이트
https://placekitten.com/너비width/높이height

----------------------------------------------------
선택자 :nth-child;

 

ex)

<section>

  <div></div> 가칭a

  <div></div> 가칭b

  <div></div> 가칭c

  <div></div> 가칭d

  <div></div> 가칭e

  <div></div> 가칭f

</section>

 

:first-child; / :last-child;
첫번째 자식  마지막 자식

section > :first-child { }은 가칭 a를 지칭

section > :last-child; { }은 가칭 f를 지칭

 

:nth-first-child(); / :nth-last-child();
처음에서 시작   마지막에서 시작

section > :nth-first-child(2) { }은 가칭 b를 지칭

section > :nth-last-child(2) { }은 가칭 e를 지칭

:nth-child(n);
자식중에서 n번째 자식
n에는 계산식도 들어 갈 수 있다.

section > :nth-child(2n+1)은 1,3,5,7...를 선택한다.

가칭 a, 가칭c, 가칭e를 지칭