Web | Front-end/HTML+CSS+JS2 CSS] margin과 padding의 차이 문제 상황아래 폼에서 매물 정보 글자를 조금 더 오른쪽과 아래로 배치하고 싶다.이때 margin과 padding에 대한 이해가 필요하다. margin/padding/border/height/width개발자 도구(F12)를 키면 아래 이미지처럼 margin, padding, border, content 영역이 나온다. 자세한 설명은 아래를 참고하면 된다. margin(주황) : 바깥쪽을 기준으로 떨어뜨린다. 주변 요소와 거리를 두기 위한 영역이다. 위 그림에서 margin을 주면 테두리를 포함한 매물 전체 폼이 이동하게 된다. (바깥쪽에서 움직이는 애 - 보통 container 움직일 때 사용)h1 { margin-top:30px; margin-bottom: 20px; margin-left:150px.. 2024. 10. 3. 10분만에 적용하는 CSS Flex/Container 기본 개념 문제 상황화면 크기를 조금만 줄여도 아래 이미지처럼 웹 페이지가 깨져 보인다. 목표화면 크기에 상관 없이 웹 페이지가 깨지지 않도록 하고 싶다. -> CSS Flex 를 이용한다! CSS Flex /Container기초 이론아래와 같은 코드를 본 적이 있는가? 하이1 하이2 하이3 컨테이너를 하나 만든 것을 flex container 라고 부르고, 컨테이너 안의 요소들을 flex item 이라고 부른다. 조금 더 쉽게 이해하기 위해서는 아래 그림을 살펴보자.어떤 요소들이 컨테이너에 담겨져 있는데, 컨테이너 박스 자체를 flex container 라고 부르고 컨테이너 안의 요소들을 flex item 이라고 부르는 것이다. CSS Container 개념의 핵심은 컨테이너 크기가 늘어나거나 줄어들.. 2024. 9. 29. 이전 1 다음
