img, css style, padding/margin, 태그모음

img : 이미지 불러오기

<img src="주소" alt="이름">

-> alt : 주소가 잘못되었을 때 확인 (_쓰기)
display: inline-block

---

css style 종류

• inline style : 인라인 css

<nav style="height:50px;"></nav>

• internal style : 내부 css (html 자체에 입력)

<style>
	nav { 
    	height: 50px;;
        }
</style>

• external style : 외부 css (html에서 가져오기)

우선순위 : 인라인 > 내부 > 외부

---

데모 텍스트 & 이미지 필요할 때

lorem ipsum : 데모 텍스트

lorem picsum : 데모 이미지

---

padding, margin (CSS)

padding : 안쪽 여백
margin : 바깥쪽 여백

padding-top : 위 여백
padding-left: 왼쪽 여백
padding-right: 오른쪽 여백
padding-bottom: 아래 여백

4개 한꺼번에 작성
-> ding: 상, 우, 하, 좌 순서 (시계방향)

ex) 상하: 30px, 좌우: 50px
-> padding: 30px 50px;

위 : 10px, 좌우 : 30px, 아래: 50px
-> padding: 10px 30px 50px

padding: 30px;
-> 상하좌우 30px;

vertical-align : 텍스트 세로 정렬
(top, middle, bottom을 주로 씀)

---

inline-block vs inline

inline : width, height, margin, padding 적용 X ( a태크 )
img는 기본적으로 inline-block

---

태그 정리

div : 기본적으로 많이 쓰는 태그 (의미없음)
a : 다른 페이지, 사이트, 내부 섹션 등으로 이동하는 링크 (인라인)
span : 단어, 진짜 짧은 문장도 가능 (의미없음)
strong : 중요한 텍스트를 강조 (인라인, 의미있는 강조)
p : 문장, 문단을 나타내는 텍스트 블록
nav : 메뉴 감싸는 내비게이션 영역
section : 묶음, 섹션을 구분
article : 독립된 컨텐츠 하나