inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

싸이월드 만들기 2탄

싸이월드 2탄 home.css 질문

해결된 질문

325

지 민

작성한 질문수 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

78

2

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

0

93

3

과제 모범답안 유무

0

89

2

과제 연습 질문

0

72

2

<style> 에 *와 div 차이

0

87

2

과제 profile 부분 질문

0

114

2

과제 Profile 부분 질문

0

86

2

left_body_header의 자식border-top인데

0

80

2

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

0

127

1

태그 궁금한 점

0

162

2

HTML 회원가입

0

193

2

문법관련 질문입니다

0

253

2

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

0

650

2

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

0

251

2

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

1

3219

2

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

0

325

2

언어 설정 -> 한글

0

289

1

2024년 html

0

226

1

피그마 유료화

0

1670

1

Fiama 링크 찾기

0

240

2

Figma는 어디에 있나요?

0

251

1

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

0

357

2

git 질문입니다

0

216

1

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

0

312

1