page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

4일차 코딩 - 이미지 및 여백주기

1. 이미지 삽입하기 - img 태그

• img 태그 입력 방법
  • <img src=”” art=””>
  • img 태그에는 기본적으로 두 가지 속성 src, alt 가 생성된다.
  • src 는 이미지의 링크를 삽입하여 이미지를 삽입한다.
  • art 는 이미지가 어떤 잘못으로 인해 나오지 않을 경우 ‘이미지 로딩 실패’ 등으로 사용자에게 보여줄 메세지를 표시한다.
  • img 태그는 단일 태그로 자식을 가질 수 없다.
  • img 태그의 기본 display 값은 inline-block 이다.

img 태그 사용 된 모습

링크 오삽입으로 alt 의 오류 메세지가 나오는 모습

• 이미지에 넓이를 지정 하는 것 보다는 부모 태그로 감싼 후에 부모 태그의 넓이를 지정 한 후 이미지 넓이 값은 100%로 해서 조정 하는 것 이 좋다

• lorem + tab 아무 글자 만들기 → 왜 쓰는건지 모르겠는데 찾아봐야함

2. 여백주기 - margin, padding

• margin : 바깥쪽 여백 주기
• top left bottom right 등 사용
• margin : 50px 50px 12px 30px; ⇒ top 방향부터 시계방향 적용 (top→right → bottom → left)
• margin : 50px 80px; ⇒ 상하 50 / 좌우 80 적용