본문 바로가기

CSS

(13)
[CSS] 미디어 쿼리 소개 반응형 만들기 미디어 쿼리로 800px 이상일 때 사라지는 반응형 만들 경우 : @media(min-width:800px) ('sreen width > 800px'와 같은 의미이지만 이건 쓰이지 않음)
[CSS] 그리드 소개 grid 적용하는 방법 1. 에서 부모 로 자식 묶기 2. 부모 에 id값 주기 (id="oo") 3. 안에서 id 값에 명령 내리기 -display:grid; -grid-template-columns ; 150px 1fr; → 안에 값들이 양옆으로 나열됨 (*fr은 크기 비율을 나타냄) ※최신 기술 사용시 사용 가능 여부 확인할 수 있는 사이트 Caniuse.com
[CSS] 박스 모델 block vs inline h1으로 묶여 있는 부분은 block level element : 화면 전체를 쓰는 태그 a 태그로 묶여 있는 부분은 inline element : 자기 자신의 콘텐츠 크기 만큼을 쓰는 태그 block : width와 height 지정할 수 있음 , , , , , inline : width와 height 지정할 수 없음 , , ※ display라는 속성을 이용하여 block을 inline으로, inline을 block으로 바꿀 수 있습니다 padding vs margin padding: 콘텐츠와 테두리 사이 간격 margin: 테두리와 테두리 사이 간격
생활코딩- CSS 선택자의 기본 Tag selector - 안에서 작성 Class selector -html 태그 안에서 class="xxx" - 안에서 .xxx ID selector -html 태그 안에서 id="xxx" - 안에서 #xxx ☆ID 값은 한 번만 등장해야 한다 (ID 중복 금지!!) ☆우선순위 : id선택자>class선택자>태그 선택자
생활코딩 Web2-CSS의 기본 문법 Web 페이지에 CSS 사용하는 두 가지 방법 1. style 태그 쓰기 selector 사용 2. style 속성 쓰기 selector 사용X (지정된 일부만 색 변환) ※참고: selector와 declaration selector declaration 밑줄 없애기& 지정된 부분만 밑줄 표시 1.밑줄 없애기 text-decoration: none; 2. 지정된 부분만 밑줄 넣기 style 속성에 text-decoration:underline ☆하나의 속성에 여러 효과를 넣을 수 있는 데 이때 세미콜론(;) 꼭 사용해주기!!!!! ☆style 태그 쓸 때 마지막에 꼭 쓰기!!!!