글자와 상자 & 전역속성

글자와 상자

#1 inline 요소

- 글자를 만들기 위한 요소들

• img, a, span, br, label 등
• 높이/너비 다 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 따라서 가로세로(width/height)지정할 수 없다.
• inline요소 안에는 inline요소만 넣을 수 있다.
• 위아래 여백 사용할 수 없다.
• 좌우 여백은 사용할 수 있다.

✅ inline: 가로 너비가 최대한 줄어들려고 한다.

참고 💬 <a href="https://www.naver.com" target="_blank">Google</a> 

      → target에 _blank 적으면: 클릭했을 시 새 탭에 열림

#2 block 요소

- 상자(레이아웃)를 만들기 위한 요소들

• div, h, p, ul, li 등
• 부모 요소의 크기만큼 자동으로 늘어난다.
• 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 가로세로 다 지정할 수 있다.
• 여백도 다 사용할 수 있다.
• block요소 안에 block/inline요소 다 넣을 수 있다.

✅ block: 가로 너비가 최대한 늘어나려고 한다.

참고 💬 input: inline-block요소

 

 

전역속성

• title="설명" → 설명을 지정
• style="스타일" → 요소에 적용할 css를 지정
• class="이름" → 요소를 지칭하는 중복 가능한 이름
• id="이름" → 요소를 지칭하는 중복 불가능한(고유한) 이름
• data-이름="데이터" → 요소에 데이터를 지정