🚩 이미지 관련 태그

<img>

📝 쓰임새

• 화면에 이미지를 넣을 때 사용한다.

✒️ 사용법

입력 & 설명

<image src="" alt="" title="">

• src 안에 넣고 싶은 이미지의 경로를 적으면 된다.

  • 절대경로

    • 이미지 자체의 url을 복사하여 작성 (웹주소)

  • 상대경로

    • 이미지의 경로가 현재 파일과 같은 폴더에 있을 때는 파일명만 적어도 된다.
    • 이미지의 경로가 내부 폴더 안에 있을 때는 '/'를 사용하여 경로를 적어준다.
    • 이미지의 경로가 상위 폴더 안에 있을 때는 '../' 을 사용하여 경로를 적어준다.

• alt는 이미지를 설명할 때 사용됨. 무조건 사용해주는 것이 좋다.

• title 사용 시 이미지 위에 마우스 커서를 올렸을 때 적어 놓은 툴팁이 보임 (무조건 사용하지 않아도 됨)

• 이미지의 비율은 width/height로 자유롭게 조정 가능하지만 원본 비율을 유지하는 것이 좋다.

• 이미지 파일 사용 시 확장자에 주의

  • webp 파일 같은 경우는 낮은 버전의 브라우저에선 지원이 안 될 가능성이 있다.

---

<figure>

📝 쓰임새

• 웹 문서에서 그림, 사진, 도표, 그래프와 같은 콘텐츠를 담는 컨테이너 역할을 하는 태그
  

✒️ 사용법

입력 & 설명

<figure>
	<figcaption>
    </figcaption>
</figure>

* figcaption: figure 안에 있는 내용에 대해 설명할 때 사용

---

🚩 스타일시트

margin & padding

📝 쓰임새

• margin

  • 영역 바깥쪽에 여백을 주는 기능 (object와 화면 간의 여백)

• padding

  • 영역 안쪽에 여백을 주는 기능 (object 내의 여백)

✒️ 사용법

입력 & 설명

{ margin: 20px; padding: 20px; }

• left, top, right, bottom을 사용하여 적용하고싶은 방향을 지정하여 줄 수 있다.

  ex) margin-top: 20px; padding-right: 20px;

• 값 대신 auto를 사용하면 자동으로 중앙정렬 가능

🔗 참고 링크 & 도움이 되는 링크

• [Html] Margin, Padding 속성의 차이점과 사용법

---

display

📝 쓰임새

• 웹 페이지의 레이아웃을 결정하는 중요한 속성.

✒️ 사용법

입력 & 설명

{
	display: block;
	display: inline;
	display: inline-block;
}

 * display의 속성은 이외에도 많지만 수업에서는 3가지만 배웠다.

block

• display 속성이 block으로 지정된 엘리먼트는 줄바꿈이 되어 문자 한개만 있어도 전체 한 줄을 차지한다.
  • ex) div, p, h1 등

inline

• display 속성이 inline으로 지정된 엘리먼트는 줄바꿈 없이 다른 엘리먼트들과 나란히 배치되고, margin이나 padding이 적용되지 않는다.
  • ex) span, a, em 등

inline-block

• display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline처럼 다른 엘리먼트들과 한 줄에 나란히 배치되고, block처럼 margin과 padding 속성을 활용하여 여백을 줄 수도 있다.

• 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따른다.

  • ex) input, select 등

🔗 참고 링크 & 도움이 되는 링크

• CSS의 display 속성

---

🚩 선택자

class & id

📝 쓰임새

• 태그에서 설정한 id나 class 속성에 따라 스타일을 지정한다.
  

✒️ 사용법

입력 & 설명

[class]
.클래스명 { 속성1: 속성값, 속성2: 속성값; }

[id]
#아이디명 { 속성1: 속성값, 속성2: 속성값; }

class

• 클래스 생성 시 해당 클래스명을 가진 태그에 스타일이 적용된다.
• 생성 후 여러 객체에 중복 적용이 가능하다.

id

• 아이디 생성 시 해당 아이디명을 가진 태그에 스타일이 적용된다.
• 여러 객체에 적용 가능하지만, 원칙적으로 한 개의 객체에만 적용해야 한다.