neda의 블로그

테이블 태그: 테이블의 행(row) 태그: 테이블의 열(column) 태그: 테이블 헤더 태그: 테이블 열 그룹 태그: 테이블 열 태그: 테이블 설명 추가 -> 테이블 태그 내에 포함 테이블 구조를 위한 태그: , , 해당 헤더가 어떤 셀에 대한 정보인지 명시적으로 전달: scope="col" or scope="row" HTML 삽입 미리보기할 수 없는 소스 Table example Animals we keep Knocky Flor Ella Juan Breed Jack Russell Poodle Streetdog Cocker Spaniel Age 16 9 10 5 Owner Mother-in-law Me Me Sister-in-law Eating Habits Eats everyone's leftovers..

반응형 이미지의 필요성 일반적으로 웹은 가로가 넓은 형태의 모니터와 같은 스크린을 고려하지만, 모바일 기기의 증가와 함께 다양한 화면 비율, 화면 크기를 가진 디바이스에 대한 알맞은 지원이 필요하다. 모바일기기에서 웹을 볼 때는 보통 세로 화면으로 보기 때문에 모니터와 달리 세로에 비해 가로가 매우 좁다. 또한 화면 크기가 작기 때문에 데스크탑에서 보던 고해상도의 이미지를 똑같이 다운받아 표시하는 것은 대역폭 낭비일 수 있다. 가로가 넓은 이미지를 모바일기기에서 보여줄 때에는 전체를 다 보여줄 수도 있지만, 중요 부분만을 크롭하여 보여주는 방법도 있다. 반응형 이미지 만들기 srcset 설명 elva-fairy-480w.jpg --> 이미지 파일 480w --> 이미지 실제 크기 sizes 설명 (max..

래스터 이미지 각각의 픽셀이 나타내야 할 색에 대한 정보를 가짐 이미지 크기 고정 -> 확대시 화질 저하 벡터 이미지 벡터 정보를 통해 그때 그때 알고리즘을 계산, 알맞게 이미지를 렌더링 이미지 크기 가변적 -> 확대시 화질 저하 없음 단점 특정 복잡한 이미지 벡터로 구현하기 어려움 이미지가 복잡해지면 벡터가 매우 많아짐 -> 파일 크기 증가, 렌더링 시간 증가 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 svg를 추가하는 방법 1. 요소 장점 alt 사용 가능 를 통한 하이퍼 링크 가능 브라우저에서 캐시 가능 단점 js로 조작 불가능 외부 스타일시트로 css 불가능 css 의사 클래스 불가능 2. 요소 장점 css 스타일, 상호작용, 애니메이션 가능 를 통한 하이퍼 링..

: 다른 HTML 페이지 중첩하는 브라우징 컨텍스트 youtube iframe 예시: HTML 삽입 미리보기할 수 없는 소스 HTML iframe 예시: HTML 삽입 미리보기할 수 없는 소스 기본적인 적용사항 border : none 브라우저에서 기본적으로 표시하는 테두리 제거한다. allowfullscreen 전체화면 기능을 가능하게 한다 Fallback content chlidren 값으로 대체 컨텐츠를 넣어 iframe이 지원하지 않을 때 표시 blog home page sandbox 강화된 보안 설정 HTTPS 필요성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스

의 기본적인 사용 방법 비디오 재생이 되지 않으면 보이는 대체 텍스트입니다. 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 값만을 가지며, 값이 할당되..

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