본문 바로가기
반응형

■ 컴퓨터/HTML | CSS2

HTML에서 margin, padding 상하좌우 설정법 HTML에서 margin, padding 상하좌우 설정하는 여러 가지 방법 아래 그림에서 보이듯이 HTML에서 margin은 테두리(box)바깥쪽의 여백을 말하고, padding은 테두리 안쪽의 여백을 말합니다. 여기서 테두리는 border로 되어있는 부분이고 div를 써서 box를 그릴 수 있습니다. 코드 설명 margin과 padding에서 설정하는 방법은 동일합니다. 여기서는 padding으로 설명드리겠습니다. 예를 들여 margin의 경우는 아래 코드 대신에 margin-top, margin-bottom, margin-left, margin-right를 쓰면 됩니다. 아래의 코드는 모드 같은 내용입니다. .pd1{ padding-top: 1em; padding-bottom: 1em; padding.. ■ 컴퓨터/HTML | CSS - 2022. 6. 23. 22:54
div로 박스(box)만들기 [01] 전자책에서 많이 사용되는 box 만들기 [01] CSS에 내용입력 후 HTML에서 구현 CSS에서 만들고 싶은 박스에 대한 정보를 div에 설정 후 HTML에서 입력해주면 됩니다. [css] div.box01 { border: 1px solid #000000; padding: 0.5em; } * border는 선을 의미하고 1px는 선의 두께 solid는 실선, #000000은 검정색으로 선의 색을 의미합니다. pddding은 만들어진 테두리 안에 텍스트 입력시 내부 여백을 의미합니다. 아래 미리보기를 보면 텍스트 위, 아래, 옆으로 0.5em의 여백이 들어가 있습니다. padding을 설정하지 않으면 글자 주변으로 테두리가 타이트하게 붙고 padding의 숫자를 높게 넣으면 테두리 안의 여백이 더 커지.. ■ 컴퓨터/HTML | CSS - 2022. 6. 15. 22:49
반응형