지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
패딩에 대해서
알려드리면서
id에 대해서도
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (패딩에 대해) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 마진에 대해서 작성하는 방법부터 개념까지 조금 더 자세히 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시
tm-csc.tistory.com
바로 이어서 가겠습니다.
#first {
background-color: balck;
}
이렇게 적고 첫 번째
div상자의 색상을
검은색으로 변경해주었는데요.
#first {
background-color: black;
}
#second {
background-color: blue;
}
#third {
background-color: red;
}
#fourth {
background-color: coral;
}
이렇게 적어주시거나
복사하셔도 되고요.
첫 번째를 검정으로
두 번째는 파랑으로
세 번째는 빨강으로
네 번째는 주황으로
색상을 지정해준 뒤
저장하고 크롬으로
확인을 해보면
이렇게 코랄색만
보이게 될 텐데요.
이유는 div 높이나
너비의 값을 변경하지 않고
전부 크기가 같기 때문에
마지막 색상인 주황색만이
나타나게 된 거죠.
그럼 크기를 바꿔야겠죠.
하지만 그전에
패딩을 값을 먼저
div 박스에 줘볼까요?
바로 이렇게 모든 div값에
패딩 값을 10px 주게 되면
이렇게 div박스의 크기는
유지하면서도 패딩 값도
유지해야 하니까
겹쳐있는 모습으로 보이게 되죠.
그렇다면 크기까지
조절해보겠습니다.
div {
padding: 10px;
}
#first {
background-color: black;
height: 150px;
width: 150px;
}
#second {
background-color: blue;
height: 100px;
width: 100px;
}
#third {
background-color: red;
height: 50px;
width: 50px;
}
#fourth {
background-color: coral;
height: 25px;
width: 25px;
}
이렇게 박스의 크기는
다 다르지만 패딩 값은
동일하게 변경하였는데요.
이렇게 적고 실행하게 되면
이렇게 박스 안의
박스 안의 박스 안의
박스 모습을
제대로 볼 수 있으며
각각의 박스에 따로
색상과 크기까지
조절이 가능하다는 것을
알 수 있습니다.
또한 패딩 값을 모든 방향에
주었지만 가장 먼저
위와 좌측이 적용된다는 것도
알 수 있죠.
이는 나중에 수많은 태그를
사용할 때 하나의 태그만을
원하는 색상과 크기 나아가서
위치까지 지정할 수 있도록
만들어주는 역할을 한다는 것을
잊지 말아야 합니다.
그리고 박스 안의 박스를
넣는 것처럼 수많은 태그 속에도
다른 태그를 넣을 수 있다는 것도요.
여기까지 패딩에 관하여
궁금하신 점은 댓글에 남겨주시고
공감과 구독도 부탁드립니다.
