7일차 (1) HTML

변승훈·2022년 4월 5일

html

KDT 핀테크 프론트엔드 개발자 2기 배운 내용

목록 보기

7/37

1. Element(요소)

<태그>내용</태그>

Element(요소) : 어떠한 태그들로 내용이 감싸져 있고 그것이 하나의 HTML 코드로써 동작하게 되는데 이를 Element(요소)라 한다.
<태그>내용</태그> 전체가 요소 이다.
최상위 요소는 html이다.
시작(열린)tag : 앞쪽에 있는 "<태그>"이다.
종료(닫힌)tag : 뒤쪽에 있는 "</태그>"이다. 종료태그는 앞에 "/"가 붙는다.
요소의 내용(Contents) : 내용 부분이다.

2. 부모와 자식 관계

<body>
	<div>
    	<div>내용</div>
	</div>
</body>

위와 같은 코드를 봤을 때 보기 쉽게 아래와 같이 표현할 수 있다.
<태그><태그>내용</태그></태그>

부모요소 : 가장 바깥의 <태그></태그>가 부모 요소이다.
내어쓰기(Outdent), Shift+tab키를 눌러 구분을 한다.
자식요소 : 가장 바깥의 <태그></태그>안에 있는 <태그>요소</태그>가 자식 요소이다.
들여쓰기(Indent), tab 키를 눌러 구분을 한다.

<body>
	<div>
    	<div>
        	<div>내용</div>
        </div>
	</div>
</body>

이렇게 여러개의 태그가 존재하는 상황이면 가장 안쪽의 <태그>내용</태그> 기준으로 바깥쪽 태그들을 어떻게 지칭을 할까?
바로 윗단계에 있는 요소는 부모요소, 그 다음 윗단계를 상위(조상)요소라고 지칭할 수 있으며 부모요소도 상위요소라고 할 수 있다.
반대로 가장 바깥의 태그에서 안쪽의 요소들을 통틀어서 하위(후손)요소라고 지칭할 수 있다.

3. Empty tag (빈 태그)

3-1. 빈 태그 : <태그></태그> 일 때 종료태그가 없는 태그이다.

빈 태그의 사용 방법
1. <태그> : HTML1/2/3/4/5에서 사용 가능하다.
편리하지만 빈 태그인지를 명확하게 인지할 수 없는 경우가 있다. 헷갈릴수 도 있다.
2. <태그 /> : XHTML/HTML5에서 사용 가능하다.
안전하게 명확하게 빈 태그인지를 인지할 수 있다. 되도록이면 "/" 붙히는걸 권장한다.

3-2. Attribute & Value (속성 & 값)

<태그 속성="값">내용</태그> : 시작태그에 사용할 수 있다.
속성과 값은 전체 요소가 할수 있는 역할에 기본적인 기능을 확장해서 쓸 수 있게 해준다.

<img src="./cat.jpg" alt="고양이"/>
<input type="text" />
...

★ 빈 태그들은 각각의 역할을 좀 더 명확하게 하기 위해서 거의 대부분의 경우 속성과 값을 이용하여 추가적인 기능을 확장해서 작성을 해야한다.

4. 요소(글자와 상자)

글자와 상자는 요소가 화면에 출력되는 특성이며 크게 2가지로 구분된다.

인라인(Inline)요소 : 글자를 만들기 위한 요소들이다.
블록(Block)요소 : 상자(레이아웃)를 만들기 위한 요소들이다.
★ 인라인, 블록 요소 둘 다 세로는 줄어들려고 하는 특성을 가지고 있다.

4-1. 인라인 요소

대표적인 인라인 요소 span : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도로 사용한다. 요소가 수평으로 쌓인다.

<span>Hello</span>
<span>World</span>

Hello World

줄바꿈 처리는 띄어쓰기로 인식한다.

위의 그림과 같은 특징을 가지고 있으며 글자는 가로와 세로크기(width, height)를 지정할 수 없다.

