[웹 개발을 위한 기초지식4] html에 css로 스타일 입히기

    지난번 소개해드린 html코드에 이번엔 css를 입힘으로써 조금 더 예쁜 사이트로 만들어볼텐데요!

    우선 responsible page로 만들기 위하여 추가한 코드를 살펴볼게요

    /* Responsive CSS */
    
    @media (max-width: 1080px){
    	.image{
    		flex: 100%;
    		max-width: 480px;
    	}
    }
    
    @media (max-width: 400px){
    	.image .details p{
    		font-size: 12px;
    	}
    
    	.more .read-more, .more .icon-links a i{
    		font-size: 18px;
    	}
    }

    screen width에 따라 세개의 버전으로 나뉩니다.
    1080을 기준으로 더 클 땐 grid가 3개씩 나뉘지만, 작을 땐 1줄로 바뀝니다.

    또한 400보다 작아질 경우(모바일 환경에서)는 폰트의 크기 또한 줄어듭니다.

    반응형

    댓글