html 기초 수업

230824

• html: 하이퍼텍스트 마크업 랭귀지로 웹문서의 구조를 담당한다. 페이지 전체의 콘텐츠를 감싸며 루트(root( 최상위 변수))요소 라고 한다.

• 빈요소 =빈태그=열린태그로 종료 태그 없음

• html 성격 : 크게 1-블럭 2-인라인 두가지로 볼 수 있다.

1. 제목태그 title

• 인라인 태그.
• <h1>~<h6> 제목 태그로 사용.
  • h1 태그: 문서의 메인 제목, 한 문서에 한번만 사용하는 것을 권장. 주로 로고에 사용한다.
    
  • h2~h6 태그: 제목 태그로 한 문서 안에 여러 번 사용 가능. 제목은 순서대로 사용하지 않아도 된다.
    태그가 갖고 있는 성격/의미에 따라 사용할 수 있다.

2. 문단태그 p

• 블록 태그.
• 블록 요소이나 문단 태그는 또 다른 블록 요소를 포함하지 않는다. 주로 인라인 요소에만 넣음.
• 문단을 나눌 때 사용. 문단으로 나눠 구분하기 때문에 행간이 넓게 보인다.(여백이 많은편)
• 문단은 하나 이상의 문장으로 구성되며 이야기의 독립적인 단위를 형성. 문단의 시작은 새로운 줄로 나타낸다.

3. 줄바꿈 br

• 빈 요소, 혹은 열린 태그로 종료 태그가 없다.
• 인라인 태그의 줄을 바꿀때 사용. 단순히 줄만 바뀌기 때문에 블록 태그에 비해 행간이 좁다.(여백이 좁은편)
• 인위적인 여백을 만들기 위해 사용하지 않으며 꼭 필요한 곳에만, 이 위치에 반드시 줄바꿈이 필요한 경우에만 사용한다.
• 반응형 웹에서는 br 태그를 이용해 줄바꿈을 하기 보다 span태그를 이용해 줄바꿈을 하는 편.

4. 강한 강조 태그 strong

• 인라인 요소
• 굵은 글씨로 일반적인 강조를 하는 효과를 준다.
• 논리적인 흐름에 맞게 구성해야하기 때문에 strong 안에 문단을 넣을 수 없다.

5. 일반 강조 em

• 인라인 요소

• 일반적인 강조의 의미로 사용

• 주로 기울여져서 표현

• 단순히 디자인을 위해 em을 사용하지 않는다.

• [참고]비슷한 태그

  • 강한 강조와 일반강조 초창기 요소로 현재 사용하지 않는다.
    • i태그: 이탤릭의 i. i는 단순 구분을 위해 사용.
    • b태그: bold의 b. b는 굵은 글씨를 표현.

6. 콘텐츠분할 div

• 가장 대표적인 블록요소
• 옛날부터 영역을 나눠줄때 사용하던 태그. 특별한 의미없이 나눠주고 싶을때 사용하기도 했다. id나 class 속성과 함께 사용하며, 단순히 레이아웃을 구성하기 위해 사용.
  • id : 유일한 성격을 가진 속성. id는 유일하게 단독으로 사용.
  • class : class는 어디든 사용할 수 있다.
• 구조를 나누기 위한 태그로 브라우저상에서는 특징이 없음
• 브라우저 화면에 나타나는 스타일이 없기 때문에 단순히 레이아웃을 구성하기 위해 사용.

7. 콘텐츠분할 span

• 가장 대표적인 인라인 요소

• 인라인으로 구조를 나누기 위한 태그로 브라우저 상에 나타나는 특징이 없음.

• 주로 다른 텍스트와 구분하고 싶지만 적절한 태그가 없을 때 사용.

• id, class 속성과 함께 사용.

• textEx.html_오늘 배운 내용 활용해보기

entity 요소 https://entitycode.com/
★유효성 검증 site https://validator.w3.org/
이 사이트에서 코드 작성시 유효성 검사 필수. 습관화 하기.

230825

• 인용의 출처<blockquote>: 인용 블록 요소
• <p> 태그 안에는 인라인 태그(input, image, a...등) 빼고 들어갈 수 없다.

1. 사용자정보 address

• 블록 요소.
• 사용자의 정보를 입력하는 태그.
• 연락처, url, 주소, sns, 사업자명, 사업자번호 등등

2. 순서 있는 목록 ol

