HTML이란?
- Hyper Text Markup Language의 약자로 , 웹 페이지를 만드는 언어이다.
1)HTML의 구조
강의를 들으며 실습한 코드를 따온 것인데, 위에서 보다시피 기본적으로 DOCTYPE, HTML,HEAD,BODY로 구성되어 있다.
2)태그 구조
위와 같이 이루어져있는데, 태그 사이에 콘텐츠를 넣어주어 사용한다.
3) 글꼴 태그
글꼴 태그에는 정말 다양한 태그들이 있는데, 기억에 남는 두 내용만 정리하자면
<b>/<strong>태그의 차이와 <i>/<em>태그의 차이이다.
<b>와 <i>는 각각 단지 글씨를 굵게 해주고 이탤릭채로 기울이게 해주는 태그이지만?
<strong>과 <em> 태그는 '정말 강조하고싶은 내용이 있을 때' 사용하는 태그로써 사용하여
만약 시각장애인이신 분이 웹을 읽어주는 프로그램을 사용해 웹 문서의 내용을 청각적으로 듣게 된다면 <strong>과 <em>태그로 묶여있는 문장은 억양이나 톤등을 더 강하게 해서 읽어준다고 한다. <b>와 <i>보다는 <strong>과 <em>을 적재적소에 활용해주는 것이 좋겠다 ^~^
4) 목록 태그
목록 태그는 목록에 대한 내용을 사전처럼 정의 해주는 <dl>태그, 순서를 매겨 정렬하는 <ol>태그, 순서에 상관없이 정렬하는 <ul>태그가 있고, <dl>태그는 <dd>,<dt>와 함께 사용하고, <ol>과 <ul>태그는 <li>태그와 함께 사용한다.
4-1) <dl>
<dl>태그는 반드시 하나 이상의 <dd> <dt>태그 쌍을 갖고 있어야 하는데, <dd>태그는 용어에 대한 설명, <dt> 태그는 용어의 이름을 가리키는데 이때 <dd> <dt>태그는 1대1 대응이 되지 않아도 된다. 다대일, 일대다대응이 되어도 오류가 나지 않는다 ! 이렇게 <dd> <dt>태그를 사용해 문서를 작성하면 <dd>태그로 묶인 문장이 들여쓰기가 되어 웹 상에 나타난다
4-2)<ol>과 <ul>
<ol>은 ordered list의 준말로, <li>태그와 함께 사용하는데 <ol> 태그 안에 <li>태그로 묶인 항목들은 웹 문서상에서 넘버링되어(숫자를 매겨서) 표시되게 된다. 이때 이 매겨지는 숫자는 속성을 주면 다양한 변경이 가능하게 된다.
반면에 <ul>은 사실 약자는 잘 모르겠고 (아마 unordered? 일 것 같은데 굳이 찾아보고 싶지는 않다) <ul>태그 안에 <li>태그로 묶인 항목들은 숫자를 매기지 않고, •로 정렬되어 나타난다 ! 이 • 기호도 속성을 주면 다양한 변경이 가능하다 ^__^
5) 표 태그
아아패드에서 이미지를 따와서 조금 줄였더니.. 화질이 엉망입니다 ㅋ ㅋ
표 태그에서 중요하게 알아야 할 태그들에는
<caption> 표의 제목이나 설명을 작성하는 태그
<tr> 표의 행을 의미하는 태그.
<th> 표의 제목 열을 의미하는 태그.
<td> 표의 일반 열을 의미하는 태그.
정도가 있는데 ! 직접 적용을 해보니 <th>태그는 적용 했을 경우에 글씨가 굵게 표시가 되어 있어서
뚜렷하게 차이점을 알 수 있었다 .
6)semantic 태그
semantic 태그에는 크게
- header
- nav
- main
- footer
태그가 있는데 아까 서문에서 다룬 HTML의 구조에서 각 영역이 나누어져 있는 것처럼, 사용자가 알기 쉽게
각 영역을 정의하는 태그들이다.
사실 이때부터 실습 하느라 강의 내용을 잘 듣지 못하고 정신이 어느정도 팔려있었는데, 내가 직접 시맨틱 태그를 사용하며 알게 된 시맨틱 태그의 이점은 정말 사용자가 알기 쉽게 코드가 나뉘어져 있어 가독성이 훌륭하다는 것이었다.
따라서 용도에 맞게 ! 시맨틱 태그를 이용해야 함을 알게 되었다.
7) div와 span의 차이
div는 division의 약자로 어떠한 영역을 담는 컨테이너 역할을 수행하는 태그이다.
div와 style에 각각 스타일을 적용시켜 웹으로 나타내
보니, span은 딱 컨텐츠 영역만 꾸며주는데 비해
div는 박스로 컨텐츠를 꾸며줌을 알게 되었다.
모든 태그는 초기 디스플레이값을 갖는데
그 값에 따라서 차지하는 영역이다름을 알게 되었다.
7 -1) Block vs Inline
Block : 전체 공간을 차지하는 디스플레이 값
한칸을 모두 차지하기 때문에 '세로'로 나열됨
width, height, margin이 적용됨
-가로 세로크기 조절 가능
Inline: 태그에 할당된 공간만 차지하는 디스플레이 값
콘텐츠 영역만큼 차이나기 때문에 가로로 나열됨
margin-top, margin-bottom 은 적용되지 않음
width, height 적용 불가
-가로 세로 크기 적용 불가
디스플레이 값을 변경하면 ex) display : inline Block과 inline의 상호 변경이 가능하므로 이 점 유의해두면 좋을 것 같당
8)이미지, 비디오, 오디오 태그
핵심적인 내용만 정리하면
- <img> 태그를 사용할 땐 src 속성을 필수로 사용해 주어야 한다.
- alt 속성을 사용하면 alt의 값을 읽어 사용자에게 설명한다.
- <a> 태그
href를 이용하여 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소나 그 외 다른 URL 로 연결할수 있는 하이퍼링크를 만든다 - target="_blank"로 새창에서 열 수 있음
9) form 태그
사용자가 정보를 입력하는 방식 양식을 정의하는 구획태그로서, 웹에서 사용자의 정보를 입력받기위해 사용한다
Ex)로그인, 회원가입, 게시판 글쓰기 등
아래는 알아두면 유익할 form 데이터 태그 속성이다 !
- form 데이터 태그 속성
- required 입력값이 있는지 없는지 체크
- readonly 데이터 수정 불가. 서버로 전송
- disabled 수정 불가 및 서버로 전송 X
- placeholder 칸이 비어있을때 입력값의 설명 및 가이드 문구 작성 가능
10) input
사용자의 입력을 받을 수 있는 태그이다.
label
입력받는 필드를 설명할 때 사용함
이 외에도 type 속성을 주거나 input을 받는 여러가지 방법이 있다.
11) 진짜진짜 마지막 head 태그
<head>태그는 문서의 정보를 담고 있는 태그이다.
크게 Title Base Link가 있고,
타이틀은 문서 제목을 정의하며
베이스는 문서안의 모든 상대 URL이 사용할 기준 URL 지정한다.(상대 경로를 지정해주었을 때 이용하는데 편리함)
링크는 현재 문서와 외부 리소스의 관계를 명시한다.
블로그를 마치며
원래 정말 필기두 많이했고 조금 열심히 했어서 열심히 블로그를 해보려고 했는데 !
너무 의욕이 과한 탓이었는지
어떤 내용을 넣을까 하다가 그만 시간이 다 가버렸다 ..
1주차 많이 늦어서 죄송합니다 ㅠㅠ 그치만 주인공은 마지막에 등장하니까요
다음주부터는 어떻게 블로그에 배운 내용을 정리할지 심사숙고해서 양질의 포스팅 할 수 있도록 하겠습니다 !
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 기초 스터디] 최종은 #2주차 - CSS알아가기 (0) | 2023.04.12 |
|---|---|
| [2023 신입부원 기초 스터디] 박민규 #1주차 - 기초부터 확실히! (태그정리) (0) | 2023.04.07 |
| [2023 신입부원 기초 스터디] 최종은 #1주차 - HTML알아가기 (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 박승환 #1주차 - 웹 씨앗을 심었다!(HTML 배우기) (1) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 정찬우 #1주차 - HTML은 즐거워...?? (0) | 2023.04.06 |
