React를 공부하다가 HTML, CSS가 부족하다는걸 느껴 기초를 제대로 다져보려한다. 역시 뭐든 기초가 튼튼해야한다. 이걸 간과해서 삽질하는 시간이 너무 많다.
결국 기초를 제대로 잡고 싶어서 결국 김버그님의 강의를 듣게 되었다.
이 글은 내가 보기 위한 글이라 나만 알아보기 편하게 쓴 글이다.
<hn>
Heading tag라고 하며, h1부터 h6까지 있다. 주로 제목을 나타낼 때 사용한다.
<p>
Pagagraph tag이다. 즉, 단락(문단)을 나타낼 때 사용한다.
Emphasis
강조를 할 때 사용하며, <em>과 <strong> 태그가 있다.
브라우저에게 강조한다는 것을 알릴 수 있다.
<em>는 강조할 때 기울임 꼴로 표시되며
<strong>은 진하게 표시된다.
<b>도 있는데 볼드 처리가 된다.
<br>
줄바꿈을 할 때 사용한다.
링크 Anchor
<a> 태그가 있는데, 이는 꼭 속성을 넣어주어야 한다. 어떤 속성일까.
<a href="#">이다. href를 꼭 넣어주어야 한다. href는 hypertext reference를 뜻한다.
다른 사이트나 html 파일로 이동도 가능하지만 <a href="#hello"> 등으로 href 안에 html 태그의 id 값을 입력해주어 페이지 내 이동도 가능하다.
메일 보내기
<a href="mailto:메일주소">와 같이 작성하면 Anchor 태그를 클릭하였을 때 해당 메일 주소로 바로 메일을 보낼 수 있다.
전화 걸기 (모바일 환경)
<a href="tel:전화번호"> 전화번호를 클릭하면 바로 전화 가능
target="_blank"
이 속성을 사용하면 New Tab이 열린다.
<img src="#" alt="" />
이미지를 넣을 때 사용한다. src에는 내가 원하는 이미지의 경로(주소값)을 넣어주면 된다.
그럼 alt는 뭘까? alternative text 대체 텍스트이다. 만약 네트워크 통신이 제대로 이루어지지 않아 이미지가 엑박 뜬다면 사용자 입장에선 뭐지 싶을거다. 그때 나타나게 되는데, 이 이미지가 무얼 뜻하는지 대체로 텍스트가 나오는 것이다.
리스트
리스트에는 두 가지 종류가 있는데 <ol>과 <ul> 이다.
<ol> 태그는 순서가 중요한 목록에 대해 사용한다.
<ul> 태그는 순서가 중요치 않은 목록에 대해 사용한다.
<li>는 list item의 약자로, 위의 두 태그 안에 자식 태그로 요소를 넣을 때 사용한다.
정의 목록 <dl>
용어를 정의할 때 사용한다. 혹은 key-value로 정보를 제공할 때 사용한다.
<dl> 태그의 자식으로 <dt>와 <dd>가 있는데, <dt>는 key를, <dd>에는 value를 넣으면 된다.
<dt>를 사용했으면 바로 뒤에 <dd>로 설명을 해주어야 한다.
<div>
웹 개발을 하다 보면 <div>를 굉장히 많이 볼 수 있는데 딱히 의미는 없다. 그룹핑을 해주는 것이라고 생각하면 된다.
<span>
<div>와 마찬가지로 <span>도 딱히 의미는 없다. <div>는 block 형태고, <span>은 inline이라는 차이 정도?
인용
말 그대로 인용구를 쓰고 싶을 때 사용한다.
<blockquote>와 <q> tag가 있다.
<cite>를 사용하면 출처를 함께 적을 수 있다.
<blockquote>는 인용구 전체를 가져올 때 쓰면 되고,
<q>는 단락 중간에 인용을 표시할 때 사용한다.
Form
사용자로부터 input을 통해 값을 받아올 수 있다.
Form에는 action="#" 값이 꼭 있어야 한다. 또한, method 값이 있어야 한다.
Label
폼 양식에 이름을 붙이는 태그
라벨을 사용할 때에는 어떤 input에 관련된 라벨인지 명시해 주어야 한다.
즉, for=""을 사용하여 명시해 주어야 한다. for의 값에는 input의 id를 넣어주어야 한다.
<input>의 id와 <label>의 for 값을 같게 설정하면, label을 클릭했을 때, 자동으로 매칭되어 그에 맞는 input이 focus된다.
<input />
<input> 태그는 사용자로부터 무언가를 받을 수 있는데, type="?"이 무조건 들어가야 한다.
-
placeholder -
minlength: input의 최소 길이 설정 -
maxlength: input의 최대 길이 설정 -
required: 필수적으로 입력해야 하는 태그 설정 -
value: placeholder말고 실질적으로 들어가는 값. -
radio: 선택지 중 하나만 선택 가능 -
checkbox: 선택지 중 여러개 선택 가능
- 위의 두 타입을 이용하여 만들 때에는name=""이라는 속성도 추가해 주어야 함.
name은 각 항목들을 그룹화 시킴.
또한,value도 넣어주어야 함.value는 submit 됐을 때, 선택한 값을 식별할 수 있는 값을 뜻함.
<select>
select는 드롭다운 메뉴가 나온다. <select>의 자식 태그로는 <option>이 들어간다.
<select>에는 name 속성이, <option>에는 <value> 속성이 필수다.
<Textarea>
<textarea>에도 위와 같은 속성들을 사용할 수 있다.
Buttons
Button에는 type=""을 꼭 넣어주어야 한다.
type="button": 버튼은 버튼이다. ...?type="submit": form을 제출할 때 사용type="reset": form을 리셋하고 싶을 때 사용
<table>
말 그대로 table (표)를 만들 때 사용한다. 조금 찾아보니 table 태그를 싫어하는 개발자가 많다는 것을 알았다. 왜냐? 스타일을 하거나, 반응형을 만들 때 힘들다고 한다.
<table> 의 자식 태그로는 <tr> (Table row) 태그가 들어가고, 이 태그 자식으로는 <th> (Table Header) 태그가 들어간다.
<tr>은 행, <th>는 열을 뜻한다.
<td> 태그도 있는데, 이 태그는 Table Data를 뜻한다.
<th>를 사용할 때에는 <thead> 태그로 확실하게 헤더라는 것을 알려주는 것도 좋다.
그 밑에는 <tbody>로 묶는 것이 좋다.
미디어 파일
<audio><video>
-<iframe>
