오늘 배운 것
오늘은 학원에서 html 기본개념과 자주 사용되는 태그들, 커맨드 라인으로 git 사용하는 방법에 대해서 배우고
배운 태그들을 이용하여 실습을 하였다.
배운 것 정리
html은 웹문서를 만드는 언어이다.(웹 문서의 뼈대를 만드는)
1. html 구조 설명
가. html5문서는 반드시 <!DOCTYPE html>으로 시작하여 문서 형식을 html5로 지정
*실제적인 html문서는 2번째 행부터 시작 <html>과 </html> 사이에 작성
나. <head>와</head> 사이에는 <body>태그의 정보를 읽어 들이기 위한 정보가 존재
(제목, 저장 방식, 브라우저의 크기 등)
다. 웹 브라우저에 출력되는 모든 요소는 <body>와 </body>사이에 위치한다.
<head> </header> 태그
메타 데이터(데이터를 위한 데이터)를 포함하기 위한 태그
웹 페이지에 유일하게 존재
HTML 문서의 title, style, link, script, meta에 대한 데이터로 화면에 표시 되지 않음
title: HTML 문서의 제목
style: HTML 문서의 style 정보 정의
link: 외부 소스와의 연결 정보를 정의(css파일 연계에 사용)
script: javascript를 정의
meta: 페이지 설명, 키워드, 저자, 화면 크기 등의 정보. 주로 브라우저 또는 검색 엔진에서 사용
<body> </body> 태그
HTML 문서의 내용을 담는 태그
웹 페이지를 구성하는 대부분의 요소가 body 태그 내에 기술
2. HTML 기본 문법
1) 요소(Element)
HTML 요소는 여는 태그와 닫는 태그 사이에 위치한 내용으로 구성
2) 중첩(Nested)
중첩관계(부모자식 관계)로 웹페이지의 구조를 표현한다.
3) 빈 요소(Empty)
내용이 없는 요소(가질 수 없거나, 필요 X)
속성만 소유
<meta>, <br>, <hr>, <img>, <input>, <link> 등이 존재
4) 속성(Attribute)
속성이란 요소의 성질, 특징을 정의
속성은 요소에 추가적 정보(예: 이미지 파일의 경로, 크기 등)를 제공한다.
예: <img src="./cat.jpg" alt="고양이" />
3. 태그
0) 시멘틱 웹(Semantic Web)
태그 자체로 컨텐츠에 대한 의미를 명확하게 설명할 수 있는 것
개발자가 의도한 요소의 의미가 명확하게 나타남
header, footer, img, title 등
검색엔진이 웹 페이지를 검색 할 때, Semantic 요소를 검색
1) 제목 태그
<h1~6> </h1~6>
자동 줄 바꿈 됨
하나의 HTML 문서에는 하나의 h1 태그를 권장
웹 검색 엔진이 제일 먼저 검색하는 태그
2) 본문 태그
<p> </p>
본문을 적기 위한 태그
3) 줄 바꿈 태그
<br>
줄을 바꾸기 위한 태그
4)형식화 된 글자
<pre> </pre>
에디터에 쓴 대로 웹에서 표시됨
5) 목록
<ul> </ul>, <ol> </ol>
ul은 순서 없는 목록
ol은 순서 있는 목록
6) 수평줄
수평으로 된 줄을 그어 줌
7) 문자 꾸미기 태그들
<b></b>: 문자를 두껍게 함
<strong></strong>: 문자를 두껍게 함 + 시멘틱한 의미를 지님
<i></i>: 이탤릭
<em></em>: 강조
<del></del>: 중간 줄
<u></u>: 밑 줄
8) 그 외 태그들
가. 이미지 넣기
<img>
속성 값 중 하나인, src를 사용해 이미지를 지정
(파일을 직접 가져오기, 인터넷 주소에서 가져오기 등등)
이미지 로드가 안될 경우 alt속성으로 어떤 이미지인지 글자로 표시할 수 있음
나. 링크
<a></a>
링크된 페이지로 이동할 수 있게 하는 태그
속성값
href: 이동할 페이지의 링크
target: 링크된 문서를 열었을 때 문서가 열릴 위치 표시
다. 테이블
<table></table>
표를 만들 때 사용하는 태그
과거에 레이아웃을 구성할 때 사용했으나 기능상의 한계로 최근에는 공간 분할 태그인 <div></div>태그를 사용
먼저 행을 쓰고 행의 자식 요소로 칸을 넣어준다.
<table></table> : 표를 감싸는 태그
속성: border: 테두리 두께
<tr></tr>: 표 내부의 행
<th></th>: 표 내부의 제목 칸
<td></td>: 행 내부의 일반 칸
속성
colspan: 해당 칸이 점유하는 열의 수 지정
rowspan: 해당 칸이 점유하는 행의 수 지정
라. 선택 메뉴
<select></select>
선택메뉴(드롭 다운)를 만드는 태그
<select></select> : select폼 생성
속성
name: selet 박스의 이름
<option></option>: select폼의 옵션 값 생성
속성
value: 실제적으로 전달 되는 값
selected: 최초에 선택 된 값으로 설정
<optgroup></optgroup>: option을 그룹화
label: optgroup 이름 설정
disabled: 옵션은 보이지만 선택을 못하도록 설정
마. 입력 값 받기
<input>
type
type="button" : 버튼을 생성
type="text" : 텍스트를 입력 받는 폼을 생성
type="password" : 비밀번호 값을 받는 폼을 생성
type="checkbox" : 여러 선택지 중 여러개를 선택 가능한 체크 박스 생성
type="radio" : 여러 선택지 중 하나만 선택 가능한 라디오 버튼 생성
type="date" : 날짜(년/월/일)를 선택
type="datetime-local" : 시간까지 선택 가능
'코딩온(부트캠프 학원) - TIL' 카테고리의 다른 글
| 22.06.28- 포스코인재창조원 교육 2일차 (0) | 2022.06.28 |
|---|---|
| 22.06.27-포스코인재창조원 교육 1일차 (0) | 2022.06.28 |
| 내일부터 포스코인재창조원 교육 (0) | 2022.06.26 |
| 22.06.17- TIL (0) | 2022.06.17 |
| 내일부터 학원 교육 시작! (0) | 2022.06.14 |