HTML & CSS21 nth-child HTML sectioln>div*70으로 section태그 안에 div태그70개를 만들어 줍니다. CSS 1. section태그를 text-align을 center로 맞추어 가운데로 정렬시켜 줍니다. 2. div태그를 넓이 13%, 높이 100px, 배경은 빨간색, display를 inline-block으로 지정해주어 글자화 시켜줍니다. 3. div:nth-child(7n+2)의 배경색을 orange로 지정해주어 한줄에 7개있는 블럭중 두번째블럭들을 orange컬러로 바꿔줍니다. --> nth-child : n번째 자식을 선택 4. div:nth-child(7n+3), div:nth-child(7n+4), div:nth-child(7n+5), div:nth-child(7n+6), div:nth-child.. 2020. 4. 18. padding HTML div>section>img로 6개의 사진의 주소를 복사하여 img안에 붙여넣어주었다. CSS 1. div의 text-align을 center로 맞춰 가운데로 정렬시킨다. 2. div>section의 display를 inline-block로 맞추어 글자화 시켜준다. 3. padding을 30px로 하여 박스의 안쪽 여백을 넓혀준다. --> padding : 박스의 안쪽 여백 padding-top:30px; padding-left:30px; = padding:30px; padding-right:30px; padding-bottom:30px; 4. div > section > img 의 width를 200px로 맞추어 사진의 크기를 조정해준다. 결과 2020. 4. 15. margin HTML div>section>img로 6개의 사진의 주소를 복사하여 img안에 붙여넣어주었다. CSS 1. CSS로 text-align을 center로 맞춰주어 사진을 가운데로 모아준다. 2. div안의 img를 width : 100px;로 맞춰주어 사진들을 동일한 크기로 만들어준다. 3. margin을 이용하여 각각의 이미지를 25px만큼 간격을 준다. --> margin : 박스의 바깥쪽 여백 margin-top:25px; margin-left:25px; = margin: 25px; margin-right:25px; margin-bottom:25px; 결과 2020. 4. 15. display 속성 2020. 4. 14. 이전 1 2 3 4 5 6 다음
