특강/css4 css - 미디어 쿼리(media query) css - 미디어 쿼리(media query) 0. 미디어 쿼리 활용 - 어떤 특정 조건에서만 css가 동작하도록 함 1. 화면 크기가 800px이상일 때 동작(최소 800px) div{ border:red 10px solid; } @media(min-width:800px){ div{ display:none; } } 2. 화면 크기가 800px이하일 때 동작(최대 800px) div{ border:red 10px solid; } @media(max-width:800px){ div{ display:none; } } 활용 코드 Pumkinni 백준 데이터 분석 코드 그냥 와서 블로그 좀 구경혀 너무 가까이 봐서 조급해하지 말고 너무 멀리봐서 들뜨지는 말자구 작게 하나씩 이뤄 가는거야 긍정적이게 살아가면 행복.. 2022. 7. 25. css - 그리드(grid) css - 그리드(grid) 0. div tag - 의미도 없고 기능도 없는 태그(태그들을 묶어줄 때 자주 사용) 1. 그리드 사용 시작 - display:grid; 2. grid-template-columns:150px 1fr - 그리드를 한열에 배치 후 너비 조정(크기는 텍스트의 사이즈에 알아서 맞춰줌) 코드 Pumkinni 백준 데이터 분석 코드 그냥 와서 블로그 좀 구경혀 너무 가까이 봐서 조급해하지 말고 너무 멀리봐서 들뜨지는 말자구 작게 하나씩 이뤄 가는거야 긍정적이게 살아가면 행복할거야 행복하자 우리 모두 결과 ※ caniuse site - 여러 기술들 중에서 현재 웹브라우져들이 얼마나 그 기술을 채택하고 있는지 보여주는 사이트 Can I use... Support tables for HTM.. 2022. 7. 25. css - 박스모델 기초 css - 박스모델 기초 박스모델 코드 종류 1. border-width:5px; - 테두리의 두께 2. border-color:green; - 테두리의 색 3. border-style:solid; -테두리의 스타일 4. display:inline; - display설정 - block(크게), inline(자기 크기에 맞게), none(안보이게) 5. inline element, block level element - inline : a - block level element : h1 6. margin:4px; - 박스 사이의 간격 7. padding:20px; - 박스안 사이의 간격 8. width:140px; - 박스의 넓이 9. 중복 제거 코드 a, h1{ border:4px red solid; }.. 2022. 7. 25. CSS 기초 - 사용 방법 및 속성 종류 CSS 기초 - 사용 방법 및 속성 종류 font 코드 글 - 글의 색을 지정 CSS 사용 방법 1. style 태그를 쓴다 - a: 선택자(selector) css효과를 적용해줄 대상 - {}: 효과(declation) css문법을 통해 표현한 것 - color : 속성(property) - red :값(value) 2. style 속성을 쓴다 글 속성의 종류 1. color:red; - 글자의 색을 설정 2. text-decoration:none; -텍스트의 효과를 설정 underline시 밑줄 3. font-size:xxx-large; - 글자의 사이즈를 조정 - 40px or 150%도 사용가능 4. text-align:center; - 글자의 정렬을 설정 5. 영향력 : id > class > .. 2022. 7. 25. 이전 1 다음
