html

기본문법 - 요소Element

• 형태: <태그>내용</태그>

• ex) <h1>ho!</h1>: h1 요소

  • <h1>: (시작|열린) 태그
  • ho!: (태그|요소)의 내용
  • </h1>: (종료|닫힌) 태그
    
    

태그의 부모-자식 관계

• <태그1><태그2>내용</태그2></태그1>

  • 태그1: 태그2의 부모요소
  • 태그2: 태그1의 자식요소

• 코드 가독성을 위해 줄바꿈과 들여쓰기를 적극 이용

• 여러겹으로 태그가 쌓이는 경우

  • 어떤 태그를 감싸고 있는 태그들을 부모요소를 포함하여 그 태그의 상위(조상)요소라고 표현
  • 어떤 태그가 감싸고 있는 태그들을 자손요소를 포함하여 그 태그의 하위(후손)요소라고 표현
    
    

빈 태그 Empty tag: 종료태그가 없는 태그

• ex) <link rel="stylesheet" href="main.css">, <meta charset="UTF-8">

• 요소 내용이 없기에 빈 태그

• 표현 방식

  • <태그>: HTML1,2,3,4,5
  • <태그 />: HTML5 & XHTML - 빈 태그임을 명시하므로 권장

• 열린 태그의 속성Attribute-값Value

  • <태그 속성="값">내용</태그>

  • 태그의 기능의 확장

    • ex) <img />: 이미지를 삽입하겠다.

      • 어떤 이미지를?: src
      • 이미지를 출력하지 못할때는 뭐라고하지?: alt
      • <img src="이미지경로" alt="이미지 출력 불가시에 표현할 값" />

    • ex) <input />: 입력을 받겠다.

      • 입력은 어떤 타입?: type
        • text, checkbox, ...
      • <input type="입력값의형" />: 입력할 수 있는 텍스트박스가 생긴다.

• 꼭 필요한 속성을 요소의 필수 속성이라고 한다.
  
  

글자와 상자: 요소가 출력되는 특성

• 인라인 요소: 글자를 만들기 위한 요소들

  • 인라인 요소의 요소 내용으로(자식 요소로) 블록 요소 사용 불가. (ex- div: 대표적인 블록 요소)

  • 인라인 요소는 글자 요소이므로 상하 여백, 패딩은 적용 불가.

  • ex) <span></span>

    • 요소 내용의 영역을 구분할 뿐 별다른 기능은 없음.

    • 수평으로 요소 내용을 출력. 요소 내용을 줄바꿈하거나, span태그간에 줄바꿈하면 공백 한칸.

    • 요소 내용의 크기에 맞게 자동으로 영역이 줄어든다.

    • 속성 - style="css속성: 값;"

      • "width: 100px;", "height: 50px;": 가로, 세로 사이즈는 지정 불가. 글자이므로.
      • "margin: 20px 20px;": 요소 외부 여백 지정. 글자 요소이므로 위아래 여백은 적용이 안된다.
      • "padding: 20px 20px;": 요소 내부 여백 지정. 글자 요소이므로 위아래 여백은 적용이 안된다.

• 블록 요소: 상자(레이아웃)을 만들기 위한 요소들

  • 인라인 요소, 블록 요소 모두 자식 요소로 포함할 수 있다.

  • ex) <div></div>

    • span 태그처럼 요소 내용 영역을 구분할 뿐 별다른 기능 없음.
    • 수직으로 요소 내용을 출력.
    • 부모 요소의 크기만큼 가로는 자동으로 영역이 늘어난다. 세로는 요소 내용에 맞게 줄어든다.
    • 속성 - style="css속성: 값;"
    • margin, padding - 상하좌우 모두 여백이 적용된다.

<span style="margin: 50px 20px;">Hello</span>
<span style="padding: 50px 20px;">Hi</span>
<div style="margin: 20px 20px;">Hello</div>
<div style="padding: 20px 20px;">Hi</div>

• 1 줄: span margin 설정. 영역 외부로 여백 설정. 글자 요소이므로 상하 여백은 적용되지 않아 뷰포트 상단에 밀착됨
• 2 줄: span padding 설정. 영역 내부로 여백 설정. 영역이 상하로 여백만큼 확장되지만 글자 자체에 여백이 적용되지 않음.
• 3 줄: div margin 설정. 영역 외부로 여백 설정. 부모 요소는 body이므로 뷰포트 전체로 영역 가로 확장. 세로는 글자만큼만.
• 4 줄: div padding 설정. 영역 내부로 여백 설정. 부모 요소는 body이므로 뷰포트 전체로 영역 가로 확장.

