※여기서 각 div의 기본 속성은 display block (CSS) 이다. 자세한건 CSS 설명참고
● 태그의 속성
src는 소스의 약자
CSS
CSS는 HTML로 만들어진 모든 콘텐츠에 레이아웃과 디자인 요소를 정의할 수 있다.
위 사진이 CSS예시로 잘 표현된 듯 하다. HTML이 철근이라면 CSS는 시멘트,채색,내부가구배치 등(?) 으로 볼수있다.
● display:block
dispaly속성이 block으로 지정된 elements 는 전후 줄바꿈이 들어가 다른 elements들을 다음줄로 밀어내고 혼자 차지하는 특징을 가지고있다. 주로 <div>, <p>, <ul>, <li>, <h1>~<h6> 태그 등에 사용한다.
display 속성은 block이 기본적으로 지정되어있다. ↓확인해보면 설정하지않은 display가 block속성으로 입력되어있다.
해당 속성을 깨부수기위해 옆에 차례대로 elements를 나열 하고싶으면 inline 속성을 사용하면 되는데 해당내용은 나중에..
● margin
width: 내용(content)의 너비를 설정한다. heigth: 내용(content)의 높이를 설정한다. margin: 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. (바깥여백) border: 내용(content(1652x5447)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정한다. padding:내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다. (안쪽여백)
- width (너비), heigth (높이) width 속성의 기본 설정값은 auto이며 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정해준다. {단위: %, em, px, cm, mm, inch 등}