코딩 공부 코딩 공부

세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있습니다. 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. 주요 웹 브라우저의 벤더 프리픽스(vendor prefix) 크롬과 사파리는 같은 웹킷 계열 브라우저이므로..

엔티티(Entity)란? HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티의 형태는 다음과 같습니다. 문법 &엔티티이름; 또는 &#엔티티숫자; 다음 예제는 HTML 코드 내에서 꺾쇠괄호()를 사용하면 웹 브라우저가 그것을 어떻게 해석하는지 보여줍니다. 예제 태그는 두 번째로 큰 제목을 나타내는 태그입니다. 태그는 단락을 나타내는 태그입니다. 위의 예제처럼 HTML 코드에서 사용된 꺾쇠괄..

수많은 웹사이트들은 다양한 디자인과 구조들을 가지고 있습니다. 그러나, 실제로 내부를 들여다 보면 대부분 비슷한 구조를 가지고 있음을 알수 있습니다. 아래에 있는 그림과 같이, 웹사이트의 디자인 관점에서 크게 4가지로 나눌수 있습니다. 헤더 및 푸터의 경우는 모든 페이지에서 같은 내용이 보여지도록 되있습니다. 즉, 한번 만 헤더 및 푸터를 만들어 놓으면 모든 페이지에서 자동으로 보여지게 되는 것입니다. 내용을 변경하는 경우도 마찬 가지 입니다. 해더나 푸터의 내용을 한번 만 변경하면 모든 페이지에서 자동으로 변경이 됩니다. 이 부분에 착안해서 웹사이트에서 항상 보여질 필요가 있는 컨텐츠들을 헤더나 푸터에 넣으면 좋습니다. 메인 컨텐츠 부부은 웹사이트의 실제 내용이 들어가는 부분 입니다. 만약 ABOUT ..

HTML은 뼈대를 만드는 언어므로, 구역을 나눠주는 태그들이 있습니다. 1. div는 페이지를 논리적인 구간이나 그룹으로 나누어 줍니다. div를 사용하는 이유는 페이지를 논리적으로 구분해서 다른 사람들이 이해하기 쉽고, 관리도 편하게 할 수 있으며 한 구간마다 스타일을 적용할 수 있기 때문입니다. 구역1 구역2 2. 태그 p태그는 문단을 나누는 요소입니다. first paragraph second paragraph new line third paragraph 3. 태그 정렬되지 않은 태그를 말하며 ui 태그를 사용할때는 항상 li 태그를 같이 사용해야 합니다. 리스트를 나타낸다 ul이랑 같이 사용한다. 4. 태그 정렬된 태그들을 말합니다. 아메리카노 카페라떼 핫초코 녹차 홍차 자스민차

비트맵 그래픽 비트맵 그래픽은 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식이다. 대표적인 비트맵 그래픽인 jpeg, gif, png 형식의 이미지 파일을 확대하다보면 아래의 그림 좌측과 같이 이미지가 손상되는 현상이 발생한다. 비트맵 그래픽은 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 때문에 원본 크기보다 이미지를 확대하면 이미지가 손상되는 결과가 발생한다. 그러나 비트맵 그래픽은 단순히 데이터의 배열로써 이미지를 표현하기 때문에 컴퓨터가 연산하기 용이하다. 따라서, 비트맵 그래픽은 하드웨어의 자원을 적게 소모하는 장점이 있다. 벡터 그래픽 벡터 그래픽은 픽셀의 배열로 이미지를 표현하는 것이 아니라 실제로 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 ..

document.querySelectorAll(".content__item__desc.reveal").forEach((el,i)=>{ if(!(el.querySelector("span"))){ const text = el.innerText; el.innerHTML = `${text}`; } }); function scroll() { //재귀함수를 이용한 스크롤값 구하기 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; const reveal = document.querySelectorAll(".reveal"); reveal.forEach(elem => { let revealOffset = e..

let text = document.querySelectorAll(".content__item .content__item__desc"); //속성은 get,set, 글씨는 innerTExt로 다 함 //여러개 글씨 쪼개기 text.forEach(desc => { let splitText = desc.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + "" desc.innerHTML = splitWrap; desc.setAttribute("aria-label", splitText); //웹표준/접근성준수 }) function scroll() { //재귀함수를 이용한 스크롤값 구하기 let scrollTop..

function scroll() { //재귀함수를 이용한 스크롤값 구하기 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".scrollTop span").innerText = scrollTop; document.querySelectorAll(".content__item").forEach(item => { let offset1 = (scrollTop - item.offsetTop) * 0.1; let offset2 = (scrollTop - item.offsetTop) * 0.15; const target1 = item.querySelector("...