웹 프로그래밍[1] - html

📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다. 

 

 

인터렉티브 UI/UX

 

👀 UI 

• 사용자가 특정 콘텐츠를 이용할 때 만나는 접점으로 사용자 환경을 의미한다. 
• 웹 페이지 상단의 로고와 메뉴, 배너와 이미지 섬네일 등을 의미한다. 

 

👀 UX

• 사용자가 특정 콘텐츠를 사용할 때 UI 에서 느낄 수 있는 사용자 경험을 의미한다. 
• 특정한 UI 를 이용해 콘텐츠를 사용할 때 느끼는 모든 사용자 경험을 일컷는다. 

 

👀 인터렉티브 UI/UX

• 사용자와 상호작용하는 여러 모션과 동적인 콘텐츠를 사용하는 환경 
• 웹과 모바일 기술이 발전하면서 인터렉티브 UI/UX 도 웹 디자인의 중요 영역으로 자리잡음 👉 트렌드에 민감한 사용자의 시선을 끌어서 콘텐츠 소비를 이끌어내는 것이 현재 웹 개발의 최대 관심사가됨 

 

👀 html, css, 자바스크립트의 역할 

• html : 웹 페이지의 뼈대와 문서의 정보를 구현하는 것 
• css : 뼈대만 있어 밋밋한 웹 페이지를 보기 좋게 디자인 
• 자바스크립트는 웹 페이지를 방문한 사용자가 편하게 이용할 수 있도록 웹에 다양한 기능을 부여 

 

 

 

비주얼스튜디오 코드로 html 파일 생성하기 

 

🔹 바탕화면에 빈 폴더 생성 → 에디터에서 File → Open Folder 로 생성한 폴더 불러오기 

🔹 에디터 왼쪽의 빈 영역에 마우스 오른쪽 버튼 → New File → 파일 이름 '이름명.html' 로 작성

🔹 빈 문서 코드창에 html:5 를 입력하고 엔터를 누르면 기본 html 코드가 자동 완성됨 

🔹 한국어를 입력할 것이므로 lang = 'ko' 로 변경 

 

 

• !DOCTYPE : 문서의 유형을 지정해줌 
• head tag : 웹 문서에 필요한 외부 파일과 옵션을 설정하는 공간 
  • meta tag - charset : 문서의 인코딩 방식을 지정. 세계 표준 인코딩 방식인 UTF-8 로 지정을해야 다른 나라에서 우리나라 웹페이지를 볼 때 글자가 깨지지 않게됨 
  • meta tag - content : IE=edge 익스플로러의 버전을 정의 
  • meta tage - name : viewport 브라우저, 디바이스 종류별로 화면에 출력하는 방식을 지정 (반응형 웹 - 웹용/모바일용)
  • title tag : 문서의 제목을 나타냄. 브라우저 상단의 tab 부분에 입력한 웹페이지 제목이 출력이 된다. 

 

title tag 가 구현되는 부분

 

• body tag : 웹 브라우저에 내용을 출력하는 공간 

 

 

 

 

Tag 의 종류

 

🔶 <tag> 내용 </tag> : 여는 태그와 닫는 태그가 존재 

 

🔶 부모 태그와 자식 태그 

• 부모태그 : 아래의 그림에선 head 
• 자식태그 : 아래의 그림에선 head 태그 안쪽에 위치한 태그들에 해당 

 

 

 

시맨틱 태그

 

📌 tip : 태그 여러개를 한꺼번에 만들고 싶으면 li*3 처럼 해당 태그에 곱하기 * 숫자 를 해주면 된다. 

 

 

🔶 시맨틱 태그 

• 웹 페이지를 만들때 HTML5 의 시맨틱 태그를 이용해 영역을 나눠서 기본 구조를 정한다. 
• 영역의 목적에 맞게 화면을 구분해주는 태그 

 

시맨틱 태그의 종류

 

화면상의 구현 예시

 

실제 html 코드 태그 구조

 

 

 

 

서식태그

 

🔶 서식태그 

• 문서에서 글자를 채울 때 사용하는 태그들 

 

서식 태그 종류

 

🔶 block 과 inline

