front-end/HTML

[HTML] 기본 문법

gaan 2023. 3. 3. 04:31

1. 기본 문법 - 태그

  • 강조 <strong></strong>
  • 밑줄 <u></u>

2. 줄바꿈 : br vs p

  • <br> : just 줄바꿈
  • <p></p> : 웹페이지를 정보로서 가치 있게 만든다. 단락이라는 것을 의미론적으로 표현한다.
      •  

3. 속성 & img

  • 속성(Attribute) : 태그가 태그의 이름만으로는 정보가 부족할 때, 속성을 통해서 더 많은 의미를 부가할 수 있다.
  • 이미지 <img>

📖 이미지 다운 사이트 추천 : https://unsplash.com

 

아름다운 무료 이미지 및 사진 | Unsplash

어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.

unsplash.com

 

4. 부모자식과 목록

  • <ul>과 <li>
<ul>
    <li>1. HTML</li>
    <li>2. CSS</li>
    <li>3. JavaScript</li>
</ul>

-> <li>와 같은 자식 태그는 항목들이 어디서부터 어디까지가 서로 연관된 항목인지를 그룹핑하기 위한 부모 태그<ul>가 필요

  • <ol>과 <ul>
    • <ol> : Ordered List
    • <ul> : Unordered List
  • <table>
    • <table> 
      • <tr>
        • <td>

5. 문서의 구조

<!doctype html>
<html>
   <head>
        <title></title>
        <meta charset="utf-8"> // 본문이 "utf-8" 방식으로 저장되어 있다.
   </head>
   <body>
   </body>
</html>

 

6. 링크 - 웹페이지와 웹페이지를 연결

  • <a href="링크" target="_blank" title"클릭하기 전에 무엇인지 알려주기"></a>