목록HTML & CSS (22)
개발자입니다
CSS 유용한 사이트 모음
-선택자 지정 게임 : flukeout.github.io -CSS 속성 상속 여부 : https://www.w3.org/TR/CSS21/propidx.html -CSS 컬러 참고 사이트: https://www.w3schools.com/css/css_colors.asp -의미없는 텍스트 만드는 사이트(ipsum generator 검색): https://www.lipsum.com/feed/html -flexbox 여러가지 테스트 가능 사이트: https://codepen.io/enxaneta/pen/adLPwv -W3schools 에서 미디어쿼리 문법 확인 : https://www.w3schools.com/css/css3_mediaqueries.asp -HTML/CSS 사용해도 되는지 확인하는 통계 사이트 ..
[생활코딩 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..
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) 현재 파일을 기준으로 하위 폴더로 연결되는 경우 위와 같은 그림과 같이..
Inflearn Egoing) 섹션 9. fontello 서비스 사용하기 - fontello
■ fontello : 특정 문자를 특정 이미지로 표현되도록 하는 방법. 벡터 방식이므로 화면 크기를 변경해도 자연스럽게 바뀐다. 폰트 공급자 모은 사이트: https://fontello.com/ 폰트 선택 후 우 상단 Download webfont로 다운 받는다. 전 세계 unicode 사이트: https://unicode-table.com/en/#0041 demo.html 을 열어서 아이콘 확인 가능하다. 우측 show codes 클릭해서 코드 복사한다. 맨 앞의 0 삭제하고 &#을 붙인다.  위 아이콘을 코드 대신에 으로 지정할 수 있다. 이 경우 font-family 지정은 안해도 된다. ■ fontello의 class 작동 원리 :before : 해당 태그의 앞에 적용할 서식 지정...