• block : 콘텐츠를 그룹화시켜 주거나 영역을 나누어주는 태그 
• inline : 특정 글에서 단어의 기능을 붙이거나 특정 부분을 꾸며주는 태그 (한줄 단위로 처리) 

 

🔶 p 태그와 br 태그

• <p> : 문단 단위로 줄바꿈이 이루어짐 
• <br> : 하나의 줄만 줄바꿈 

 

 

🔶 h1, h2 .. h6 제목태그 

 

h$*6 을 입력하면 달러표시에 숫자가 들어가면서 자동으로 태그를 완성시켜줌 

 

 

 

🔶 p 태그 

 

• 문단에 들어갈 내용을 입력한다. 
• <p>lorem</p> 👉 자동으로 하나의 분단의 텍스트 완성을 해줌. 만약 등장할 단어의 개수를 직접 지정하려면 loremN (N은 숫자) 를 지정해주면 됨 

 

 

🔶 div 태그 

 

• 특정 영역을 그룹화, 화면분할 기능
• div 태그 편하게 지정 : 그룹화시킬 영역을 드래그 한 다음 Ctrl + i 를 누르면 자동으로 div tag가 감싸짐 

 

 

🔶 strong, em 태그

 

• 특정 영역을 강조해주는 태그 
• strong : 굵은 글씨체, em : 이탈리어 
• (청각적 활용) 시각장애인 분들이 웹 문서를 스크린 리더기로 귀로 들었을 때, 강조한 태그 부분은 강조되어 들을 수 있음 

 

 

 

🔶 a 태그 

 

• <a href = '웹 페이지 주소'> 링크 이름 </a> 
• href 는 태그 안에 들어가는 속성값에 해당한다. 
• 버튼을 누를때 같은 탭에서 페이지가 이동하지 않고, 기존 탭은 유지하면서 새로운 탭을 열어서 링크를 이동하고 싶으면 <a href = '웹 페이지 주소'  target = 'blank'> 링크 이름 </a> 와 같이 target 속성을 추가하면 된다. 

 

 

 

 

🔶 span 태그 

 

• 인라인 태그를 넣어 그룹화 
• <div> 태그는 모든 요소 (블록, 인라인 요소 상관없이) 를 그룹화할 수 있지만 <span> 태그는 인라인 요소만 그룹화한다. 

 

 

🔶 img 태그 

 

• <img src = '이미지 경로' alt = '이미지 설명' /> 
• alt 의 기능 : 역시 시각적으로 이미지를 볼 수 없는 경우를 위해, (청각적으로 듣는 경우를 위해) 설정한다. 
• 닫는 태그가 없다. 
• 이미지 경로 
  • 절대경로 : 파일이 존재하는 컴퓨터의 위치를 모두 작성
  • 상대경로 : 현재 위치에 바로 있거나 주변에 있음 

 

 

🔶 br 태그 

 

• <br/> 줄바꿈 태그 : 줄바꿈 하고 싶은 내용 뒤에 넣어서 작용한다. 
• 줄바꿈을 여러번하고 싶으면 여러번 이어 적으면 된다.

 

 

 

🔶 ul, li 태그 

 

• ul : 부모태그, 순서가 없는 목록 
• li : 자식태그

 

 

 

🔶 ol, li 태그 

 

• ol : 부모태그, 순서가 있는 목록  
• li : 자식태그

 

🔶 dl, dt, dd 태그 

 

• dl : 부모태그, 정의형 목록 
• dt : 자식태그, 정의할 제목
• dd : 자식태그, 정의할 내용 👉 자동으로 들여쓰기 

 

 

 

🔶 중첩된 목록 

 

 

 

🔶 input 태그 

 

• <label> input 요소의 제목 </label> 
• <input type = "   " > 
• type 속성에 따라 input 기능을 변경한다. 
• 백앤드 개발시에는 label 의 for 속성과 input 의 id 속성을 아래와 같이 사용한다. 

 

 

1. type = 'text' 속성 - text 입력받기 

 

 

 

2. type = 'password' 속성 - 비밀번호 입력받기 

 

입력된 비밀번호는 쿠키에 저장하지 않는다.

 

 

3. type = 'checkbox' 속성 - 체크박스 선택하기 

 

