웹(Web)51 배경(background) Hello world background-color:백그라운드 배경색 background-image:url() 파일명을 입력해도되고 url 주소를 입력해도된다 컬러가 나오는 것은 이미지가 컬러를 가렸기 때문에 둘다 나오게 하려면 transparent라고 해서 배경이 투명인 이미지를 사용하면 된다 반복하고 싶지 않으면 background-repeat:no-repeat 또는 repeat-x repeat-y repeat(기본값) background-attachment:fixed scroll 하면 이미지를 고정시키거나 같이 스크롤되게 할 수 있다 background-size:가로 세로 또는 cover contain contain을 하게 되면 화면의 크기에 모든 이미지가 들어간다 cover를 하게되면 화면 전체를.. 2021. 4. 15. 다단 다단(multi column)은 아래 신문처럼 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae blanditiis nostrum eum ipsam, quam expedita distinctio aspernatur voluptas inventore in officia at, a repudiandae modi vel dicta exercitationem accusamus? Tenetur minima doloremque, sequi id, necessitatibus deleniti porro ex max.. 2021. 4. 15. float Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam .. 2021. 4. 15. media query 소개 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다. 장치에 적합한 표현을 할 수 있도록 하는 기술이 Media query 화면의 크기에 반응하는 반응형 웹의 심장이 Media query ~500px : red 501~600px : green 601px~ : blue @media:media query의 시작을 알리는 것 화면의 크기가 500픽셀이 되었을 때 배경색을 빨강으로 한다는 뜻 max-width:이하일 때 mix-width:이상일 때 코드가 나중에 나오는 것이 우선순위가 높아진다 메타 태그는 화면 크기의 불일치를 맞춰주기 위해서 넣어준다 미디어쿼리 응용 생활코딩 html cs.. 2021. 4. 15. 이전 1 2 3 4 5 6 7 ··· 13 다음