0418 HTML

💻 HTML태그의 기본 문법

<div>FC Barcelona</div>

시작태그와 종료태그로 내용(코드)을 감싸고, 이것을 요소라 부른다.

👉 부모와 자식 관계

<div class="a">
  <div class="b">
    <span class="c">
      FC Barcelona
    </span>
  </div>
</div>

이와 같이 요소의 내용을 새로운 요소로도 활용이 가능하다. 자식태그는 들여쓰기를 통해 보기좋게 작성한다.

• <span class="c"> 요소의 상위요소 : 부모를 포함한 모든 요소이다. <div class="b"> 요소와 <div class="a"> 요소이다.
• <span class="c"> 요소의 부모요소 : <div class="b"> 요소만을 의미한다.
• <div class="a"> 요소의 하위요소 : 해당 요소가 감싸고 있는 모든 요소이다. <div class="b"> 요소와 <span class="c"> 요소이다.
• <div class="a"> 요소의 자식요소 : <div class="b"> 요소만을 의미한다.

👉 빈 태그

<img src=""/>
<input type=""/>
<br/>

종료태그가 없으며 > 전에 / 를 작성하여 닫는다.

• <img src=""/>, <input type=""/> : 일부 빈 태그는 각자의 역할을 명확히 하기 위해 속성과 값이 주어진다.
• <br/> : 속성과 값이 주어지지 않는 빈 태그들도 존재한다.

💻 인라인, 블록 요소

각 요소들은 화면에 출력되기 위한 특성을 가지고 있다. 크게 인라인, 블록, 인라인-블록 3가지로 나뉜다.

👉 인라인 요소

글자처럼 취급되는 요소이다.

예시

<span>FC Barcelona</span>
<span>Real Madrid</span>

출력 결과

FC Barcelona Real Madrid

• 수평으로 요소가 쌓인다.
• 포함한 내용의 크기만큼 크기가 줄어든다.
• width, height등 지정할 수 없는 style이 있다.
• margin, padding 속성은 좌, 우방향만 설정할 수 있다.
• 인라인 요소만 자식으로 포함할 수 있다.
• 줄바꿈은 띄어쓰기로 출력된다.

👉 블록 요소

상저처럼 취급되는 요소이다.

예시

<div>FC Barcelona</div>
<div>Real Madrid</div>

출력 결과

FC Barcelona
Real Madrid

• 수직으로 요소가 쌓인다.
• 너비는 부모의 너비만큼 늘리려 하고, 높이는 내용의 크기만큼 줄어드려 한다.
• 자식으로 블록, 인라인 요소 전부 포함할 수 있다.

💻 핵심적인 요소들

👉 블록 요소

• <div> : 특별한 의미가 없다. 단지 구분을 위한 요소이다.
• <h1> ~ <h6> : 제목을 의미하는 요소이다. 숫자가 작을 수록 중요한 제목이다.
• <p> : 문장을 의미하는 요소이다.
• <ul> <li> : <ul> 요소는 순서가 필요없는 목록의 집합, 자식으로 <li> 요소를 포함하여야 한다. 목록의 각 항목이다.
• <ol> <li> : <ol> 요소는 순서가 존재하는 목록의 집합, 자식으로 <li> 요소를 포함하여야 한다. 목록의 각 항목이다.
• <table> <tr> <td> : 표를 만들때 쓰는 요소이다. <table> 요소의 자식요소로 행을 의미하는 <tr> 요소가, <tr> 요소의 자식요소로 열을 의미하는 <td> 요소가 자식요소로 포함되어야 한다.

<table> 작성 예시

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

출력 결과

👉 인라인-블록 요소

글자처럼 취급되고 수평으로 쌓이는 요소지만, 일부 블록 요소의 특성을 사용할 수 있다.

• <input type="" value="" placeholder="" disabled> : 사용자 입력을 받는 요소이다.
  • type="text" : 사용자에게 텍스트를 입력받는다.
  • type="password" : 사용자에게 비밀번호를 입력받는다.
  • value="" : 미리 입력될 값을 작성한다.
  • placeholder="" : 사용자가 입력 시, 참고할 수 있는 내용을 작성한다.
  • disabled : 해당 요소의 사용자 입력 창을 비활성화 한다.

<input> 작성 예시

<input type="text" value="FC Barcelona"/>
<input type="password" placeholder="Your password!"/>
<input type="text" value="Umtiti" disabled>

출력 결과

👉 인라인 요소

• <span> : 특별한 의미가 없다. 구분을 위한 요소
• <img src="" alt=""> : 이미지를 삽입하는 요소이다.
  • src="" : 출력할 이미지의 경로를 작성한다.
  • alt="" : 이미지가 출력되지 않을 경우 출력하는 텍스트를 작성한다.
• <a href="", target=""> : 하이퍼링크를 만들어주는 요소이다.
  • href="" : 이동할 웹 페이지 경로를 작성한다.
  • target="_blank" : 새 탭에 웹 페이지를 출력한다.
  • target="_self" : 현재 탭에 웹 페이지를 출력한다.
• <br/> : 줄바꿈을 해주는 요소이다.
• <label> : 라벨 가능한 요소를 자식요소로 포함하고, 제목과 묶어주는 요소이다.
  • <input type="checkbox" checked> : 체크박스를 만들어 주는 요소이다. <label> 요소의 자식부모로 포함 될 경우, 제목을 클릭하여도 체크가 된다.
    • checked : 해당 체크박스를 미리 체크한다.
  • <input type="radio" name=""> : 라디오 버튼을 만들어 주는 요소이다. <label> 요소의 자식부모로 포함 될 경우, 제목을 클릭하여도 체크가 된다.
    • name="" : 그룹 이름을 작성한다. 같은 name속성 값을 가진 라디오 버튼 중 하나만 선택 될 수 있다.

<label> 작성 예시

<!--체크박스-->
<label>
  Frenkie De Jong<input type="checkbox"/>
</label>
<label>
  Luuk De Jong<input type="checkbox"/>
</label><br/>
<!--라디오 버튼-->
<label>
  Lionel Messi<input type="radio" name="soccer"/>
</label>
<label>
  Cristiano Ronaldo<input type="radio" name="soccer"/>
</label>

출력 결과

💻 전역 속성

• title="" : 요소의 정보나 설명을 지정, 마우스 올리면 보임
• style="" : 요소의 스타일을 지정
• class="" : 요소를 지칭하는 중복 가능한 이름
• id="" : 요소를 지칭하는 고유한 이름(중복x)
  • 이름을 만드는 이유 : css, js 등에서 제어하기 위함
• data-이름="데이터" : 해당요소에 데이터를 저장하는 용도이다. 나중에 js에서 데이터를 처리할 때 사용한다.