태그와 태그를 활용해보고 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로 해석하라고 지시해주는 겁니다. 그리고 이라는 태그가 시작되고 그 안에..
HTML 태그에 대한 몇 가지 의문을 짚고 넘어가겠습니다 태그를 붙여넣기 하면서 몇 가지 의문점이 생긴 분들이 있을 것 같군요.첫 번째로 HTML태그는 대문자로 작성하지 못할까요? 가령 가 아니라 로요.물론 작성 가능합니다. 뿐만 아니라 나 로도 작성이 가능합니다. 하지만 브라우저의 해석기가 태그를 읽을 때 다 소문자로 읽기때문에 대문자를 쓰는건 비효율적이기도 하고, 소문자로 쓰는 것이 개발자모드를 켰을 때 더 찾기 쉬울뿐더러 다른 프로그래머들과 형식을 맞추는 것도 중요하기 때문에 소문자로 쓰시는 것이 좋습니다. 즉, 대문자로 쓸 수 있지만 소문자로 쓰시는 것이 훨씬 장점이 많습니다.두 번째로 태그를 완전히 닫지 않은 상태에서 다른 태그들을 나열 할 수 있나요? 가령 ........과 같은 형태로요.ht..
HTML이란 무엇인가? 웹 페이지에서 HTML은 정보를 나타냅니다. 크롬을 사용 중 이시라면 키보드에 F12를 눌러보세요. 그럼 개발자 모드가 열립니다. 개발자 모드에서 Elements를 누르면 그 페이지의 HTML 요소들을 알 수 있습니다. 그림에서도 보이듯 많은 정보들이 HTML로 표현되고 있습니다. 위에 으로 표현된 것들을 HTML 태그라고 합니다. 그럼 이번 시간에는 HTML로 작은 문서를 하나만들어 보도록 하겠습니다.우선 HTML에 관해 우선 알아두셔야 할 것은 닫는 태그가 있는 형태와 스스로 닫는 형태가 있다는 것입니다.닫는 태그가 있는 형태는 ..., ...처럼 여는 태그가 시작되고, 사이에 표현할 정보가 들어간 다음 닫는 태그를 사용합니다. 그리고 스스로 닫는 형태는 처럼 하나의 태그 안에..
HTML과 CSS 그리고 JavaScript를 배우기 전에 파일 확장명을 표시해 봅시다. 각 파일은 확장명이 다릅니다. HTML파일은 문서명.html / CSS파일은 문서명.css / JavaScript 파일은 문서명.js로 표시됩니다.다른 언어들로 파일이 만들어졌다면 또 다른 확장명을 볼 수 있겠죠 ? 하지만 프론트엔드 수업인 만큼 우선 세가지만 알아두면 충분합니다. HTML => 문서명.html / CSS => 문서명.css / JavaScript => 문서명.js 뒤에 확장명을 보면 어떤 문서인지 알 수 있습니다.우선 파일탐색기를 눌러주세요.(내문서나 다른 문서들을 누르셔도 상관없습니다.) 그리고 보기를 클릭하시고 파일 확장명에 체크 표시를 해주세요. 그러면 파일 확장명이 표시됩니다. 우선은 다른 ..