스마일 노트

웹사이트와 웹사이트를 연결하기 위해서는 link가 필요합니다. 사진 속에 파란색 밑줄이 있는 Take a break!를 클릭하면 다른 페이지로 넘어갑니다. 고양이 그림이 있는 페이지로 들어와졌습니다. 이런 것이 link의 기능인데 어떻게 해야하는지 알려드리겠습니다. link를 만들기 위해서는 처음에는 와 태그를 적습니다. 이 안에 글자를 넣으면 됩니다. Learn to Code 하지만 이 상태에서는 글자에 하이라이트가 생기지는 않습니다. 본격적으로 글자에 링크를 걸려면 href=""라는 것이 필요합니다. URL이라는 것을 ""안에 넣으면 됩니다. Learn to Code href는 속성(attribute)입니다. 모든 속성은 흔하게 2가지 특징이 있습니다: 1. 추가 정보를 제공합니다. 2. openin..

버튼을 사용하면, 프로그램은 사용자의 행동을 인식하여 웹페이지를 바꿉니다. 예를 들어서, Next 버튼을 누르면 사진이 바뀌게끔 코드를 실행할 수도 있습니다. 사진이 바뀌게끔 하는 코드는 나중에 자세히 배우도록 하고 지금은 button에만 초점을 맞춰 배워봅시다. 사용자가 클릭할 수 있는 버튼을 만들기 위해서는 button 태그를 이용하면 됩니다. 을 써준 후 을 써서 닫아줍니다. 위의 사진처럼 작성하면 그림과 같은 결과물이 나옵니다. 과 사이에 쓴 글이 출력되는 것을 볼 수 있습니다. login 이라고 한 번 작성해 봅시다. login이라고 써진 버튼이 생성된 것을 볼 수 있습니다. button 안에 다른 요소들도 넣을 수 있습니다. continue anyway 과 같이 코드를 작성해 봅시다. 버튼 안..

Line Breaks 단락들을 줄 바꿈과 함께 구성하고 싶을 때가 있습니다. 예를 들어, 사진에서 'Raindrops on roses'가 한 줄에, 'Whiskers on kittens'가 한 줄에 보이면 훤씬 괜찮을 것 같습니다. 이때 줄 바꿈을 하게끔 도와주는 태그가 있습니다. line break tag라고 부르고 이라고 줄 바꿈을 원하는 곳에 입력해 주면 됩니다. 은 empty tag입니다. Empty tag는 closing tag나 중간에 내용이 필요하지 않습니다. 텍스트에 강조를 주기 위한 element가 있습니다. em element라고 부릅니다. 강조를 주고 싶은 텍스트의 앞과 뒤에 과 을 더하면 됩니다. 이 태그를 이용하면 글씨가 기울어집니다. 중요한 텍스트들은 과 태그를 이용하면 됩니다...

HTML 소개 HTML은 HyperText Markup Language의 약자입니다. 인터넷에 있는 모든 웹페이지들을 구조화하는 컴퓨터 언어입니다. HTML 코드는 웹 브라우저에게 이미지, 링크, 그리고 텍스트와 같은 요소들을 웹페이지 위에 어떻게 나타나라고 알려줍니다. Tags 태그라는 것은 과 같은 것입니다. 은 opening tag라고 합니다. 웹 브라우저에게 버튼 표시의 시작을 원한다고 알리는 것과 같습니다. 다음에는 과 같이 closing tag를 적어 주어야 합니다. 과 사이에 글자를 넣으면 텍스트가 들어간 버튼을 만들 수 있게 됩니다. Headings 단락을 만드는 태그는 입니다. 와 사이에 원하는 글을 적으면 됩니다. 제목과 같이 큰 글씨를 쓰고 싶다면 heading을 뜻하는 태그를 입력하..