Web/Css31 bootstrap 기초1 기본 일단 강의 1개로는 bootstrap이랑 css가 도대체 뭐가 다른건지 모르겠다. # html 영역 Click! Hello world # css 영역 .container { width: 300px; /* 화면 가운데 정렬 / 정가운데는 아님 */ margin: auto; background-color: orange; } .btn { display: inline-block; padding: 10px; background-color: royalblue; /* 글씨 색상 */ color: white; /* 박스 라운드 */ border-radius: 6px; /* 버튼 기본요소 같다. */ cursor: pointer; } 2022. 9. 6. css 활용6 전환, 변환 # html 영역 Apple Banana Cherry # css 영역 .container .item { width: 100px; height: 100px; background-color: royalblue; margin: 30px; padding: 10px; /* 테두리를 둥글게 해주는 기능 */ border-radius: 10px; /* 전환 효과 */ /* 1초 */ transition: 1s; } /* 마우스 오버 했을때 기능 활성화 hover */ .container .item:nth-child(1):hover { width: 200px; background-color: purple; } .container .item:nth-child(2) { /* 변환 효과 */ /* rotate - 45도 *.. 2022. 9. 6. 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. 이전 1 ··· 3 4 5 6 7 8 다음