목록전체 글 (352)
개발자입니다
[생활코딩 CSS] Masonry layout 만들기
masonry: 벽도을 쌓는 공사, 석조 : 독립적인 콘텐츠를 표현한다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조된다. 이미지, 삽화, 도표, 코드 조각 등을 넣을 수 있다. An elephant at sunset -CSS 설명 column-width: 350px : 350 px의 너비를 가진 열로 나눠준다. column-gap: 15px : column 간격을 15px 준다. box-shadow: 바깥 영역에 그림자를 준다. /* offset-x | offset-y | blur-radius | color */ Cinderella wearing European fashion of the mid-1860’s Rapunzel, clothed in 1820’s period fashion Belle, bas..
예컨대 123.456 이라는 숫자가 있을때 const num = 123.345; num.toFixed(2) // 소수점 셋째 자리 반올림한다. >> 123.35 const num = 123.345; num.toFixed(1) // 소수점 둘째 자리 반올림한다. >> 123.3
[Javascript] 두 <span> 사이 <br> 사용시 cannot set property of null innertext 발생
내 다음과 같이 을 삽입하였다. 그랬더니 author 항목이 나오지 않았다. 개발자 도구로 확인하니 'cannot set property of null innertext' 에러가 발생했다. 해결 순서 1. 태그 위치 변경 검색했을때 대부분 태그를 의 바로 위에 배치하면 해결된다고 했다. 그러나 해결되지 않았다. 2. 로 감싸기 태그로 감쌌더니 quote.js에 입력된 모양대로 나와 정렬이 예쁘지 않았다. 3. 대신 입력 대신 입력 해보았으나 현상은 동일했다. 내용이 없는 객체가 있어서 문제가 생기는건가 싶다. 4. quote.js 파일 수정 author의 텍스트 자체에 엔터를 삽입하게 수정했다. 아래와 같이 수정하니 잘 작동했다. author.innerText = "\n" + todaysQuote.aut..
flex로 하려고 몇시간동안 해봤는데 안돼서 아래 방법으로 했다. position + transform 사용하기 .in3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 이 방법을 추천드리는 이유는 위에서 언급했던 단점들을 모두 극복한 방법이기 때문입니다. 코딩은 살짝 더 복잡해도 부모 요소의 div가 사이즈가 변경되어도, 위치가 변경되어도, 또는 자식 요소의 div 크기가 변경되어도 늘 정중앙에 배치됩니다. 그냥 공식처럼 외워두시면 될 것 같습니다. 포지션의 기준점은 div의 사각형을 화면상에서 바라봤을 경우 왼쪽 상단 꼭지점이 됩니다. 여기를 좌측으로 50% 옮기고 위에서 50% 아래로 배치하면 가운데의 di..
투명도 설정하기(opacity), 수직 정렬(z-index)
■ opacity(투명도) https://developer.mozilla.org/ko/docs/Web/CSS/opacity 불투명도를 나타내는 것으로 뒤쪽 콘텐츠가 숨겨지는 정도에 따라 0~1로 설정한다. 0 : 뒤쪽 콘텐츠가 완전 보임. 1 : 뒤쪽 콘텐츠가 완전 가려짐 div { background-color: yellow; } .light { opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */ } .medium { opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */ } .heavy { opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */ } 겨우 보이는 글 좀 더 잘 보이는 글 쉽게 보이는 글 :hover 시 다른 불투명도 적용 img.opacity { opacity..
CSS 이미지(절대경로 vs 상대경로)
이미지 경로 절대 경로 절대경로란, 아마 지정되어 있어 변경할 수 없는 경로를 뜻한다. 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결 시킬때 사용한다. ex) 사이트 바로가기 상대 경로 상대 경로란, 상대적으로 변경될 수 있는 경로를 말한다. (1) 현재 파일을 기준으로 동일 텍스트위치로 연결되는 경우 아래와 그림과 같은 폴더 구조를 가진 웹사이트에서 index.html 파일에 favicon.png를 연결 시키려고 한다. index.html 파일이 저장된 위치를 기준으로, favicon.png 파일은 동일한 위치에 저장되어 있기 때문에 파일명과 확장자를 함께 기재해주면 된다. index.html 파일 소스 중 (2) 현재 파일을 기준으로 하위 폴더로 연결되는 경우 위와 같은 그림과 같이..