inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 시작은 프리캠프

싸이월드 만들기 2탄

싸이월드 2탄 home.css 질문

해결된 질문

328

지 민

작성한 질문수 20

0

 csshome 질문.png마지막 homework 문제에서 저는 box라고 지정했는데 저 margin-top부분을 padding으로 하면 적용이 안되던데 padding은 상위 태그부분에만 작용하는 건가요?

HTML/CSS javascript

답변 2

0

노원두

안녕하세요! 지민님!

어떠한 박스가 있을 때, margin은 박스의 바깥 영역을 늘림으로써 박스의 위치를 옮길 수 있고,
padding은 박스의 안쪽 영역을 늘림으로써 박스 안의 내용물의 위치를 옮길 수 있어요!

imageimage

따라서, "박스를 옮길래?"(margin), "박스안의 내용물을 옮길래?"(padding) 의 차이로 구분하시면 쉽게 해결하실 수 있답니다!

현재, 지민님의 상황에서는 박스를 옮기는 것이 아닌, 박스 영역을 푸터로 하였을 때, 푸터안에 들어가는 내용물을 옮기는 상황으로 가정하신다면, padding으로 사용하실 수 있을 것 같아요!
반대로 푸터 자체를 아래쪽으로 내리길 원하신다면, margin을 사용하시면 되겠죠?!^^
(쉽게 연습하는 방법은 해당 box에 background-color: yellow를 주고 이 상태에서 연습하시면 조금 더 이해가 빠르실 수 있답니다!)

 

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

padding은 해당 요소의 내부 여백을 설정하는 속성으로, 상위 태그부터 하위 태그까지 모두 적용됩니다. 따라서 margin-top을 padding으로 변경하면 원하는 결과가 나오지 않을 수 있습니다.

margin-top은 해당 요소의 위쪽 여백을 설정하는 속성이고, box라고 지정한 요소의 margin-top을 수정하고 싶다면, margin-top 속성을 사용하시는 것이 좋습니다.

만약 여러 요소의 상단 여백을 동시에 수정하고자 한다면, 해당 요소들을 공통의 상위 태그로 감싸고, 그 상위 태그에 padding을 설정하는 방법을 고려해보실 수도 있습니다.

더 자세한 내용은 실제 코드나 구체적인 문제 내용을 보고 알려드릴 수 있으니, 싸이월드 2탄 강의 내용을 보시고 문제가 발생하는 부분을 더 상세히 설명해주시면 도움을 드리겠습니다. 감사합니다.

싸이월드3

0

92

2

싸이월드2 관련 질문 드립니

0

104

3

과제 모범답안 유무

0

104

2

과제 연습 질문

0

82

2

<style> 에 *와 div 차이

0

92

2

과제 profile 부분 질문

0

121

2

과제 Profile 부분 질문

0

92

2

left_body_header의 자식border-top인데

0

90

2

정렬 연습중인데 왜 여성과 남성 칸이 가로로 배열 안되는지 모르겠습니다.

0

133

1

태그 궁금한 점

0

172

2

HTML 회원가입

0

210

2

문법관련 질문입니다

0

269

2

윈도우 누른치로 마침표 눌렀는데 이모지가 안되는데용.?./.

0

668

2

26분50초에 세로줄 어떻게 해요 ..? ㅎㅎㅎ

0

272

2

피그마에서 css 코드가 안보여요..

1

3264

2

주석기능을 하고 싶은데 컨트롤+느낌표가 안됩니다 ㅠㅠ

0

336

2

언어 설정 -> 한글

0

302

1

2024년 html

0

237

1

피그마 유료화

0

1678

1

Fiama 링크 찾기

0

249

2

Figma는 어디에 있나요?

0

254

1

안녕하세요. 제공되는 노션 학습자료는 어디서 확인가능한가요?

0

362

2

git 질문입니다

0

220

1

아무리 찾아봐도 피그마 링크가 보이질 않습니다.

0

316

1