CSS란 무엇일까요? 이전 시간까지는 HTML에 대해서 배웠습니다. 오늘부터는 CSS에 대해서 배워보겠습니다. CSS란 도대체 무엇일까요? CSS는 HTML 문서가 어떻게 배치되고 어떤 식으로 보여질 지와 같은 스타일을 표현하는 언어입니다. HTML만으로 구성된 문서들은 아주 투박했습니다. 우리가 자주 접하는 웹사이트들도 CSS가 없다면 상상 이상으로 아주 투박했을 겁니다. 그렇게 깔끔한 네이버의 메인도 CSS가 없으니 같이 만들던 예시만큼 투박해 보이죠? 보기 좋은 떡이 먹기도 좋다는 말이 있습니다. 아무리 아주 유익한 사이트라고 해도 보기 좋게 꾸미지 않으면 사람들이 찾지 않게 되겠죠.얼른 CSS도 배워서 실전 같은 예제들을 만들어봅시다. 우선 CSS선택자를 배워봅시다. CSS 선택자란 무엇일까요 ?..
태그와 태그를 활용해보고 id와 class도 익혀봅시다. 오늘은 상자를 여러개 그려서 태그와 태그에 대해서 배워봅시다. 예시 사진을 보시면 아시겠지만 네모난 상자들이 여러개 있습니다. 어떤 것들은 겹쳐져 있고, 어떤 것들은 다른 것들과 떨어져 있습니다. 안 쪽의 텍스트를 보시면 태그와 태그의 큰 차이를 알 수 있습니다. 무엇인지 아시겠나요? 맞습니다. 옆 공간을 다 차지하는 것이 태그이고, 옆에 다른 컨텐츠가 올 수 있는 것이태그입니다. 우선 이 정도만 기억해두고 소스코드를 살펴보도록 합시다. id와 class값 주기 - div와 span의 차이 a태그를 이용해서 페이지 내의 특정요소로 이동 div - 1 div - 2 div - 2-1 span - 1 span - 2 div - 3 div - 4 새로운..
오늘은 태그, 태그, 를 활용해 보겠습니다. 우선 우리가 만들 것을 미리 사진으로 살펴볼까요?제목 밑에 검색창이 있고, 그 밑에 제 강의가 리스트로 나타나 있습니다. 각 리스트는 클릭하면 제목에 맞는 강의로 이동하고, 마지막엔 구글로 바로 이동할 수 있게 만들었습니다. 소스 코드는 아래와 같이 되어있습니다. 레몬캔디의 강의 검색 검색 파일 확장명 표시 HTML 입문 HTML 보충설명 HTML 속성값 바꾸기 찾으시는게 없다면 구글로 이동해서 검색해 보세요 소스코드를 보면서 하나씩 배워볼까요?우선은 태그가 나오지만, 지난 시간에 에서 태그는 이미 배웠으니 바로 태그로 넘어가겠습니다. 이전 태그들을 복습하시려면 여기를 눌러주세요. 태그는 사용자가 정보를 입력할 수 있는 입력창을 보여주는 태그입니다. 속성에 타..
이전에 배웠던 코드를 분석해 봅시다. 좋아하는 연예인은 누구입니까 ? fighting! girls day! 이전의 문서를 다시 불러왔습니다. 이제 하나씩 살펴볼까요?HTML태그 들은 태그 사이에 씁니다. 하지만 태그들을 보시면 이라는 태그 밖에 쓰인 태그 같이 생긴 것이 보이시죠 ? (태그는 아닙니다.) 이건 HTML 문서의 맨 처음에 와서 웹 브라우저에게 이 페이지가 어떤 버전의 HTML로 작성되어 있는지를 가르쳐줍니다. 그래서 올바르게 해석할 수 있도록 도와주죠. 앞으로 작성할 문서들은 모두 HTML5를 사용합니다. 그리고 위의 표시는 HTML5로 해석하라고 지시해주는 것이죠. 정리하자면, 문서 맨 위의 은 브라우저에게 HTML5로 해석하라고 지시해주는 겁니다. 그리고 이라는 태그가 시작되고 그 안에..