CSS
1.[CSS] sticky를 사용할 때 bottom 속성을 적용할 수 있는 방법
sticky 포지션은 요소가 스크롤되는 동안 일반적인 문서 흐름을 따라 이동하다가 특정 위치에 도달하면 해당 위치에 고정된다.이때 고정되는 위치는 top, right, bottom, left 속성을 사용하여 지정할 수 있습니다. 그러나, sticky 포지션에서 bott
2.[SCSS] 사이트 폰트 다운로드 및 적용 방법
폰트 적용하는법개발자모드 -> 네트워크 글꼴 눌러서 다운로드assets -> fonts 폴더에 폰트 다운로드fonts.css에 아래와 같이 입력.reset.css에 아래와 같이 입력ex) 영문은 앞의 Gilroy, 한글은 뒤의 NotoSans, 둘다 안되면 마지막의 s
3.[css] 가로 스크롤 구현하기
세로 스크롤은 간단하게 HTML 부모 태그에 overflow 속성에서 auto나 hidden을 적용하면 간단하게 세로 스크롤을 구현할 수 있다.하지만, 가로 스크롤의 경우는 어떻게 구현해야 할까?다음과 같은 html 코드가 있을 때,inner에 화면 자체가 가로로 길어
4.[css]텍스트간의 간격 조절
반응형이다보니까 flex space-between을 하면 같은 간격으로 줄어드는 것은 같지만 요소 각각의 넓이가 보장이 안된다. 만약에 4등분을 하려고 했을때 넓이를 25%로 잡아서 요소를 가운데 배치하는 것이나 flex로 jusify-content을 설정하는 것 s
5.[CSS] flex-basis, flex-grow, flex-shrink 개념 완벽 정리 & flex 축약법
CSS의 레이아웃 기능인 Flex!그중에서 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념을 정리해보고자 한다.Flex Item의 크기를 설정한다. 이때 axis 방향으로의 크기를 설정한다.즉 위의 상태에서 box에 flex-basi
6.[CSS] 긴 텍스트를 말줄임표로 축약시키는 방법
글이 너무 긴 경우에 ... 기호로 표시하는 경우가 많습니다. 예를들어 게시글의 제목이 긴 경우에가 대표적입니다. ... 기호가 원래는 더 긴 제목을 가졌음을 암시해주죠. 그렇다면 이렇게 긴 글을 생략기호를 사용하여 보여주려면 어떻게 해야할까요?이처럼 긴 글을 한 줄로
7.[CSS]vertical-align 속성 자세히 알아보기
css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다.그 중 vertical-align 속성을 이용하여 수직 정렬을 할 수 있습니다.이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다.따라서 display이