이번에는 css의 윤곽 , 패딩, 마진, 상자크기 에 대해서 알아 봅시다. 윤곽 윤곽은 일정 공간의 마지막 부분에 선을 그어주는 것을 의미 합니다. border : 두께, 선개수, 색상 border 는 top, bottom, left, right 가 합쳐진 것으로, 쪼개서 사용할 수도 있습니다. border-radius -> 모서리 둥글게 border-shadow -> 그림자 수평, 수직, 흐림반경, 확산정도, 색상 패딩 패딩은 윤곽 기준으로, 안쪽여백을 의미 합니다. 박스의 크기에 포함이 되고, 패딩끼리 겹치지 않습니다. padding : 50px -> 상하좌우 ( 전부다 ) padding : 50px 50px 50px 50px -> 위, 오른쪽, 아래, 왼쪽 ( 위쪽 부터 시계방향 ) padding ..

이번에는 css의 background 에 대해서 알아 봅시다. background background 는 뒷 배경 이라고 생각을 하시면 되겠습니다. background-color -> 뒷 배경에 색 넣기 background-image -> 뒷 배경에 이미지 넣기 ※ border : 1px solid #777; 을 적용하고 있습니다. background-repeat -> 이미지 반복 여부 repeat : 반복 ( 기본값 ) no repeat : 반복x repeat-x : x축 반복 repeat-y : y축 반복 background-position -> 뒷배경 시작위치 ( 왼쪽, 위 ) %를 사용해서 위치를 지정할 수도 있습니다. background-size -> 뒷배경 사이즈 조절 auto : 이미지의 원..

이번에는 css의 폰트, 문단, 디스플레이에 대해서 알아 봅시다. 폰트 폰트는 글자의 글꼴 등을 말합니다. 웹폰트 먼저 웹폰트 를 사용하는 방법에 대해서 알아 봅시다. 웹폰트는 외부 웹의 폰트를 가져와서 사용하는 방법인데요 유료도 있고 무료도 있으니까 잘 알아보고 사용하셔야 합니다 ㅎㅎ; 구글폰트를 검색해 주세요 ( 무료 ) 구글폰트에 들어가면 여러가지 폰트들이 나오는데, 그 중에 원하는 걸 선택합니다. 원하는 걸 선택했다면, 그 중에서 또 원하는 것을 선택합니다. 그러면 오른쪽에 아래 그림과 같은 창이 생성이 되는데, 여기서 link 방식으로 사용할건지, import 방식으로 사용할 건지 정하신 후에, 복사해서 붙여 넣으면 됩니다. link 로 사용하기. import로 사용하기. 사용하기 편한대로 사용..

이번에는 css의 선택자에 대해서 알아 봅시다. 선택자 선택자는 어디에 css를 적용할 것인지 선택하는 것을 말합니다. 전역선택자 파일의 모든 곳을 선택하는 방법입니다. * 를 사용 합니다. ex) * { margin : 0; font-size : 15; } 태그선택자 태그를 선택하는 방법입니다. 선택자가 들어가는 자리에 태그 이름을 사용 합니다. ex) p { color: red; } 다중선택자 여러가지 선택자를 선택하는 방법입니다. , 를 사용 합니다. ex) p , div { color: blue; } 하위선택자 위의 그림과 같이 있을 때, 태그는 의 하위에 있다고 생각하시면 됩니다. 공백(스페이스바) 로 사용 합니다. ex) div p { color: red; } 자식선택자 위의 그림과 같이 있을..

이번에는 css의 기본을 배워 봅시다. ※ visual studio code 에서는, .html 파일을 만든 후 "html:5" 를 입력 후 Tab 키를 누르면 기본적인 html 코드가 빠르게 작성이 됩니다. css css는 html로 만들어진 파일에 외형을 꾸며줄 때 사용하는 건데요, css에 본격적으로 들어가기 전에, 기본적으로 알고가야 하는 개념이 있습니다. 바로 블럭 요소 와 인라인 요소 입니다. 블럭 요소 1. 블럭요소는 화면에서 블럭(공간)의 크기를 갖는다. 자동 줄바꿈 2. 블럭요소 안에는 블럭요소와 인라인요소를 가질 수 있습니다. 블럭 요소에는 div , h1 ~ h6 , p , ul , ol , li , section , header , aside , article , footer 등이 ..

이번에는 css를 나가기에 앞서, 편집기인 visual studio code 를 다운로드 및 설치 해봅시다 visual studio code https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 각각의..