본문 바로가기

Programing/CSS41

마우스 호버 시 살짝 커지는 CSS /* 필요한 CSS를 작성하고 아래 속성을 이어 붙인다 */transition: transform 0.3s ease-in-out;&:hover { transform: scale(1.2);} Programing/CSS 2024. 6. 14.
텍스트가 박스를 넘어서 렌더링 될 때 스크롤바 추가하기 텍스트가 길어서 내가 의도한 영역을 초과하여 렌더링 되는 경우가 있다. 이럴 때 해당 박스의 CSS에 overflow 속성을 주면 된다. overflow: auto; /* 스크롤 가능하도록 설정 */word-break: break-word; /* 긴 단어가 박스를 넘지 않도록 설정 */ Programing/CSS 2024. 6. 5.
margin 속성 개수에 따른 의미와 예제 margin 속성은 요소의 외부 여백을 설정하는 속성이다.margin 다음에 오는 값의 개수에 따라 설정되는 방향이 달라진다.한 개의 값 (margin: value;): 모든 방향(위, 오른쪽, 아래, 왼쪽)에 동일한 여백 적용.두 개의 값 (margin: value1 value2;):첫 번째 값(value1): 위와 아래 여백두 번째 값(value2): 왼쪽과 오른쪽 여백세 개의 값 (margin: value1 value2 value3;):첫 번째 값(value1): 위 여백두 번째 값(value2): 왼쪽과 오른쪽 여백세 번째 값(value3): 아래 여백네 개의 값 (margin: value1 value2 value3 value4;):첫 번째 값(value1): 위 여백두 번째 값(value2): .. Programing/CSS 2024. 5. 25.
내 로컬에 있는 폴더를 CSS에 적용시키는 방법 상황웹 폰트를 지원하지 않는 폰트를 별도로 설치하여 사용하고 싶다. 예를 들어 AppleSDGothicNeo 즉 애플고딕은 웹 폰트를 지원하지 않으나, 상업적 비상업적 무료로 라이센스를 지원하기 때문에 폰트를 별도로 사용 가능하다.방법원하는 폰트를 설치한다.프로젝트 폴더에 fonts라는 폴더를 만든 후 그곳에 폰트를 넣는다. (자유작명)설치한 폰트를 CSS에서 import한다.@font-face { font-family: 'AppleSDGothicNeoEB'; src: url('../fonts/AppleSDGothicNeoEB.ttf') format('truetype'),; font-weight: normal; font-style: normal;}아래처럼 여러 개 할 수도 있음.format은 폰트.. Programing/CSS 2024. 5. 18.
여러 개의 div를 수직이 아닌 수평으로 배치하기 div 태그는 block 속성으로 수직으로 쌓인다.  1,000,000원이라는 1개의 div와 원이라는 1개의 div는 당연히 수직으로 배치된다.각각의 div에 동일한 class를 주고 CSS 속성에서 display = inline-block;을 주면 수평으로 나란히 배치된다. 가운데로 몰고 싶으면 상위 요소에서 text-align: center; 속성을 주면 된다.   원문 블로그 링크https://hianna.tistory.com/865 Programing/CSS 2024. 4. 25.

티스토리툴바