글자 요소의 영역이 블록 요소의 영역보다 상위에 위치하는 듯?

핵심 요소 정리

블록 요소

🔹div - division
특별한 의미 없는 구분을 위한 요소

🔹h - heading
제목을 의미
h1 ~ h6: 숫자가 작을수록 ⭐중요한⭐ 내용. 크게 표시됨.

🔹p - paragraph
문장을 의미

🔹ul - unordered list
순서 없는 목록

• li - list item
  목록의 항목들
  
  

인라인 요소

🔹img - image
이미지 삽입
<img src="img경로" alt="대체문자열" />

🔹a - anchor
다른 페이지로 이동하는 하이퍼링크 지정하는 요소
<a href="페이지 주소" target="페이지를 띄울 위치">하이퍼링크문자열</a>

• target
  • _blanck: 새로운 탭

🔹span
특별한 의미 없는 구분을 위한 요소
인라인 컨텐츠의 일부에만 css 요소를 적용할때 이용할 수 있다.

🔹br - break
줄바꿈

🔹label
label을 붙일 수 있는 요소에 label을 붙여준다.

인라인-블록 요소 inline-block

인라인 요소이긴 하지만 블록 요소의 특성도 있음.
상하 사이즈, 여백을 가질 수 있다.

🔹input
<input type="input타입" value="기본값"/>

<input type="input타입" placeholder="입력예제" />

<input type="input타입" disabled />: 비활성화

🔸type
1. checkbox

<label>
  <input type="checkbox"> Apple
</label>
<label>
  <input type="checkbox" checked> Banana
</label>

Apple
Banana

2. radio

• 같은 그룹 내에서 택1
  

<label>
<input type="radio" name="group1"> Apple
</label>
<label>
<input type="radio" name="group1"> Banana
</label>

Apple
Banana

테이블 요소

표. 행, 열의 집합. 블록요소이기는 하다.
🔹tr: 행
🔹td: table data, 각 셀에 들어갈 값

<table>
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
</table>

A	B
C	D

주석

<!--주석-->
ctrl + / 로 생성

전역속성

🔹속성: 태그의 기능을 확장해주는 역할. 태그마다 적용할 수 있는 고유의 속성들이 존재.
🔹전역속성: 태그의 종류에 관계없이 적용할 수 있는 속성.

• title: 요소의 정보, 설명 지정. 마우스 커서를 올려놓으면 표시된다.
• style: 요소에 css 스타일을 적용
• class: 요소를 식별할 수 있는 중복 가능한 이름. 요소들의 그룹을 형성.
• id: 중복되지 않게 부여하는 이름. 중요한 요소에 사용. 중복되어도 문제는 없다.
• data-이름: 요소에 텍스트 데이터를 부여. js나 css에서 이용한다.

html

<span class="group0">동해물과</span> 백두산이
<span id="id0">마르고</span>
<span class="group0">닳도록</span> 하느님이 
<span class="group1">보우하사</span> 우리나라
<span id="id0">만세</span>

<div data-f-data="apple">사과</div>
<div data-f-data="banana">바나나</div>

css

.group0 {
  color: red;
}
.group1 {
  color: blue;
}
#id0 {
  color: green;
}

js

const els = document.querySelectorAll('div')
els.forEach(el => {
  console.log(el.dataset.fData)
})

• title 속성 - group0(동해물과, 닳도록), group1(보우하사) 요소들에 다른 스타일 적용
• id 속성 - id0 이름을 가진 요소들(마르고, 만세)에만 스타일 적용. 중복되도 무슨 일이 생기지는 않음.
• data-{data name} 속성 - "f-data"라는 이름으로 요소들에 부여한 데이터를 자바스크립트의 반복문을 통해 읽어 console에 출력했음.

js파일을 html에 연결할때 head가 body보다 선행하므로 위와 같이 body의 요소들을 참조하는 js 코드는 제대로 작동하지 않음. script 태그에 defer 속성을 추가하면 예상대로 작동함

<script defer src="main.js"></script>