티스토리 뷰

부트캠프/Front

[CSS] Text/Image Styling

혀니hyun 2025. 3. 7. 15:24

텍스트 스타일

.a-text {
	font-family: serif;
    font-family: Roboto, Verdana, Arial;
   	
    font-size: 40px;
    font-weight: bold;
    font-weigh: 600;
    	/* bold=700, 일반=400, semi-bold=500 */
    
    font-style: italic;
    font-align: center;
    	/* left, right, cneter, jutify(양쪽 정렬) */
    line-height: 35px;
    
    text-decoration: underline;
    text-decoration: none;
  }

 

이미지 스타일

.image {
	width: 400px; 
    	/* 너비와 함께 높이도 조정하여 비율 유지 */
    height: 400px;
    	/* 너비, 높이 모두 설정하면 이미지 비율 달라질 수 있음 */
        
    object-fit: cover; /* 이미지 비율 유지하되 이미지 잘림 */
    object-fit: contain; /*이미지 비율 유지하되 이미지 크기 조정됨 */
    
    
    object-position: left;
    object-position: right;
    object-position: top;
    object-position: bottom;
    	/* width*height 영역에서 이미지 위치 */

 

'부트캠프 > Front' 카테고리의 다른 글

[CSS] Flexbox : Container 속성  (0) 2025.03.07
[CSS] Flexbox  (0) 2025.03.07
[CSS] Animation  (0) 2025.03.07
[CSS] Transform  (0) 2025.03.07
[HTML] Input  (0) 2025.03.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함