루체

가장 많이 사용되는 background 속성에 관한 글입니다. 이 부분부터는 외워야 할 내용이 생기게 됩니다. 여태까지 내가 했던 방법은 html에 직접 이 방법이다. 이 글에서는 이 방법이 아니라 css를 통해서 이미지를 넣는 것을 해보겠습니다. 우선 background 이미지를 넣어주고 싶은 곳에 background-image : url(""); 이라는 것을 써줍시다. 이 background-image와 url는 햄버거 세트에서 햄버거와 콜라처럼 떨어질 수가 없는 조합입니다. background만 쳤을 때 origin , color 등등 여러가지가 나오던데 이 부분은 나중에 알아보겠습니다. 이렇게 작성을 하고 적용을 해보니까 이미지 크기가 너무커서 배경이 잘 안보인다.. 그래서 크기는 size니까 s..

float는 이미지나 div 같은 개체를 정렬시켜줄 때 사용을 합니다. 테스트를 하기 위해서 우선 div를 하나 더 추가를 해줍시다. 그리고 css 파일에 들어가서 border로 테두리를 더 명확하게 보이게 하고 float 속성을 넣어보겠습니다. 이렇게 넣었더니 웹페이지에서는 아래와 같이 정렬되어 보이게 됩니다. 원래 div만 사용을 하면 이렇게 정렬이 되지 않고 1열로 정렬이 되어 있는데 float을 쓰니 이렇게 정렬되게 바뀌었습니다. float의 속성 값으로는 inherit, none, left, right 입니다 inherit과 none은 똑같이 적용이 안되던데 무엇이 다른지는 나중에 검색을 해서 알아봐야 할 것 같습니다.

width : 폭 height : 높이

웹 폰트를 왜 써야 하는가? 홈페이지에 디자인이나 분위기때문에 사용을 하는 것입니다. 웹 폰트를 쓰기위해 해야할 것들이 있습니다 우선 Google Fonts라는 사이트에 들어가봅시다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 여기서 마음에 드는 폰트를 골라보세요! 고른 다음 + 버튼을 눌러주세요! 그럼 아래 사진과 같은 창이 뜨게 됩니다. 이 창은 우리가 이 폰트를 어떻게 사용을 해야되나를 알려주는 창입니다. 우선 IMPORT에 대해서 설명을 드리겠습니다. style 태그를 제외한 import 부분을 복사해 줍시다. 그 ..

내가 만든 html 파일 외에 다른 폴더에 있는 파일에 접근하는 법을 알아보자. 현재 저의 Directory 폴더 상황입니다. data폴더 안에 이렇게 code.jpg라는 이미지 파일이 있습니다. 이것을 웹페이지에 표현하려면 어떻게 할까요? ./ - 이것은 현재 웹페이지 자신이 존재하고 있는 폴더라는 의미입니다. data - 그 폴더안에 data라는 폴더 code.jpg - 그리고 그 안에 있는 code.jpg라는 말입니다. 이렇게 잘 뜨는 것을 확인할 수가 있습니다. 그리고 만약 폴더가 이렇게 배치되어 있는 경우에는 어떻게 해야할까요? 위의 방식과 동일하게 하면 적용이 안되는 것을 알 수 있습니다. ../ - 내 폴더보다 상위폴더에 data라는 폴더에 jpg를 가져와달라~