⭐ 다중선택이 가능

 

• value 속성은 어떤 것을 선택했는지 저장하기 위한 파라미터로, 나중에 선택된 값이 웹서버로 전송된다. 

 

4. type = 'radio'  속성 - 라디오 박스 선택하기 

 

⭐ 단일 선택만 가능

 

• name 속성 :  단일 선택으로 처리되게 하려면 각 요소의 name 값을 동일하게 설정해주어야 한다. 

 

 

5. type = 'file' 속성 - 파일 첨부하기 

 

 

6. type = 'color' 속성 - 색상값 선택하기 

 

 

7. type = 'date' 속성 - 날짜 선택하기 

 

 

 

 

 

8. type = 'submit' , type = 'reset' 속성 - 전송버튼과 초기화 버튼 

 

 

• 버튼만 가지고 전송되진 않고 바깥에 <form> 태그로 감싸주어야 한다. 그래야 input 안에있는 값들이 웹서버로 전송되거나 input 안에 있는 값을 초기화할 수 있다. 

 

 

 

🔶 select 태그 

 

• select , option 태그 

 

 

 

🔶 textarea

 

• 긴 텍스트를 입력받는 기능 

 

 

🔶 form 

 

 

• 프론트엔드 , 백엔드 

 

 

◽ 속성값 종류 

• action : 폼을 전송할 서버 쪽 스크립트 파일을 저장 (ex. 자바스크립트) 
• name : 폼을 식별하기 위한 이름을 저장 
• accept-charset : 폼 전송에 사용할 문자 인코딩을 지정한다. 
• target : action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정한다. 
• method : 폼을 서버에 전송할 http 메소드를 정한다. GET 또는 POST 

 

 

◽ GET 과 POST 

 

◾ GET

• GET 방식은 URL 에 전송할 데이터의 파라미터를 붙여서 서버로 보낸다. 
• GET 방식은 내가 선택하거나 입력한 데이터가 URL 에 직접적으로 나타나 전송된다. 
• 전송가능한 데이터의 양이 제한적이나, 처리속도는 빠르다. 

 

no=20217742 가 붙은 것을 볼 수 있다.

 

 

◾ POST

• POST 방식은 GET 방식과 달리 URL 에 파라미터를 담지 않고 데이터를 http 메세지의 body 에 담아 전송한다. 
• 클라이언트 쪽에서 데이터를 볼 수 있어서 보안상 안전하진 않다 (GET 도 보안은 취약) 
• POST 방식은 body 에 데이터를 넣어 전송하기 때문에 body 데이터를 설명하는 content type 이라는 헤더 필드가 들어가며 어떤 데이터 타입인지 설명해주어야 한다. 

 

 

 

🔶 멀티미디어 콘텐츠 - audio

 

 

◾  scr : 파일위치 속성 

• 절대위치 : C:\user\A\desktop ... 
• 상대위치 : /img/...jpg 👉 실행파일 내에 디렉토리를 저장 

 

◾  여러가지 audio 속성 

 

controls	오디오 파일을 재생하는 컨트롤 패널 생성 (재생 패널이 보이기 위해서 필수적으로 입력해야함)
autoplay	웹페이지를 열면 오디오 파일을 자동으로 재생
loop	오디오 파일을 무한 반복하여 재생
preload	오디오 파일을 재생하기 전에 파일을 미리 불러옴

 

 

• 스트리밍방식 : 스트리밍 방식이란 파일이 큰 경우, 서버에서 데이터를 받자마자 플레이하는 방식으로 전체 데이터를 다운받아 실행하는 방식과 차이를 보인다. 

 

 

 

🔶 멀티미디어 콘텐츠 - video

 

 

 

controls	동영상 파일을 재생하는 컨트롤 패널 생성 (재생 패널이 화면에 보이기 위해 필수적으로 입력해야함)
autoplay	웹페이지를 열면 동영상 파일을 자동으로 재생
loop	동영상 파일을 무한 반복하여 재생
preload	동영상 파일을 재생하기 전에 모든 파일을 미리 불러옴
muted	동영상에서 소리가 나지 않도록 함
poster	동영상 플레이어 초기 화면에 보여줄 이미지를 생성