html을 꾸며주기 위해서 css를 사용하는 것이 가장 기초적이지만, html 파일 내부에서도 직접적으로 스타일을 설정할 수 있다.
html 코드 내에서 스타일을 지정해주는 방법으로는 다음과 같은 방법이 있다.
1. html의 head 부분에 <style>태그를 사용하여 필요한 디자인 적용
2. html의 각 태그 내부에 style 태그 적용 : <div class="~~" style="">
3. html의 각 태그 내부의 class를 통해 적용
3번째 방식에서 사용하는 방식의 마진&패딩 활용에 대해서 작성해보겠다.
Margin과 Padding
m : margin - 요소의 외부 여백
p: padding - 요소의 내부 여백
Margin과 Padding의 방향
top, bottom, left , right, x , y
t : top - 상
b : bottom - 하
s : left - 좌
e : right - 우
x : x축 - left & right
y : y축 - top & bottom
Margin과 Padding의 크기
0 : 0
1 : .25rem ( font-size가 16px이면, 4px) 크기
2 : .5rem ( font-size가 16px이면, 8px) 크기
3 : 1rem ( font-size가 16px이면, 16px) 크기
4 : 1.5rem ( font-size가 16px이면, 24px) 크기
5 : 3rem ( font-size가 16px이면, 48px) 크기
auto : 자동으로 조절
원하는만큼 설정을 적용해주고 싶으면 각 태그 앞의 class에 위 margin과 padding을 조합해서 입력하면 자동 적용된다.