이번 시간에는 html의 가장 기본인 높이와 너비, 여백 설정하는 방법에 대해 다뤄볼 것이다.
너무 쉬운 속성이라 가장 처음 포스팅했어야 했는데 어쩌다 보니 순서가 꼬였다..?😥
하지만!
지금부터라도 이 속성들에 대해 배운다면
CSS를 이용하여 HTML 요소의 크기와 여백을 마음대로 설정할 수 있다.
그럼 지금부터 스타트~~
1. width와 hight 속성
: HTML의 너비와 높이를 설정하는 속성이다.
즉, 가로와 세로의 길이를 설정하는 것인데
이 속성은 기본값으로 auto을 가져 자동으로 너비와 높이를 설정한다.
사용법은
요소 { width : 너비값; height: 높이값;}
여기서 너비값, 높이값의 단위에는 CSS에서 크기 단위로 많이 쓰이는
%, em, px 단위를 쓴다.
그중 가장 많이 쓰이는 단위는 px 단위이다.
앞선 포스팅에서 font size를 설정할 때도 이 단위를 썼었다.
❗참고❗
CSS에서 사용하는 크기의 단위
1️⃣ px : 픽셀 단위의 값으로 절대적인 수치를 가진다. 일반웹에서 가장 흔히 사용한다.
2️⃣ % : 부모 요소와의 상대적 크기를 나타낸다. 부모 요소가 없을 경우 100%의 기본 크기에 대한 상대적인 크기를 설정한다.
3️⃣ em : 부모 요소와의 상대적 크기를 나타낸다. 부모 요소가 없을 경우 1em의 기본 크기에 대한 상대적인 크기를 설정한다.
(기본 브라우저 = 16px = 1em = 100%)
❗참고❗
이 속성들은 padding, margin, border값을 포함하지 않는다.
예를 들어 width : 100px , height: 100px 인 정사각형에 padding이 10px을 가진다면
전체 HTML의 길이는 width : 120px, height : 120px 이 된다.
지금 이해하기는 어렵고 padding과 margin을 다루고 배우도록 하자.
❗참고❗
inline 태그는 block 태그와 달리
inline 태그는 요소의 내용만큼만 크기를 차지하기 때문에
width와 height를 설정할 수 없다.
예제) width의 여러 속성값을 적용해 보기
참고로 width와 height는 둘 중 한 가지만 설정을 하면 자동으로 비율에 맞게 크기가 설정이 된다.
1️⃣ HTML 코드
<body>
<h1>The width Property</h1>
<h2>width: auto (default)</h2>
<div class="a">안녕하세요 지금은 CSS의 width와 height를 배우고 있습니다. 다음으로는 margin와 padding 속성을 다룰 것 입니다.</div>
<h2>width: 150px</h2>
<div class="b">안녕하세요 지금은 CSS의 width와 height를 배우고 있습니다. 다음으로는 margin와 padding 속성을 다룰 것 입니다.</div>
<h2>width: 50%</h2>
<div class="c">안녕하세요 지금은 CSS의 width와 height를 배우고 있습니다. 다음으로는 margin와 padding 속성을 다룰 것 입니다.</div>
</body>
2️⃣ CSS코드
div.a {
width: auto;
border: 1px solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width: 50%;
border: 1px solid black;
}
3️⃣ 결과
1- (1) min/max- width와 min/max-height
: width와 height는 HTML의 요소의 기본적인 너비와 높이뿐만 아니라
min과 max를 이용하여 최소/최대 너비와 높이를 설정할 수 있다.
이러한 설정은 웹페이지에서 브라우저가 크기가 줄어들었을 때
해당 요소의 크기를 min/max로 제한한다면
웹페이지를 유연하게 웹페이지를 만들 수 있다.
예를 들어 min 속성을 설정하였을 때 브라우저의 크기가 줄면 스크롤바가 생긴다.
하지만 max 속성을 설정하면 브라우저 줄어든 크기에 맞게
요소 또한 자동으로 줄어들게끔 할 수 있다.
사용법은
요소 { min-width : 크기; }
요소 { max-width : 크기; }
로 쓸 수 있다.
오늘은 CSS의 기본적인 너비와 높이를 설정하는
width와 height에 대해 배워보았다.
원래는 안쪽과 바깥쪽 여백을 나타내는 margin과 padding
그리고 테투리를 뜻하는 border 속성까지 다뤄볼 예정이었으나
생각보다 width와 height 속성을 다루는데 길어져서
다음 포스팅으로 넘기려고 한다.🐧🐧
포스팅을 할수록 HTML와 CSS에 대해
자료도 많이 찾고 다음 포스팅을 하면서
이전 포스팅했던 내용들에 대해 쉽게 복기할 수 있어
결론적으로 스스로 많이 공부할 수 있어서 너무 좋다.
이어서 이틀남은 연말이지만 2024년도 파이팅!!!
그럼 이만~
📚지난 포스팅 리뷰
1일 1 포스팅을 꿈꾸면서 시작했으나
연말은 1일 1포스팅이 쉽지 않다~~~
너무 바빴다.. 공부만 집중하고 싶은데 정말 그러기가 쉽지 않다
앞으로 매일 포스팅을 올리도록 하겠다!!
지난 시간에는 글자의 CSS를 적용하는 것에 대해 배웠다.
글자의 스타일적용 속성에는
font 속성과 text 속성으로 나뉜다.
font 스타일 속성
font-family : 글꼴 설정
font-style : 글꼴의 스타일로, 주로 기울기를 설정한다.
font-weight : 글자의 굵기 설정
font-size : 글자의 크기 설정이 있다.
text 스타일 속성
text-align : 텍스트의 수평 방향 정렬 설정이 있다.
text-decoration : 텍스트의 선 스타일을 설정한다.
그 외의 더 많은 스타일 속성들은 mdn을 참고하여 공부하도록 합시다!
'Study with Yedol > CSS' 카테고리의 다른 글
| CSS background 속성 (0) | 2024.01.03 |
|---|---|
| CSS padding 과 margin (0) | 2023.12.31 |
| CSS 글자 스타일 적용 (0) | 2023.12.26 |
| CSS 색상 변경 방법 (0) | 2023.12.23 |
| CSS문법 Combinators(결합자, 선택자) (0) | 2023.12.22 |
