728x90 반응형 개발3 CSS 기초(6) background-image 심화 CSS 기초(6) 오늘은 background-image 속성에 대해 더 자세히 배워보겠습니다. 저번 시간에 내용을 복습해보면 CSS에서는 background-image 속성을 '선택자{background-image: url(이미지 경로/ 이미지);}'로 작성하여 사용할 수 있습니다. background-image 속성을 사용하면 이미지의 크기와 지정한 배경의 크기가 맞지 않는 경우가 생기는데요. 이럴 경우에 사용할 수 있는 방법에 대해 알아보겠습니다. (1) 먼저 알려드릴 것은 이미지의 크기와 배경의 크기가 맞지 않을 경우 발생하는 현상인데요. 이때 사진에서 처럼 빈 공간을 채우기 위해 사진이 여러 장으로 나타나는 것을 볼 수 있습니다. 이럴 때는 배경의 크기를 이미지의 크기에 맞게 줄이거나 이미지의 연.. 2022. 7. 12. HTML, CSS, JS란? HTML, CSS, JS란? 오늘은 프론트앤드 개발에 가장 핵심이 되는 HTML, CSS, JS에 대한 이론에 대해 설명드리겠습니다. 일단 사람을 예시로 간단하게 HTML, CSS, JS에 대해 설명하자면 HTML은 뼈를 CSS는 살과 옷을 JS는 움직임을 담당한다고 아시면 좋을 것 같습니다. (1) HTML HTML은 Hypertext Markup Language의 약자로 Hypertext는 하이퍼링크를 생각하시면 편한데 하이퍼링크는 링크를 통해 상대방에게 내용을 전달해 주는 텍스트 문자인데 Hypertext도 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 의미합니다. 그리고 Markup Language는 마크업 언어로 마크업 언어는 태그를 사용하여 문자나 데이터를 연결해 주는 언어를 의미합니.. 2022. 7. 4. HTML 박스 모델이란?(margin, border, padding, content) HTML 박스 모델이란? 오늘은 HTML에서 박스 모델에 대해 작성해 보겠습니다. (코드 소스 에디터는 Visual Studio Code를 사용하였습니다.) HTML은 사진에서처럼 결과물을 봤을 때는 그냥 작성된 'Hello'만 보이는 것을 알 수 있습니다. 하지만 HTML에서는 보이지 않지만 박스 모델이 있습니다. 이것이 중요한 이유는 HTML을 작성하고 CSS를 이용하여 디자인을 했을 때 이 박스 모델이 엄청 중요하게 사용이 되기 때문에 꼭 알아두셔야 합니다! 박스 모델을 확인할 수 있는 방법은 크롬을 기준으로 윈도우는 F12, 맥은 Option+Command+i를 했을 때 나타는 개발자 모드를 통해 확인할 수 있습니다. 두 개의 칸에서 오른쪽에 '계산됨' 영역을 눌러서 확인해 보면 Margin, B.. 2022. 7. 1. 이전 1 다음 728x90 반응형
