Web/Css29 css 활용5 플렉스(정렬) # html 영역 Apple Banana Cherry # css .container { background-color: royalblue; /* 배열을 가로로 해주는 역할 (수평 정렬) */ display: flex; /* 수평정렬을 했을때, 오른쪽 끝에 정렬한다는 의미 / center, start가 있다. */ justify-content: center; } .container .item { width: 100px; height: 100px; background-color: purple; /* 테투리 요소 */ border: 2px solid black; box-sizing: border-box; display: flex; justify-content: center; /* 텍스트 한 가운데 */ ali.. 2022. 9. 6. css 활용4 배치 지금부터 css 등, 익숙하지 않은것에 대해서 메모는 최대한 생략하고 완전히 이해 될때까지 반복 또 반복하면서, 이해가 잘 되기 시작했을때 부터 메모를 하고자 한다. # 배치 #html 영역 Apple Banana # css 영역 .container { width: 400px; height: 250px; margin: 50px; padding: 20px; background-color: orange; box-sizing: border-box; position: relative; } .container .item { width: 100px; height: 100px; background-color: royalblue; } .container .item:nth-child(1) { position: absol.. 2022. 9. 6. css 활용3 배경 # html Apple Banana # css /* http://whoawho.com/images/logo.png */ .container .item{ width: 200px; height: 100px; background-color: royalblue; # 이게 html에서 body에서 각 div를 떨어뜨려주는 기능을 한다. margin: 10px; background-image: url('http://whoawho.com/images/logo.png'); # 위에서 이미지로 쓰인것에 대한 백그라운드 사이즈 조정 background-size: 200px; # 이미지로 백그라운드를 쓰면, 기본적으로 반복되어서 나머지 부분도 채워진다. # 하지만 no-repeat를 통해서 이미지로 백그라운드가 쓰이고 남은.. 2022. 9. 5. css 활용2 글꼴, 문자 # html 영역 Apple Banana Cherry # css영역 .container .item { color: yellowgreen; border: 2px solid black; # 위에를 기준으로 설정된 2만큼 글자가 아래로 내려온다. line-height: 2; font-size: 24px; font-style: italic; # 글씨를 정 중앙으로 맞춰준다. text-align: center; } .container .item:nth-child(2) { font-weight: bold; text-decoration: underline; } 2022. 9. 5. 이전 1 ··· 3 4 5 6 7 8 다음