(그림 출처 : https://heropy.blog/)

여백 개념을 사용할 때(margin-외부 여백, padding-내부 여백) 위, 아래의 여백은 정상적으로 적용되지 않고 좌, 우는 정상적으로 적용이 된다.
인라인 요소 안에 블록요소는 사용이 불가능 하고 인라인 요소만 사용이 가능하다.
a태그는 특수하게 단 하나의 블록 요소를 넣어서 사용할 수 있다!

인라인(글자)요소 종류

span : 특별한 의미가 없는 구분을 위한 요소.
css에서 default value로 display:inline;로 설정되어 있다.

img : 이미지를 삽입하는 요소. (Image)
필수 속성으로 src(삽입할 이미지의 경로), alt(삽입할 이미지의 이름)을 사용한다.

a : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소.(Anchor)
속성으로 href(링크 URL), target(링크 URL의 표시(브라우저탭)위치)을 사용한다.

br : 줄바꿈 요소. (Break)

input : 사용자가 데이터를 입력하는 요소.
Inline-block요소, 베이스는 인라인 요소이면서 블록 요소의 특징을 사용할 수 있다.
속성으로 type(입력 받을 데이터의 타입 checkbox, text...)
,value(미리 입력된 값(데이터))
, placeholder(사용자가 입력할 값(데이터)의 힌트)
, disabled(입력 요소 비활성화, 속성만 작성해서 사용)
, checked(type="checkbox"일 때 체크 박스 입력요소 체크가 된 상태)
, radio(type="radio", 사용자에게 체크 여부를 그룹에서 1개만 입력받음), name(name="fruits", fruits란 이름의 그룹)
을 사용한다.

label : 라벨 가능 요소(input)의 제목.

4-2. 블록 요소

대표적인 블록 요소 div : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도이다. 요소가 수직으로 쌓인다.

<div>Hello</div>
<div>World</div>

Hello
 World

위의 그림과 같은 특징을 가지고 있다.

블록 요소는 가로, 세로너비(width, height)로 지정이 가능하다.

(그림 출처 : https://heropy.blog/)

요소의 외부, 내부여백(margin, padding)으로도 지정이 가능하다.
블록 요소 안에 블록요소나 인라인 요소 둘 다 사용이 가능하다.

블록(상자)요소의 종류

div : 특별한 의미가 없는 구분을 위한 요소. (Division)
layout구조를 잡기 위한 요소이며, css에서 default value로 display:block;을 가지고 있다.

h1 ~ h6 : 제목을 의미하는 요소. (Heading)
숫자가 작을수록 더 중요한 제목을 정의.

p : 문장을 의미하는 요소. (Paragraph)

ul : 순서가 필요없는 목록의 집합을 의미. (Unordered List)

li : 목록 내 각 항목 (List Item)

4-3. 테이블 요소

table : 표요소 행(Row)과 열(Column)의 집합. 블록 요소에 포함된다.

<table>
	<tr> <!--행 : 행(Row)을 지정하는 요소. Table Row-->
    	<td>A</td><td>B</td> <!--열 : 열(Column)을 지정하는 요소. Table Data-->
    </tr>
    <tr>
    	<td>C</td><td>D</td>
    </tr>
</table>


A B				<!--A B : 행  / A : 열 B: 열-->
C D				<!--C D : 행  / C : 열 D: 열-->

colspan : Column Span, 열을 몇 칸 확장할 것인지를 의미한다.

5. 주석

수정사항이나 설명 등을 작성하는 것이다. 일종의 메모라고 생각하면 된다.
브라우저는 이 주석태그를 해석하지 않기 때문에 화면에 내용이 표시되지 않는다.

Ctrl + / 로 주석을 사용할 수 있다.

"<!--" : 주석 시작
"-->" : 주석 끝

<!--수정사항, 설명, Comment-->
<div>
	<!--Hello World! 잠시 주석처리-->
    Welcome!
</div>

6. 전역 속성

전체 영역에서 모두 사용할 수 있는 속성.

title="설명" : 요소의 정보나 설명을 지정한다.
해당하는 요소에 일종의 설명을 명시하는 전체 영역에서 사용이 가능하다.

style="스타일" : 요소에 적용할 스타일(CSS)을 지정한다.

class="이름" : 요소를 지칭하는 중복 가능한 이름

id="이름" : 요소를 지칭하는 고유한 이름

data-이름="데이터": 요소에 데이터를 지정
데이터를 출력할 때 JS연동 시 script defer를 추가해준다.
defer : HTML구조가 준비된 후 JS를 해석하겠다 라는 의미

7. BEM(Block Element Modifier)

HTML 클래스 속성의 작명법이다.

요소__일부분 : Underscore(Lodash) 기호로 요소의 일부분을 표시
앞에 있는 요소의 일부분이다!
요소--상태 : Hyphen(Dash) 기호로 요소의 상태를 표시
요소의 상태를 입력하는 개념이다!

<!-- 1. Underscore으로 상태를 표시하는 방법
  후손 선택자로 .name을 사용할 경우 .item 아래에
  내가 원하지 않은 style이 적용될 수 있기 때문에 BEM방식으로 수정해준다. -->
  <div class="container">
    <div class="name">
      <div class="item">
        <div class="name"></div>
      </div>
    </div>
  </div>

  <!--BEM 방식으로 수정-->
  <div class="container">
    <div class="container__name">
      <div class="item">
        <div class="item__name"></div>
      </div>
    </div>
  </div>

  <!-- 2. Hypen으로 상태를 표시하는 방법
  버튼에 종속되어 있는 느낌이 없고 별개의 단어로 보이기 때문에 BEM 방식으로 수정해준다. -->
  <div class="btn primary"></div>
  <div class="btn success"></div>
  <div class="btn error"></div>

  <!--BEM 방식으로 수정-->
  <div class="btn btn--primary"></div>
  <div class="btn btn--success"></div>
  <div class="btn btn--error"></div>