코딩응애의 개발블로그

생활코딩(WEB1 - HTML & Internet 부록: 코드의 힘 까지) 본문

HTML CSS

생활코딩(WEB1 - HTML & Internet 부록: 코드의 힘 까지)

이너멜 2021. 8. 12. 08:50

부모 자식 태그

태그가 서로 포함관계로 연관되어 있을때 포함하고 있는 태그를 부모 태그 포함된 태그를 자식태그라고 합니다.

근데 html에는 대부분에 태그들은 부모 자식 관계가 변하는데 부모 자식 태그가 고정인 경우가 있다.

  • 1. HTML 
  • 2. CSS 

이런식으로 목록을 표시하기 위해서는 목록이 영어로 list인데 앞에 두 글자를 딴 <li> 태그를 이용하면 된다 

<li>1. HTML</li>
<li>2. CSS</li>
  • 1. Html
  • 2. Css
  • 3. Python
  • 4. Java

위에 목록을 html css 따로 python java 따로 나누고 싶을때는 <li>와 같은 항목들은 그 항목이 어디서부터 어디까지가 연관된 항목인지를 경계를 짓기위한 부모태그가 필요한데 이 태그가 바로 <ul> 태그 입니다.

<ul>
  <li>1. Html</li>
  <li>2. Css</li>
</ul>
<ul>
  <li>3. Python</li>
  <li>4. Java</li>
</ul>
  • 1. Html
  • 2. Css

 

  • 3. Python
  • 4. Java

이런식으로 구분이 되서 보입니다. <ul> 태그와 <li> 태그는 부모 자식 관계임을 알수 있습니다.

근데 위에서 처럼 숫자를 적는데 만약 1억개를 적어야 한다면? 1억개를 다 적었는데 html 내용을 지우라고 한다면? (feat.생활코딩 )  이때 사용하는 태그가 <ol> 태그 입니다. 

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>Java</li>
</ol>
  1. HTML
  2. CSS
  3. Java

이렇게 자동으로 숫자를 출력을 해줍니다.

<title> 태그

웹페이지에 제목을 사용자에게 명시적으로 알려줄 수 있고 검색엔진과 같은 기계들은 <title> 태그를 책 표지와 같은 정보로서 사용합니다

<meta> 태그

문서 그 자체를 설명하는 태그입니다 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지, 문자 세트(언어설정)는 어떤 것을 사용하는지 등의 정보를 담고 있는 태그입니다 닫는 태그가 없습니다 

(저도 따로 검색해서 알아낸 정보 입니다)

<title>WEB1 - League of Legend</title>
<meta charset="utf-8"> <!-- 웹페이지를 열때 utf-8로 열어라 라고 말해주는 태그 -->

위에 두 태그들은 본문을 설명하는 태그들입니다 본문이라 함은 

<ol>
      <li><a href="1.html">League of Legend</a></li>
      <li><a href="2.html">Euro Truck</a></li>
      <li><a href="3.html">Rust</a></li>
</ol>
<p>32비트 게임인 주제에 램을 엄청나게 퍼먹기 때문에, 
램 4GB로는 32비트 윈도우든 64비트 윈도우든 시스템에 굉장히 부담이 많이 걸리며 
정상적인 장시간 플레이가 어렵다.</p>

이런것들을 의미하고 이 본문은 <body>라는 태그로 묶기로 약속을 했습니다 본문을 설명하는 태그는 <head>태그로 묶기로 약속을 했고 이 모든 태그들을 감싸는 태그가 있는데 <html>태그를 써줍니다

그리고 이 문서는 html이다 라는 뜻에서 맨 위에다가 <! doctype html> 이라고 써줍니다. 

<!doctype html>
<html>
  <head>
    <title>WEB1 - League of Legend</title>
    <meta charset="utf-8">
  </head>
  <body>
    <ol>
      <li><a href="1.html">League of Legend</a></li>
      <li><a href="2.html">Euro Truck</a></li>
      <li><a href="3.html">Rust</a></li>
    </ol>
  </body>
</html>

<a> 태그

쉽게 말해서 링크다 원하는 곳에 <a> 태그를 달아주면 되는데 당연하게도 이것만 떡하니 쓰면 원하는걸 얻을 수 없음 

이때 속성을 이용을 하는데 < a href="링크주소"> 해주면 링크가 생긴다 

<a href="https://na.leagueoflegends.com/ko-kr/" target="_blank" 
title="롤 사이트">라이엇 게임즈</a>가 개발 및 서비스 중인 MOBA 장르의 게임.
<!-- target="_blank"는 링크를 클릭을 했을때 새 탭이 열리면서 링크를 들어가고 싶을때 씀
title="롤 사이트"는 링크를 클릭하기 전 이 링크가 무엇인지를 알려주고 싶다 할때 사용함 -->

동영상 추가 기능 

유튜브 등의 동영상 사이트에 공유 버튼에 들어가서 퍼가기를 클릭하면 코드가 나오는데 그 코드를 복붙하면 된다 

댓글 추가 기능 

disqus 라는 사이트를 이용해서 코드를 복붙을 하면 된다 나같은 경우 깃허브에 내가 만든 사이트 주소로 들어가야지 댓글이 추가된걸 확인을 할수 있었습니다.

저작자표시 비영리 변경금지

'HTML CSS' 카테고리의 다른 글

드림코딩&생활코딩(CSS 선택자, display, position)  (0) 2021.09.17
생활코딩(WEB2-CSS 반응형 디자인 ~ 마무리 )  (0) 2021.09.05
생활코딩(WEB2-CSS CSS 선택자를 스스로 알아내는 방법~그리드)  (0) 2021.08.23
생활코딩(WEB2-CSS CSS 등장 이전의 상황~CSS 속성을 스스로 알아내는 방법)  (0) 2021.08.21
생활코딩(WEB1 - HTML & Internet 최후의 문법 속성과 img까지)  (0) 2021.08.11
'HTML CSS' Related Articles more
Comments