1. CSS(width와 height) - 너비와 높이

안녕하세요~

이 글이 CSS 게시판에 첫 글이 되겠네요.

일단은 시작하기 전에 제가 이 곳에 모든 CSS의 기능들을 소개하지 못할 꺼 같아서 링크를 걸어 드릴께요!

https://www.w3schools.com/css/default.asp

이곳에 들어가면 모든 CSS 기능들이 있습니다.

그럼 기본적으로 CSS에서 많이 사용되는 기능들 위주로 설명하겠습니다!!

가장 많이 사용되는게 너비와 높이 정도겠죠??

바로 width와 height 입니다.

사용법은 예를 들자면 div tag가 있다하면 

div {
    width: 100px;
    height: 100px;
}

이런 식으로 사용할 수 있게 됩니다.

px 는 픽셀 값으로 그 값을 고정값으로 주기 위해 사용합니다.

div {
    width: 100%;
    height: 100%;
}

이런 식으로 % 값으로 사용이 가능한데요.

width 값의 경우에는 %값으로 지정해서 너비값을 얼마 든지 조정 할 수 있지만

height 의 경우에는 부모 tag의 값이 px값으로 고정되어 있지 않다면 아무리 %값을 주신다 해도

적용된 결과를 보실 수 없습니다.

또한 지금 작성 된 div는 전체 div에 영향을 미치게 되므로 Class나 ID 값으로 적용해 주는 걸 추천합니다.

Class 값이 적용 되 있는 예를 한번 볼까요??

.div {
    width: 100%;
    height: 100px;
}

이런식으로 div 앞에 . 만 붙여 주시면 그 클래스를 가지고 있는 개체한테만 

스타일이 적용되게 됩니다.

이런식으로 Id 값에도 적용시킬 수 있게 되는데요.

예를 보겠습니다.

#div {
    width: 100%;
    height: 100px;
}

이렇게 div 앞에 #을 붙여주시면 됩니다.

이런식으로 div .div #div 이렇게 적용 시킬 수 있는 방법을 알아 보았는데요.

다들 이해가 가시나요??

이해가 가지 않거나 궁금하신 점은 댓글을 통해 남겨주세요!!

감사합니다!