neda의 블로그

의 기본적인 사용 방법 비디오 재생이 되지 않으면 보이는 대체 텍스트입니다. HTML 삽입 미리보기할 수 없는 소스 브라우저에 따라 지원하는 동영상 지원 형식이 다르므로 그에 맞는 형식의 동영상, 오디오가 필요하다 이를 위해 미디어 컨테이너에는 동영상, 오디오 트랙의 구조에 대한 메타 데이터 정보, 미디어에 대한 메타데이터, 코덱 정보를 가진다. 내에 다양한 요소를 넣어두면 브라우저는 지원하는 코덱이 있는 요소를 재생한다. 비디오 재생이 되지 않으면 보이는 대체 텍스트입니다. HTML 삽입 미리보기할 수 없는 소스 속성 autoplay : 로드되면 바로 재생을 시작 loop : 끝까지 재생된 후 자동으로 다시 재생 muted : 초기 사운드 상태를 꺼진 상태로 지정 poster : 동영상 재생 전 이미지..

사용법 : 를 이용하여 이미지 표시하기 예시) HTML 삽입 미리보기할 수 없는 소스 대체 텍스트 : 대체 텍스트는 이미지를 표시할 수 없거나(엑스박스) 불러오는데 오래 걸리는 경우 이미지 대신 텍스트를 띄운다. 다양한 이유로 이미지 렌더링이 안되는 상황에서 대체 텍스트를 이용하면 이미지를 보지 않더라도 이미지에 대한 사용 가능한 경험을 제공한다. 시각 장애인의 화면 리더기 사용시 파일 자체나 파일 경로가 잘못될 경우 브라우저가 이미지를 지원하지 않을 경우 검색 엔진에 텍스트 제공 사용자가 임의로 브라우저의 이미지 표시를 끈 경우 이미지가 단지 화면을 꾸미는 용도인 경우 스크린 리더기에 alt=""를 제공하여 불필요한 시간 낭비 방지 사용자가 텍스트 전용 브라우저를 사용 하는 경우 예시) 이미지의 주소를..

문서의 문자 인코딩 방식 지정 검색 엔진 최적화(SEO)를 위한 문서 작성자와 설명 Facebook의 Open Graph 프로토콜 (https://ogp.me/) 웹페이지를 북마크하거나 sns을 통해 페이지를 공유할 때 웹 페이지에 대한 간략한 제목이나 설명, 이미지 등을 지정할 수 있다. 특정 사이트에서만 사용이 가능하다. 대표적인 og를 이용한 메타데이터들 og:title og:description og:type og:image og:url 파비콘 즐겨찾기를 할 때 웹페이지의 아이콘으로 저장되는 이미지

웹이 동작하는 과정 DNS를 통해 웹 서버의 ip를 찾아 그 곳에 요청을 보내고 응답을 받는 것이다. 사용자가 브라우저에 url을 입력 인터넷을 통해 url을 dns에 전송 dns는 브라우저에 url에 해당하는 실제 ip주소를 반환 브라우저는 실제 ip 주소를 통해 웹 서버에 접속하여 웹페이지 요청 브라우저는 받은 웹페이지를 화면에 표현 HTML 파서 동작 과정 가장 먼저 HTML 파일을 분석 와 를 통해 외부 참조 인식하고 서버로 요청 파싱된 HTML을 인메모리 DOM(Document Object Model)트리로 생성 파싱된 CSS을 인메모리 CSSOM(CSS Object Model)트리로 생성 파싱된 JavaScript를 컴파일하고 실행 DOM, CSSOM, JavaScript이 모두 준비되면 웹페..

자바스크립트는 웹사이트의 더 나은 상호작용을 위한 프로그래밍 언어이다. 처음에는 알림을 띄우는 매우 단순한 기능들이 있었지만 현재는 Adobe Flash나 Active X 등을 대체하고 백 엔드와 프론트 엔트 전반에 걸쳐 두루 사용되고 있다. 이름은 JavaScript지만 Java는 전혀 상관이 없는 언어이다. 사용하기 위해서는 태그 내에 스크립트를 포함하거나 .js파일을 불러온다. ... JavaScript의 타입 원시 값 객체를 제외한 모든 타입의 값으로 불변 Boolean 타입 true와 false 둘 중 하나의 값을 가지는 논리 값 let bool_on = true; Null 타입 null 값만을 가짐. let a = null; Undefined 타입 undefined 값만을 가지며, 값이 할당되..

CSS(Cascading Style Sheets)는 이름 처럼 웹 사이트의 스타일을 지정하기 위한 코드이다. Cascading 의 의미처럼 종속적이고 상위->하위로 폭포가 흐르듯이 스타일이 지정된다. 특정 요소의 스타일을 지정 뿐만 아니라 하위 요소에 대해서, 형제 요소에 대해서 지정할 수도 있다. 기본적으로 css는 head태그 내에 로 포함될 수 있으며, 독립적인 파일로서 style.css처럼 저장될 수도 있다.파일의 경우 내에서 태그를 통해 불러올 수 있다. p { color: red; } HTML 삽입 미리보기할 수 없는 소스 CSS의 구조 먼저 선택할 태그 이름 또는 id, class 이름 등을 selector로서 적고 속성과 속성값을 콜론(:)으로 구분하여 중괄호로 감싼다. 각 속성값 선언의 ..

HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)은 웹 페이지를 만들기 위한 언어이다. 마크업 언어란 보통 태그를 이용하여 문서나 데이터 등의 구조를 명기하는 언어이다. HTML은 요소(Element) 단위로 구성되며, 요소는 3가지로 이루어 진다. 여는 태그(Opening tag) 닫는 태그(Closing tag) 내용(Content) Nesting 요소는 다른 요소 안에 중첩(Nesting)될 수 있으며, 포함될 요소의 전체를 다른 요소의 내용에 넣어야 한다. Empty 모든 요소가 내용을 가지지는 않으며, 내용이 필수적이지 않는 요소도 있다. 이 때는 닫는 태그가 필수는 아니다. HTML 문서 구조 Line 1: 문서 형식을 html로 선언 Line 2 ~ 12 :..

