본문 바로가기

CSS8

모바일 CSS 사용코드 아래코드 안에 CSS를 넣으면 모바일에 최적화된 width가 640보다 작을 때만 적용됨 (안에 넣기) @media screen and (max-width: 640px) { 여기에 CSS 입력 } 2022. 5. 19.
div 태그로 img넣기_ background-image HTML 코드 스파르타 본진 서울 강남구 논현로 425 501호 스파르타의 첫번째 단독 사무실. 와 우리 사무실이 생긴다니! 부동산도 보러 다니고, 인테리어도 우리가 하고. 의자 조립하느라 다들 손이 빨갛게 됐다. 그래도 좋았던 날. 이 날 점심으로 짜장면을 먹었던 것 같은데.. CSS 코드 .img { width: 450px; height: 300px; background-image: url('image.jpg'); background-position: center; background-size: cover; border-radius: 24px; } *** background-image: url(이미지 가져올 곳'); background-position: center; background-size: c.. 2022. 5. 19.
버튼_테두리+hover+밑줄없애기 ▶텍스트 가운데로 / 밑줄 없애기 / 테두리만들기(모서리 동그랗게) .btn { width: 300px; height: 40px; border: 2px solid #e8344e; text-align: center; line-height: 40px; text-decoration: none; color:#e8344e; font-weight: bold; border-radius: 150px; } ▶Hover .btn:hover { color: white; background-color: #e8344e; } 2022. 5. 19.
div 구조잡기_가운데 정렬 1. 구역확인 2. 구조잡기 3. 세밀하게 조정 .box { width: 1000px; display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 40px auto 0px auto; } .map { width: 500px; height: 500px; background-color: red; margin-right: 30px; } .story { width: 450px; height: 500px; background-color: blue; } ▶위아래로 가운데 정렬 display: flex; flex-direction: column; align-items: center; justify-content: ce.. 2022. 5. 19.