본문 바로가기

Programing/CSS41

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.
글자 간격 조절 (letter-spacing, word-spacing) 두 스타일 속성의 차이 letter-spacing : 글자와 글자 사이를 조절 (자간) word-spacing : 단어와 단어 사이를 조절 보통은 letter-spacing으로 자간을 조절한다. letter-spacing의 속성값 px, em 같은 단위 또는 % 자간조절테스트 출처 : 웹 표준의 정석 (고경희 저) Programing/CSS 2024. 2. 26.

티스토리툴바