• 블록 요소.
• 순서가 필요한 리스트에 사용한다.
• ol 안에 있는 li태그는 자동으로 순서가 적용된다.
• li와 반드시 함께 사용하며, 둘 중 하나만 사용할 수 없다.
• ol과 li 사이에는 다른 태그는 절대 올 수 없다.
  • ol의 자식으로 다른 태그가 올 수 없다.
  • li의 형제로 다른 태그가 올 수 없다.
• li태그 안에는 다양한 다른 태그들 작성 가능하다.

3. 순서 없는 목록 ul

• 블록 요소.
• 블릿 기호로 표기된다.
• li와 반드시 함께 사용하며 ul 안에 있는 li태그는 자동으로 블릿 기호가 적용된다.
• ul과 li 사이에는 다른 태그는 절대 올 수 없다.
  • ul의 자식으로 다른 태그가 올 수 없다.
  • li의 형제로 다른 태그가 올 수 없다.
• li태그 안에는 다양한 다른 태그들 작성 가능하다.

4. 정의형 목록 dl

• 블록 요소.

• 정의형 목록 태그로 용어의 정의, 설명, 참고문헌, 메타데이터 등 다양하게 사용 가능

• dl/dt/dd는 항상 같이 사용한다. dl안에서 dd없이 dt단독사용도 가능하다.

• 일부 os에서 dl의 정의가 다르기 때문에 접근성이 좋지 않음

  • dt : 항목의 제목, 용어 ..등등
  • dd : 위의 제목이나 용어의 설명을 작성하는 부분
    dd는 하나 이상 작성 가능

• listEx1.html_오늘 배운 내용 활용해보기

• listEx2.html_오늘 배운 내용 활용해보기

• 중첩 메뉴.html_오늘 배운 내용 활용해보기

230828

1. thml5 layout

• html5 기본 구성
  • 헤더
  • 메인컨텐츠
  • 푸터 - 바닥글
• 크게 3분할로 구성되어 있다.
• 코드 파일에서 자세히 확인하기.

2. 앵커 anchor

• href 속성을 이용하여 하이퍼 텍스트 설정

• 인라인 요소로 <p>태그를 이용하여 블럭설정하여 스타일을 주기도 한다.

• 임시 링크 기호 # 는 특별하게 주소를 작성 못하는 경우""는 빈칸으로 둘 수 없으며. 반드시 #를 이용하여 채운다. #는 a태그에서만 사용이 가능하다.

• URL이란?

: 특정 파일을 가리키는 주소 및 이름으로 URL은 세상에 하나만 존재하며 동일 URL이 두 개 이상의 데이터를 가리킬 수 는 없다.

3. 절대 경로

• 외부 사이트로의 이동시 사용
• 반드시 http:// 혹은 https://로 시작하는 주소로 작성

230829

4. 상대 경로

• 상대경로 : 내 도메인 안에서 돌아다닐 때 사용.

• 사이트의 내비게이션 =메뉴역할

• 현재 작업중인 문서 기준. 동일한 사이트 안에서의 이동 시 사용.(내부 이동)

• 상대경로는 2가지가 있다?

  • root 상대경로
  • 이름만 쓰는 상대경로

• 기준 문서

  • 기준 파일과 같은 위치에 있는 파일로 이동 : ./파일명.html (혹은 파일명.html 잘사용하지 않음.)
  • 기준 파일보다 하위에 있는 파일로 이동 : ./디렉토리명/파일명.html
  • 기준 파일보다 상위에 있는 파일로 이동 : ../파일명.html

• index.thml : 모든 웹 문서의 첫 페이지로 약속됨. 임의 변경 불가.
  다른 디렉토리에 동일한 index.thml를 사용할 수 있지만, 최상위 root 폴더 바로 아래 있는 index.html 문서만 첫페이지로 인식.
  

230830

1. 건너띄기 링크

* 특정 위치로 이동하는 태그

• anchor : 이동 태그
  • "#" 임시링크 기호
  • href="#title" 을 값으로 작성하면 동일한 이름을 가진 id 속성이 있는 태그 위치로 이동
    • ex) <a href="#title1">초판 바로가기</a>
  • 페이지 상단으로 이동하고자 할때
    • <a href="#top">맨위로 #top</a>
    • <a href="#">맨위로 #</a></p>

2. 서브페이지 연결

• <a href="./1_건너띄기링크.html">메인으로 돌아가기</a> ->메인 페이지 상단 이동
• <a href="./1_건너띄기링크.html#title5">메인의 제5판 바로가기</a> ->문단으로 바로 이동

