티스토리

neda의 블로그

검색하기

블로그 홈

neda의 블로그

neda.tistory.com/m

더 적게, 그러나 더 낫게 (Less, but better)

구독자: 1

방명록 방문하기

주요 글 목록

테이블 테이블 태그: 테이블의 행(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.. 공감수 0 댓글수 0 2022. 7. 26.
반응형 이미지 반응형 이미지의 필요성 일반적으로 웹은 가로가 넓은 형태의 모니터와 같은 스크린을 고려하지만, 모바일 기기의 증가와 함께 다양한 화면 비율, 화면 크기를 가진 디바이스에 대한 알맞은 지원이 필요하다. 모바일기기에서 웹을 볼 때는 보통 세로 화면으로 보기 때문에 모니터와 달리 세로에 비해 가로가 매우 좁다. 또한 화면 크기가 작기 때문에 데스크탑에서 보던 고해상도의 이미지를 똑같이 다운받아 표시하는 것은 대역폭 낭비일 수 있다. 가로가 넓은 이미지를 모바일기기에서 보여줄 때에는 전체를 다 보여줄 수도 있지만, 중요 부분만을 크롭하여 보여주는 방법도 있다. 반응형 이미지 만들기 srcset 설명 elva-fairy-480w.jpg --> 이미지 파일 480w --> 이미지 실제 크기 sizes 설명 (max.. 공감수 0 댓글수 0 2022. 7. 14.
웹에 벡터 이미지 넣기 <svg> 래스터 이미지 각각의 픽셀이 나타내야 할 색에 대한 정보를 가짐 이미지 크기 고정 -> 확대시 화질 저하 벡터 이미지 벡터 정보를 통해 그때 그때 알고리즘을 계산, 알맞게 이미지를 렌더링 이미지 크기 가변적 -> 확대시 화질 저하 없음 단점 특정 복잡한 이미지 벡터로 구현하기 어려움 이미지가 복잡해지면 벡터가 매우 많아짐 -> 파일 크기 증가, 렌더링 시간 증가 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 svg를 추가하는 방법 1. 요소 장점 alt 사용 가능 를 통한 하이퍼 링크 가능 브라우저에서 캐시 가능 단점 js로 조작 불가능 외부 스타일시트로 css 불가능 css 의사 클래스 불가능 2. 요소 장점 css 스타일, 상호작용, 애니메이션 가능 를 통한 하이퍼 링.. 공감수 0 댓글수 0 2022. 7. 2.
웹에 객체 임베딩 <iframe>, <object>, <embed> : 다른 HTML 페이지 중첩하는 브라우징 컨텍스트 youtube iframe 예시: HTML 삽입 미리보기할 수 없는 소스 HTML iframe 예시: HTML 삽입 미리보기할 수 없는 소스 기본적인 적용사항 border : none 브라우저에서 기본적으로 표시하는 테두리 제거한다. allowfullscreen 전체화면 기능을 가능하게 한다 Fallback content chlidren 값으로 대체 컨텐츠를 넣어 iframe이 지원하지 않을 때 표시 blog home page sandbox 강화된 보안 설정 HTTPS 필요성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 공감수 0 댓글수 0 2022. 7. 2.
HTML에서 비디오를 사용하는 방법 의 기본적인 사용 방법 비디오 재생이 되지 않으면 보이는 대체 텍스트입니다. HTML 삽입 미리보기할 수 없는 소스 브라우저에 따라 지원하는 동영상 지원 형식이 다르므로 그에 맞는 형식의 동영상, 오디오가 필요하다 이를 위해 미디어 컨테이너에는 동영상, 오디오 트랙의 구조에 대한 메타 데이터 정보, 미디어에 대한 메타데이터, 코덱 정보를 가진다. 내에 다양한 요소를 넣어두면 브라우저는 지원하는 코덱이 있는 요소를 재생한다. 비디오 재생이 되지 않으면 보이는 대체 텍스트입니다. HTML 삽입 미리보기할 수 없는 소스 속성 autoplay : 로드되면 바로 재생을 시작 loop : 끝까지 재생된 후 자동으로 다시 재생 muted : 초기 사운드 상태를 꺼진 상태로 지정 poster : 동영상 재생 전 이미지.. 공감수 0 댓글수 0 2022. 6. 29.
HTML에서 이미지를 넣는 방법 사용법 : 를 이용하여 이미지 표시하기 예시) HTML 삽입 미리보기할 수 없는 소스 대체 텍스트 : 대체 텍스트는 이미지를 표시할 수 없거나(엑스박스) 불러오는데 오래 걸리는 경우 이미지 대신 텍스트를 띄운다. 다양한 이유로 이미지 렌더링이 안되는 상황에서 대체 텍스트를 이용하면 이미지를 보지 않더라도 이미지에 대한 사용 가능한 경험을 제공한다. 시각 장애인의 화면 리더기 사용시 파일 자체나 파일 경로가 잘못될 경우 브라우저가 이미지를 지원하지 않을 경우 검색 엔진에 텍스트 제공 사용자가 임의로 브라우저의 이미지 표시를 끈 경우 이미지가 단지 화면을 꾸미는 용도인 경우 스크린 리더기에 alt=""를 제공하여 불필요한 시간 낭비 방지 사용자가 텍스트 전용 브라우저를 사용 하는 경우 예시) 이미지의 주소를.. 공감수 0 댓글수 0 2022. 6. 29.
HTML <Meta> 데이터 문서의 문자 인코딩 방식 지정 검색 엔진 최적화(SEO)를 위한 문서 작성자와 설명 Facebook의 Open Graph 프로토콜 (https://ogp.me/) 웹페이지를 북마크하거나 sns을 통해 페이지를 공유할 때 웹 페이지에 대한 간략한 제목이나 설명, 이미지 등을 지정할 수 있다. 특정 사이트에서만 사용이 가능하다. 대표적인 og를 이용한 메타데이터들 og:title og:description og:type og:image og:url 파비콘 즐겨찾기를 할 때 웹페이지의 아이콘으로 저장되는 이미지 공감수 0 댓글수 0 2022. 6. 29.
웹이 동작하는 과정 웹이 동작하는 과정 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이 모두 준비되면 웹페.. 공감수 0 댓글수 0 2022. 6. 29.
JavaScript 정의와 타입 자바스크립트는 웹사이트의 더 나은 상호작용을 위한 프로그래밍 언어이다. 처음에는 알림을 띄우는 매우 단순한 기능들이 있었지만 현재는 Adobe Flash나 Active X 등을 대체하고 백 엔드와 프론트 엔트 전반에 걸쳐 두루 사용되고 있다. 이름은 JavaScript지만 Java는 전혀 상관이 없는 언어이다. 사용하기 위해서는 태그 내에 스크립트를 포함하거나 .js파일을 불러온다. ... JavaScript의 타입 원시 값 객체를 제외한 모든 타입의 값으로 불변 Boolean 타입 true와 false 둘 중 하나의 값을 가지는 논리 값 let bool_on = true; Null 타입 null 값만을 가짐. let a = null; Undefined 타입 undefined 값만을 가지며, 값이 할당되.. 공감수 0 댓글수 0 2022. 6. 29.
HTML의 정의와 기본적인 사용 HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)은 웹 페이지를 만들기 위한 언어이다. 마크업 언어란 보통 태그를 이용하여 문서나 데이터 등의 구조를 명기하는 언어이다. HTML은 요소(Element) 단위로 구성되며, 요소는 3가지로 이루어 진다. 여는 태그(Opening tag) 닫는 태그(Closing tag) 내용(Content) Nesting 요소는 다른 요소 안에 중첩(Nesting)될 수 있으며, 포함될 요소의 전체를 다른 요소의 내용에 넣어야 한다. Empty 모든 요소가 내용을 가지지는 않으며, 내용이 필수적이지 않는 요소도 있다. 이 때는 닫는 태그가 필수는 아니다. HTML 문서 구조 Line 1: 문서 형식을 html로 선언 Line 2 ~ 12 :.. 공감수 0 댓글수 0 2022. 6. 28.
웹사이트 파일 구조와 이름 웹사이트 파일 구조 웹사이트를 구성하는 파일은 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) 따라서 파일 이름.. 공감수 0 댓글수 0 2022. 6. 28.
웹사이트 구상하기 1. 계획하기 무엇에 대한 웹사이트인가? 무엇에 대해 어떤 정보를 제공하는가? 2. 디자인하기 대략적인 레이아웃을 구상하기 3. 에셋 선택하기 제공해야 할 텍스트, 이미지, 영상 등의 정보 디자인을 위한 테마 색상 -> 색상 선택을 위한 색상 선택기 디자인을 위한 글꼴 -> 구글 글꼴 공감수 0 댓글수 0 2022. 6. 28.
프로토타입의 충실도 lo-fi와 hi-fi prototype은 실제 제품을 만들기 전 디자인을 테스트하는 것이다. 정적인 wireframe mockup와 달리 동적으로 사용자가 시뮬레이션이 가능하다. 프로토타입은 의도한 대로 작동하는지를 확인할 수 있으며, 다른 개선점을 찾을 수도 있다. fidelity(충실도)는 최종 제품과 얼마나 비슷하게 만들어내는지를 나타낸다. 충실도는 design, content, interactivity의 구현 정도에 따라 달라진다. 일반적으로 low-fidelity, high-fidelity로 나눌 수 있다. low-fidelity prototype 빠른 프로토타입을 위해 핵심적인 일부만을 구현 가장 일반적인 것으로 종이를 통한 제작이 있음 장점 -> 빠르고 저렴한 구현, ->종이와 같은 쉬운 방식을 통해 누구나 접근.. 공감수 0 댓글수 0 2022. 6. 28.
[CSS]boxmodel과 box-sizing html요소는 content + padding + border + margin로 이루어져 있다. content는 html요소의 내용이 들어가는 곳이다 padding은 content영역과 border 사이의 빈 공간이다. border는 요소의 가장 바깥 테두리이다. margin은 테두리밖 즉, 요소의 바깥 공간이다. 다른 요소와 간격을 두기 위해,혹은 요소의 위치를 움직이기 우해 사용한다. 크기 설정 속기형 순서 위부터 시계방향 4개 top right bottom left 3개 top (right-botton) bottom 2개 (top-bottom) (right-bottom) Box-sizing 기본값은 box-sizing: content-box 이때 요소의 크기는 width(height) + paddi.. 공감수 0 댓글수 0 2020. 9. 20.
[CSS]css의 기본 사용법 css는 Cascading Style Sheets의 약자로 html태그의 시각적 효과를 준다. 기본적으로 선택자와 속성으로 구성 selector { property: value; } html파일에 import하기 html태그안에 인라인으로 작성하기 Hello css 공감수 0 댓글수 0 2020. 9. 20.
bold test bold글씨입니다 bold글씨가 아닙니다 공감수 0 댓글수 0 2020. 4. 30.
html 첫 포스트 html 첫 포스트 공감수 0 댓글수 0 2019. 10. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.