이미지 (img) 삽입, margin, padding, lorem, nth-child

*img

- 이미지 사이즈 조절 시 높이만 or 넓이만 주면 알아서 비율에 맞게 바뀐다. ( 높이, 넓이 같이 줄 경우 이미지가 찌그러진다.)

- 이미지는 기본적으로 inline 이다.

1. 이미지 삽입

// HTML

<img src="이미지파일 주소.jpg" alt="">

 

2. margin / padding

- margin : 박스의 바깥쪽 여백

- margin-right / left / top / bottom 존재 

- margin : 값이1개px; 인 경우 상하좌우

 

- padding : 안쪽 여백

- padding : 박스의 안쪽 여백

- padding-right / left / top / bottom 존재 

- padding : 값이1개px; 인 경우 상하좌우

 

3. nth-child

- div: first-child : 첫번째 요소

- div: nth-child(2) : (숫자)번째 요소

- div: last-child : 마지막 요소

- div: nth-last-child(2) : 마지막에서 (숫자)번째 요소

- section > :nth-child(5n + 1) 등으로 응용 가능하다.

 

4. lorem

- lorem + tab 입력 시 임의의 문장 입력된다.