Html 과 CSS 태그 및 속성 - 4

margin : 바깥쪽 (외부) 여백을 나타낸다. 픽셀을 4번입력할수있는데 

예문은 margin: 30px; = 상하좌우 모두 30px로 조정한다. 

margin: 20px 30px; = 상하는 20px로 좌우는30px로 조정한다. 

margin: 30px 10px 20px; = 상은 30px로 좌우는 10px로 하는20px로 조정한다.

margin: 10px 20px 30px 40px; = 상은 10px , 우는 20px, 하는30px 좌는40px로 조정한다.

 

padding: 안쪽 (내부) 여백을 나타낸다. 사용법은 margin과 똑같다. 

 

그림이 개판이지만 margin 과 padding 순서이다.

마찬가지로 그림이 개판이지만 padding는 내부여백 을 margin은 외부여백을 조정할수있다.

margin: 0 auto; 는 중앙정렬을 뜻한다.

 

color : 뜻대로 색상을 의미한다. 색상을 영어로 적어도되고 16진수 코드로적어도된다.

사용법은 color: green; = 초록색으로 표현하라. (영어) , color: #000; = 검정색으로 표현하라 (16진수 코드)

 

box-sizing : 박스의 크기를 표현할수있다.  보통 스타일태그에 표현을한다.

사용법은 box-sizing: border-box; 로 표현한다

 

border-box : 박스 외부에 색상을 표현할수있다. box-sizing: border-box; 가 선언된 후에 사용할수있다.

사용법은 border: 5px solid green; = 초록색 5px을 박스 외부에 표현하라 이다. 아마 실행해보면 쉽게 이해할수 있을것이다.

 

font : 말그대로 폰트이다. 속성은 style = 글꼴 스타일 // weight = 두께 // size = 크기 // family = 글꼴 을 사용한다.

사용법은 font-size: 15px; = 글자를 15px로 바꿔라 // font-weight: bold; 글자를 굵게 해라 

 

background-color : 백그라운드 색상을 뜻한다. 웹 문서를 만들때 초반에 뼈대로 사용한다. 

사용법은 background-color: green; = 백그라운드 색상을 초록색으로 표현하라. 사용해보면 알수있다.

 

 float : 정렬할수있다. 이미지와 텍스트 둘다 가능하다.

사용법은 float: left; = 왼쪽정렬 // float: right; = 오른쪽 정렬

 

text-align : 텍스트만 정렬할수있다. 

사용법은 text-align: left; = 왼쪽정렬 // text-align: right; = 오른쪽 정렬 // text-align: center; 중앙정렬 이다.

 

//최대한 내가 배운 것을 기억나는 대로 적었으며 또한 인터넷을 찾아가며 작성한 것이므로 틀린 내용이 있을 수도 있다.
만약 틀린 내용이 있다면 댓글로 남겨주시면 굉장히 고마울 것 같다.//