Illie

innerHTML / innerText 쓰임새 innerHTML과 innerText는 주로 자바스크립트에서 html 태그(,등)의 내부 문자를 가져올 때 사용한다 innerHTML / innerText 차이점 innerHTML의 경우, 태그를 적용하여 문자를 보여주며 innerText의 경우, 태그도 하나의 텍스트로 인식하여 보여준다 innerHTML / innerText 예시 코드 출처 : https://hianna.tistory.com/480 innerHTML의 경우 function setInnerHTML() { const element = document.getElementById('content'); element.innerHTML = "A"; } 반환 : A innerText의 경우 functi..

네모가 돌아서 자세히보기를 클릭할 수 있게 유도해준다 예시 구성 살펴보기 크라운 피쉬 자세히 보기 img-wrap > ul > li > span > em, a 이번에는 조금 독특하게 ul과 li로 구성해보았다 CSS 살펴보기 .img-wrap ul .img-wrap ul { display: flex; justify-content: space-between; } 이미지를 3개를 넣어야 하니 이젠 눈 감고도 display: flex, justify-content: space-between .img-wrap li .img-wrap li { width: 387px; height: 387px; background-size: 100%; position: relative; perspective: 800px; } ba..

마우스를 올리면 자세히 보기 혹은 설명이 나오는 효과를 줄 것이다 예시 구성 살펴보기 우선 html부터 살펴보아서, 구성이 어떻게 되어있는지 보겠다 플라멩고 혹은 홍학 목이 길고 주둥이는 중간쯤에서 급히 아래쪽으로 구부러졌고 발에 물갈퀴가 있다. 자세히 보기 간단하게 왼쪽에 있는 사진을 가져왔다 img-wrap > left > left-cont > h4, p, '자세히 보기' CSS 살펴보기 .img-wrap .img-wrap { display: flex; justify-content: space-between; } 이미지가 왼쪽, 오른쪽이 있으므로 display: flex를 주고, 그 사이의 간격을 적절히 주기 위하여 justify-content: space-between을 준다 .img-wrap ...

CSS를 연습하는 사이트가 있어서 가져왔다 https://css-speedrun.netlify.app/ CSS Speedrun | Test your CSS Skills A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible. css-speedrun.netlify.app 페이지 구성 intro부터 시작하여 레벨 1부터 10까지 구성되어 있다 힌트는 2가지가 제공되며, 힌트를 누르면 MDN으로 연결되어 자신이 모르는 부분이 어떤 것인지 바로 연결이 된다 철자를 모르거나 잠시 헷갈릴 때에는 금방 아이디어를 캐치하고 바로 적용할 수 있으나 개념 자체를 모른다면 링크..

transition이란? transition이란 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있습니다. 부드럽게 연출을 하여, 자연스러운 변화를 유도합니다. transition 속성 transition의 속성은 다음과 같습니다. 1. transition transition: all -> transform, background, border-radius 등 속성을 각각 작성하지 않아도 all 을 입력해주면, 모든 속성에 효과가 나타납니다. 2. transition-delay transition-delay 속성은 transition 효과가 나타나기 전까지의 지연 시간을 설정합니다. 이 효과는 설정된 시간이 흐른 뒤에야 비로소 시작됩니다. 3. transition-duration transition..

픽셀이란? 픽셀은 사각형의 점으로, 디지털 화상을 구성하는 기본적인 단위이다. 이 점 하나에 해당 색의 정보가 담겨져 있으며, 이는 곧 그림의 용량과 직결된다. 대표적인 포맷은 JPG, PNG, GIF이 있으며, 이를 비트맵 이미지라 한다. 요즈음 대표적인 픽셀은 크롬의 이스터 에그로, 공룡이다. 벡터 벡터 이미지는 수학적으로 계산된 경로로 구성된 무한 확대 가능한 디지털 그래픽이다 벡터는 기본적으로 필요에 의해 늘어나거나 구부러질 수 있다 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않는다 또한, 벡터에는 수학이 포함되어 있고, 디자이너는 어도비 일러스트레이터와 같은 프로그램 도구를 사용해 벡터 그래픽을 빠르고 쉽게 제작할 수 ..

지난 시간, 웹표준 웹접근성 웹호환성에 대해 알아보았다 이번엔 스킵 메뉴에 대해 알아보고자 한다 웹표준 사이트에서 보이스 오버를 사용한다고 가정을 해보자! 웹표준에 맞는 사이트를 만들었다 하지만 여전히 불편한 점이 있다 그것은... 웹사이트의 화면에 정보가 많으면 많을수록 자신이 원하는 부분에 도달할 때까지, 꽤 오랜 시간이 걸린다는 것이다 그래서 필요한 것이 스킵이다 우리는 주로 중드나 미드를 볼 때 많이들 오프닝 건너뛰기, 줄거리 요약 건너뛰기를 눌렀다 이것을 화면 윗부분에 넣게 된다면 보이스 오버를 사용하는 사람들이 자신이 원하는 정보를 바로 획득할 수 있게 된다 웹은 어떠한 사용자, 어떠한 기술환경에서도 사용자가 전문적인 능력없이 웹사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장해야한다 ..

어제 탐조생활이 만드는게 너무 재밌었다 하면서도 키득키득 ㅋㅋㅋㅋㅋㅋㅋㅋ 빨리 만들어서 어디 보내야지 뭐 이런 것들을 생각하고 있었다... 그렇다... 난 이미 이것에 빠진 듯 하다 그래서 뭘 만들까 이전과 다른 새로운 걸 만들고 싶다!라고 하였고 그렇게 눈에 들어온 것이 티스토리 배너...! 티스토리 처럼 배경이 넘어가지는 못하지만, 그래도 얼추 레이아웃을 짜고 비슷하게 만들 수 있을 거 같았다 먼저 그리드 시스템으로 레이아웃 짜기 이런식으로 대충 어디에 뭘 넣을건지 짜고 나서 그 다음 저작권 문제 없는 사진 사이트, unsplish에 가서 사진을 다운 받아 넣었다 사진을 넣기 얼추 비슷한거 같다? 사실 사진을 어울릴거 같아서 넣으면 안어울리고, 넣으면 안어울리고의 반복이었다 그래서 계속 계속 하다가...