본문 바로가기

Programing/CSS37

여러 개의 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.
flex 요소가 2개 일 때 좌우 양쪽으로 밀기 한 안에div 1개는 @@후원자님div 1개는 후원-240424-01 이 상태에서 양쪽으로 미는 방법은 좌측 div에 margin-right: auto를 주어 오른쪽으로 쭉 밀면 됨. #donatorName { margin-right: auto;}   아래 블로그에 flex 요소 안의 div 개수마다 정렬하는 방법이 소개되어 있음.https://seons-dev.tistory.com/entry/display-flex-%EC%A2%8C%EC%9A%B0-%EC%A0%95%EB%A0%AC Programing/CSS 2024. 4. 25.
그림자효과 추가하고 마우스를 올렸을 때 커졌다가 떼면 원상태로 복귀하는 CSS 애니메이션 효과 적용하기 .클래스명 { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 그림자 효과 추가 */ transition: transform 0.3s, box-shadow 0.3s; /* 그림자 애니메이션 효과 추가 */ } .클래스명:hover { transform: scale(1.05); /* 마우스를 올렸을 때 크기를 살짝 키웁니다. */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* 그림자 효과를 더 짙게 만듭니다. */ } Programing/CSS 2024. 2. 29.
부트스트랩 출처 : https://www.youtube.com/watch?v=5ETqQWvwXV4 부트스트랩이란? 가장 많이 사용하는 웹 디자인 프레임워크 중 하나. Responsive Web (반응형 웹)을 만들기도 편하다. 화면 구성의 기본 (12 Grid) 우리가 보는 웹의 화면은 12Grid system으로 row(열)를 12개로 분할한다. 위와 같은 코드에서는 큰 div로 작은 div 3개 구획을 가져가는 모습인데, col-md-4는 md(미디엄) 중간 사이즈로 12 그리드 중 4개씩 가져가라는 의미로 한개의 열에 3개의 구획이 들어가는 모습임. md의 의미는 웹이 생각하는 md 중간사이즈일 때 12 그리드 중 4개의 그리드 만큼 차지하라는 의미로, 중간사이즈 밑으로 웹페이지가 축소되면 (모바일 기기 등에.. Programing/CSS 2024. 2. 28.
목록 스타일 (list-style-type) ul, ol 등의 목록을 작성할 때 ul(Unordered List)를 제외하고 ol(Ordered List)를 작성할 때 하위의 의 글머리기호의 서식을 정할 수 있는 속성이다. 속성값 disc : 채운 원 모양 // ● circle : 빈 원 모양 // ○ square : 채운 사각형 모양 // ■ decimal : 1부터 시작하는 10진수 // 1, 2, 3 decimal-leading-zero : 앞에 0이 붙는 10진수 // 01, 02 lower-roman : 로마 숫자 소문자 / i, ii, iii upper-roman : 로마 숫자 대문자 / I, II, III lower-alpha 또는 lower-latin : 알파벳 소문자 // a, b, c upper-alpha 또는 upper-alph.. Programing/CSS 2024. 2. 26.

티스토리툴바