3. 새창으로 열기

• 외부 사이트의 경우 target을 이용하여 꼭 새창으로 열기 해준다.
• a href태그 뒤에 target="_blank" 추가
• ex) <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/a" target="_blank">MDN 바로가기</a>

230831

1. 이미지 img

• 인라인 요소
• 빈 요소, 빈 태그로 종료 태그 없음
• src="이미지경로" alt="이미지 대체 텍스트" 로 구성
• alt의 경우 웹표준 기본이므로 곡 작성해야 한다.
• 컨텐츠로 분류되고 닫아주는 태그가 없음에도 범위를 가지며 가로 세로 값 조절이 가능하다.
• img 성격
  • 다른 인라인 요소와 만났을 때 하나의 글자, 단어처럼 인식된다.
• figure과 figcaotion
  • <figure> :이미지, 비디오 등의 컨텐츠를 구분할 때 사용.
  • 독립적인 컨텐츠. block요소.
  • <figcaotion> figure의 하위 요소로 부연 설명, 참조 태그. 반드시 figure 하위로만 존재.

2.표 만들기 table

• table tr th td는 함께 작성해야 표가 만들어짐.

  • <table> : 테이블 작성시 시작을 알리는 태그
  • <tr> : 테이블의 행(줄)
  • <th> : 테이블의 셀(칸), 셀의 소제목
  • <td> : 테이블의 셀(칸), 일반적인 셀

• 테이블을 만들때, 각 줄마다 칸의 갯수(셀의 수)를 통일해야한다.

• 테이블의 셀 크기는 다른 셀의 크기에 영향을 받는다.

• 테이블을 만들 때 큰 구조를 먼저 만든 뒤 컨텐츠를 넣는게 좋다.

• 표 소제목 th

  • 각 셀들에 대한 대표성을 띄는 요소로 td와 동일하게 셀(칸)을 만들어 준다.
  • 굵은 글씨로 표현된다.

• 열 병합 colspan

  • colspan=column(열 방향) + span 합성어
  • 뒤에 오는 셀(th, td)와 병합. 즉, 다른 열 colimn과 합침.
  • 병합한 뒤의 셀은 코드를 지워줘야 한다.
  • 지우지 않으면 셀의 숫자만 늘어나서 뒤로 밀림.

• 행 병합 rowspan

  • rowspan = row(행 방향) + span 합성어
  • 아래에 있는 셀(th, td)와 병합. 즉, 다른 행 row와 합침
  • 가장 상단의 열에 합하고 싶은 값을 입력한다.
  • 병합한 뒤의 행에 해당하는 열 코드를 지워줘야 한다.
  • 지우지 않으면 셀의 숫자만 늘어나서 뒤로 밀림.

3. 표 영역의 그룹화



• caption
  • table 전용 캡션
  • 표에 대한 설명
  • <caption>은 table 하위 요소로 반드시 table 요소와 함께 작성.
  • 단독 사용은 불가능
  • <h2>``<p>``<div>..등과 같은 태그를 table 자식으로 쓸 수 없다.
  • 테이블 요소와 관련 없는 태그는 자식으로 쓸 수 없음.
  • 캡션의 위치는 위나 아래 어디든 상관없을지도...?
• thead 표의 머릿말
• tbody 표의 본문
• tfoot 표의 바닥글
  • thead와 tfoot은 생략이 가능하다.
• 표의 영역을 그룹화하면 스타일을 주기 쉽고, 웹에서 인쇄를 하게될 때 고정한 상태로 함께 출력된다.

230901



• form 기본
  • form 관련 태그들 중 최상위 태그
  • 커뮤니케이션이 가능한 태그. 사용자끼리 피드백이 가능.
  • 폼 관련 태그들이 제대로 실행 되려면 form 태그를 반드시 작성 해야 함.
  • method="get" : 간단한 데이터 전송 시 사용. 데이터가 주소 입력란에 표시되므로 보안 유지 안됨.
  • method="post" : http 헤더에 숨겨져 서버로 전송. 일정 크기 이상의 데이터 전송 시 사용. 데이터가 주소 입력란에 표시되지 않아 보안 유지.
  • action="정보를 전송할 서버 주소"
  • get과 post의 차이는 주소창에 내용이 보여지는지, 보이지 않는지의 차이.



