'#IT #HTML #CSS #PL' 태그의 글 목록

#IT #HTML #CSS #PL

HTML 맛보기(링크 걸어주기!) 2017.10.20

HTML 맛보기(링크 걸어주기!)

워누 2017. 10. 20. 09:55

2017. 10. 20. 09:55

티스토리를 처음 접하게 되었습니다! 잘 부탁드립니다ㅎㅎ

이곳에 포스팅 할 글들은 학교에서 배운 것들을 그대로 가져와 정리하고 서로 공유하고자 함이니 틀린 것이나 더 좋은 방법이 있다면 가르쳐 주시기 바랍니다.

HTML은 학교에서 정규 과정으로 배우는 것이 아니라 고등학생들에게 실생활에서 접할수 있는 코드인 HTML5와 CSS를 가르치고 있는 "생활코딩" 프로그램에서 보조강사를 맡게 되었습니다. 사실 1도 몰랐었죠..ㅎ 그래서 따라가기에만 급급했었으나 조금 지나서 어느 정도 알게 되니 이걸 정리해야 할 필요성을 느꼈습니다. 이 홈페이지에 방문하시는 여러분과 조금 더 친숙하게 다가가 보도록 노력하겠습니다 ㅎㅎ

제가 프로그램을 처음으로 작성한 코드입니다. 일단 같이 보실까요?

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
    a {text-decoration:none;}
    a:hover{ text-decoration:underline; font:bold 1em green; background-color:cyan;}
    #trends{ border:1px solid green; width:100px; }
  </style>
</head>
<body>
  <div id="news">
    <a href="http://www.daum.net" target="_blank"> Daum
    </a>
  </div>
  <div id="trends">
    <a href="http://trailers.apple.com" target="_blank"> Movie
    </a>
  </div>
  <div id= "notice">
    Notice Board
  </div>

</body>
</html>

시작과 끝을 명확하게 하기 위해 html 문서는 기본적으로 구조를 잡아주어야 합니다.

<html> </html>, <head> </head>, <body> </body> 등과 같죠! 이 세개는 반드시 필요한 문장들이기도 합니다. 저처럼 html에 관심있으신 분들은 꼭 알아두시기 바래요! 오늘은 맛보기 만이니까 자세한 설명은 차차 하기로 하고 일단 저걸 메모장에다 입력한 뒤에 저장을 하고 결과를 보실까요?

아차! 일단 저장하는 방법을 알려드리고 결과 보는 법을 알려드려야겠죠?

일단 저장할 때 어떻게 뜨는 지 볼까요?