웹 (2) 썸네일형 리스트형 css : margin, padding 개념과 한줄쓰기 기준은 content와 border이다. 글자면 글자, 그림이면 그림이 content가 되고, 그걸 둘러싼 테두리를 border라고 한다. 테두리와 콘텐츠 간에 거리를 두고싶다면 padding을 조절하고, 해당컨텐츠가 아닌 다른 컨텐츠와의 거리를 조절하고싶으면 margin을 조절한다. - Margin , Padding 한줄에 쓰기 ex_ padding : 10px 20px 30px 40px; 이라고 설정되어있으면 순서대로 위 오른쪽 아래 왼쪽이다. (시계방향) padding : 10px 20px; 와 같이 2개만 적혀있다면 상하가 10px로 같고 좌우가 20px로 같음을 의미한다. padding : 10px 5px 20px; 과 같이 3개만 적혀있으면, 위가 10px 좌우 5px, 아래를 20px로 설정.. css display : flex, inline, block css에서 element를 배치하는 방법에는 block, inline, flex..등이 있다. 기본 속성을 알아보자 display : flex - 이해한 바로는, inline-block과 유사하다. 대신 container 라는 개념이 존재하고, 이 컨테이너에 display: flex를 준다면, 컨테이너 안의 모든 컨텐츠들은 inline으로 배치되고, 해당 부보 컨테이너는 block으로 배치가되는 개념인것같다. ( 자유롭게 배치할 수 있음 - 이부분에 대해서는 실습을 통해 더 알아봐야할것같다.) - 또, 해당 부모에 flex를 설정하면 바로 child에만 이 속성이 적용되고 chlid-chlid에게는 적용되지 않는다!! display : inline - 줄바꿈 없이 해당 컨텐츠 만큼의 공간만 잡아먹는다. .. 이전 1 다음