• input 태그
• 인라인 요소로 폼 안의 기본적인 필드 값을 만들 때 사용. 빈 요소
• input은 type 속성 값에 따라 역할이 달라짐.
  • name="데이터 이름"
  • maxlength="value의 최대 수(문자수)" ->설정값 이상 쓸 수 없음
  • minlength="value의 최소 수(문자수)" ->설정값 이하로 쓸 수 없음
  • placeholder="컨트롤 박스 안의 힌트" ->사용자 행동을 유도할 수 있도록 사용.
  • `required="필수항목. 단, form 태그가 반드시 정의되어 있어야 함"
  • value="입력값, 출력값, 전송값"
  • autofocus="자동 포커스"
  • checked="체크박스 자동 선택"
  • selected="select 옵션 자동 선택"
  • disabled="비활성화"
  • autofocus 자동으로 커서 생성
  • required 반드시 지켜야(작성해야) 하는 것. 안 쓰면 안넘어감.
  • submit 전송
  • reset 취소
  • button 버튼
  • value 내가 표시하고 싶은 값(이름) 작성한 내용으로 표현

MDN참조: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

• **폼 그룹화 fieldset**
• 같은 주제를 가지고 있는 폼 관련 요소를 그룹으로 묶어 구분지을 때 사용
  • legend : fieldset 요소의 제목 역할
  • fieldset 요소 안에 작성되어야 하며, 하나의 fieldset 안에 한번만 사용할 수 있다.



• 이름표 label
• 인라인 요소
• 폼과 관련된 요소에 이름표로 저장한다.
• label 요소를 정의함으로서 폼 요소와 연관 시킬 수 있다.
• 이름표 안에는 같이 묶음으로 보기 때문에 함께 동기화 된다.(이전에 사용자 입력 영역만 선택이 가능했다면, label로 묶여있는 내용 부분을 눌러도 선택이 가능하다.)
• 키보드를 통해 컨트롤이 가능하며 접근성이 향상된다.
• label 요소와 폼 요소를 따로 사용하는 방법도 가능하다.
• 이때, <input id="one">의 하나의 아이디 값과 <label for="one">의 for 값이 동일해야 연결 된다.
• label 태그를 사용한 텍스트 부분과 사용자 입력을 받는 input 소스가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다.

 

230904

1.video, audio 태그

• 웹 브라우저에서 플러그인 도움없이 재생
• 다양한 브라우저에서 재생될 수 있도록 하기 위해 source 태그를 사용
• 모던 브라우저에서는 video 태그만 작성해도 동작
• <video src="./video/flicker.mp4" autoplay muted loop controls poster="./video/flicker.jpg"></video>
  • ​video 속성들:
    • poster="대체 이미지. 영상을 불러오지 못하거나 불러오기 전에 보이는 이미지"
    • autoplay 자동재생(!크롬의 경우 단독 사용 불가. 반드시 음소거가 되어 있어야 실행)
    • muted 음소거
    • loop 반복
    • controls 컨트롤 바
    • preload 재생 전 파일 미리 불러옴. autoplay와 함께 사용되는 경우 적용 안됨
  • 오디오 태그는 요즘은 잘 사용하지 않는다.
  • <audio src="./video/flicker.mp3" autoplay loop></audio>

2.favicon 연결

• 'favorites + icon': 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.
• favicon.ico
• 상단 태그에 아이콘같은 모양=파비콘
• 가장 기본적인 파비콘 파일로 16X16 크기를 가짐.
• 일반적으로 파비콘 파일은 root 디렉토리 바로 아래 index.html 문서와 같은 위치에 둠
• favicon은 head 영역에 들어간다.

3.meta 태그

• '~에 대해서'라는 의미를 가진 단어로 해당 html 문서가 어떤 내용을 담고 있으며, 문서의 키워드, 작성자 등으 알려주는 웹페이지의 요약
• meta: 문서 레벨 메타데이터 요소
• 표준 메타데이터 이름
• meta는 head 영역에 들어간다.

참고 site: https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

4.오픈 그래프(Open Graph) 태그

• 인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다.
• 링크 공유시 이미지와 간략한 내용으로 미리보기가 가능하여 많이 사용되고 있다.
• 썸네일을 포함한 웹페이지 미리보기가 제공되기 때문에 대략적으로 이 페이지가 어떤 내용을 다루고 있는지 사용자가 쉽게 확인할 수 있고 이는 실제 페이지 이동까지 이어지기 쉽다.

참고 사이트 https://velog.io/@sweetpumpkin/Open-Graph-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0