지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
마진에 대해서
작성하는 방법부터
개념까지 조금 더
자세히 알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (마진, 보더, 패딩에 대해) - 2편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 브라우저는 마진, 보더, 패딩에 대해 대략적으로 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은
tm-csc.tistory.com
이번 글에서는 패딩에
대해 조금 더 자세히
알려드리려고 하는데요.
패딩은 마진과 반대라고
생각하시면 편합니다.
마진은 박스의 경계로부터
바깥에 있는 공간을
얘기하는데요
패딩은 박스의 경계로부터
안쪽에 있는 공간이기
때문이죠.
그럼 VSC를 실행하고
바로 보여드릴게요.
먼저 이렇게
저번에 작성했던
마진의 값이 있다면
다 지워주세요.
그리고 패딩 값을
넣어주게 될 텐데요.
이렇게 바디에
패딩 값을
padding: 20px;
이렇게 적어주고
저장하고 실행하면
이렇게 노란색이랑
딱 붙어있던 초록색
div 박스가 모든 사면에서
20px 만큼 떨어지게
된 것을 확인할 수 있죠.
당연히 마진에서
쓰는 방식처럼
padding: 20px 10px;
이라고 적게 되면
상하로 20px
좌우로 10px
이라는 말이 됩니다.
padding:20px 5px 10px 15px;
이렇게 적게 되면
위 20px 우 5px,
아래 10px 좌 15x
만큼 떨어지게 됩니다.
(시계방향입니다.)
한번 확인해보기 위해
위의 값을 그대로
적고 크롬에서 확인하면
오른쪽에는 다른 박스가
없어서 확인하기 힘들지만
다른 곳의 패딩 값들은
다 다르게 표현된 것을
확인할 수 있습니다.
그럼 이번에는
이렇게 해보겠습니다.
박스 안에 박스 안에
박스 안에 박스가
있도록 div태그를
만들어줄게요.
그리고 바로 실행하게 되면
당연히 모든 div박스에
같은 스타일이 적용될 테니
구분할 수가 없겠죠.
그래서 우리는 각각의
div에다 고유의 id를 부여해서
구분해보겠습니다.
바로 이렇게 말이죠.
그럼 각각의 div마다
고유의 id가 생성됐으니
구분해서 색상을
지정해 줄 수 있겠죠?
그리고 이렇게
div값에 있던
배경 값을 지워주고
#first로 아이디를 불러주고
배경색을 지정해줍니다.
CSS에서 아이디를
부르는 방법은
#과 해당 ID를 쳐서
부를 수 있는데요.
div박스만 되는 게 아니라
모든 ID는 하나의 고유값이기에
다른 태그에도 ID를 적는다면
항상 아이디를 불러 해당 태그의
스타일을 변경하려면
#아이디 { }
이렇게 적용해주시면 됩니다.
그럼 이번 글은 여기까지
알려드리고 다음 글에 이어서
알려드리도록 하겠습니다.
궁금하신 점은 댓글에 남겨주시고
공감과 구독도 부탁드립니다.