웹사이트 파일 구조 웹사이트를 구성하는 파일은 html, css, javascript, images 등이 있다. index.html : 웹사이트의 최상위의 기본이 되는 파일 images 폴더 또는 resources 폴더 : 이미지 파일 저장 styles 폴더 : css 파일 저장 scripts 폴더 : javascript 파일 저장 웹사이트 파일 이름 많은 서버는 대소문자를 구분한다. myimage.jpg ≠ MyImage.jpg 공백은 브라우저, 서버, 프로그래밍 언어에 따라 다르게 처리될 수 있다. 따라서 공백이나 언더바(_) 보다는 하이픈(-)을 사용하여 파일 이름을 작성하여야 한다. my_image.jpg (X) / my image.jpg (X) / my-image.jpg (O) 따라서 파일 이름..

1. 계획하기 무엇에 대한 웹사이트인가? 무엇에 대해 어떤 정보를 제공하는가? 2. 디자인하기 대략적인 레이아웃을 구상하기 3. 에셋 선택하기 제공해야 할 텍스트, 이미지, 영상 등의 정보 디자인을 위한 테마 색상 -> 색상 선택을 위한 색상 선택기 디자인을 위한 글꼴 -> 구글 글꼴

prototype은 실제 제품을 만들기 전 디자인을 테스트하는 것이다. 정적인 wireframe mockup와 달리 동적으로 사용자가 시뮬레이션이 가능하다. 프로토타입은 의도한 대로 작동하는지를 확인할 수 있으며, 다른 개선점을 찾을 수도 있다. fidelity(충실도)는 최종 제품과 얼마나 비슷하게 만들어내는지를 나타낸다. 충실도는 design, content, interactivity의 구현 정도에 따라 달라진다. 일반적으로 low-fidelity, high-fidelity로 나눌 수 있다. low-fidelity prototype 빠른 프로토타입을 위해 핵심적인 일부만을 구현 가장 일반적인 것으로 종이를 통한 제작이 있음 장점 -> 빠르고 저렴한 구현, ->종이와 같은 쉬운 방식을 통해 누구나 접근..