padding2 [CSS] 패딩과 마진 (padding, margin 속성을 통한 레이아웃 구성) 패딩과 마진(매우 중요) border 기준으로 안쪽 여백은 padding 바깥 여백은 margin이다. 개발자 도구로 마우스를 올렸을 때 초록과 주황으로 구분할 수 있다. F12로 접속 후 Element에서 영역 포인터 아이콘 선택 혹은 Ctrl + Shift + C로 개발자 도구의 마우스 포인터를 사용할 수 있다. 스타일 시트에서 p 태그에 패딩을 넣어보겠다. p { border: 1px solid #777; width: 300px; height: 100px; padding: 10px; /* 전부 */ padding: 10px 20px; /* 위아래, 좌우 */ padding: 10px 20px 30px 40px; /* 12시부터 시계방향 */ } padding right, left 등을 사용하여 하나.. 2022. 9. 26. [CSS] float를 활용한 쇼핑몰 물건 판매 예제 float을 활용한 물건 판매 예제 div 큰 블럭 한 개 하위 width 부모 영역의 50%씩 두 개 블럭 생성 왼쪽은 사진 영역, 오른쪽 영역은 내용 영역. 오른쪽 내용 영역은 다시 세 개의 블럭으로 나눠 정보와 버튼 등을 기입한다. 다양한 박스를 어떻게 선언하고 배치시키는지 이해하는 것이 중요하다. 마치 안드로이드 스튜디오를 할 때 다중 linear layout을 수직(vertical), 수평(horizon) 배치하는 것과 비슷하다. 태그의 열고 닫힘과 들여쓰기 정도를 잘 확인하며 하도록 한다. 아래 코드를 확인하여 위 그림의 1, 2, 3, 4, 5가 어떤 클래스와 아이디에 매치되는지 이해한다. 과제2 제목 : 돌고래 급처분 합니다 내용 : 안녕하세요, 돌고래입니다. 저는 새로운 주인을 찾고있어요.. 2022. 9. 19. 이전 1 다음
