CSS2 생활코딩 css 정리(Day 2) 반응형 디자인(반응형 웹, Responsive Web) 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것 이를 css를 통해서 구현하기 위한 핵심적인 개념인 Media Query 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것 위에는 화면의 폭이 350px일 때까지만 동작하도록 하는 코드이다. 즉 350px보다 작을때 div 태그가 동작하도록 한다. 반대로, min-width:800px의 조건은 화면의 크기가 800px보다 크다면 div 태그가 동작하도록 하는 코드이다. 즉 최소 너비가 800px일 때부터 동작하는 것이다. @media(max-width:300px){ #grid{ display: block; } ol{ border-right:none; .. 2022. 1. 15. 생활코딩 css 정리(Day 1) css의 이점 - 웹페이지 유지보수 편리 - 가독성 증가 - html가 정보에 전념하도록 함 - css통해 디자인하는 것이 효율적 css를 삽입하는 방법 1. style 태그 이용 2. style 속성을 이용 여러개의 효과를 삽입하는 경우 ; 으로 구분한다. 1. style 태그 해당 html 코드에 있는 모든 a 태그에 대해 color를 red로 설정 디자인과 관련된 코드는 단 block level, inline은 display 속성값의 기본값일뿐 css를 통해 언제든 기본값을 변경할 수 있다. h1,a{ border: 5px solid red; } ,를 통해 중복을 제거해줄 수 있다. 또한, border:를 통해서도 중복을 제거할 수 있다. 페이지도구(개발자도구)를 이용하여 css으로 적용된 styl.. 2022. 1. 14. 이전 1 다음
