CSS6 Clearfix Hack과 flow-root float 이미지와 텍스트를 같은 선상에 배치하기 위해 사용하는 속성 float 미적용 화면 ▼ float만 적용한 화면 ▼ - 부모 요소는 자식 요소가 float 되면 해당 요소의 height를 알지 못하게 된다. 즉, float 요소는 공중에 뜨게 된다. 단, body는 float된 요소의 height 값을 인지하고 있다. (브라우저 창의 크기를 줄이면 float 요소의 height가 다 보일 수 있도록 스크롤바가 생성됨.) 스크롤바 생성 화면 ▼ float - clearfix hack 적용 화면 ▼ Clearfix Hack 부모 요소가 자식 요소의 height를 인지하지 못해 자식 요소를 감싸지 못하는 문제를 해결하는 방법 1. 가상 요소 ::after 사용하기 1 2 3 4 5 6 7 8 9 10.. CSS 2019. 1. 29. Font Awesome (버전 4와 버전 5 사용 방법) CDN 사용 방법으로 작성 1. CDN 삽입(Content delivery network 또는 content distribution network)콘텐츠 전송 네트워크는 콘텐츠를 효율적으로 전달하기 위해여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템 #버전 4 CDN (1과 2중 하나만 작성)① https://cdn.fontawesome.com 접속- email 작성하면 해당 메일로 CDN 발송cs ② 구글 검색cs # 버전 5 CDN① https://fontawesome.com/start 접속cs ※ head 태그 안에 CDN 작성 font awesomeColored by Color Scriptercs 2. Font Awesome 아이콘 삽입https://fontawesome.com/ 접.. CSS 2019. 1. 4. media query 화면 크기에 따라 특정 스타일 적용이 가능(반응형 웹사이트 환경 조성) 123456789101112131415161718192021222324 Media Queries body{ background-color: yellow; } @media screen and (min-width: 320px) and (max-width: 640px) { body { background-color: red; } } Colored by Color Scriptercs 참고사이트▼ 노마드 코더 - Nomad CodersMDN 웹 문서Google Developers CSS 2019. 1. 3. animations DOCTYPE html> animations .box { height: 200px; width: 200px; background-color: red; animation: .5s rotateScale infinite ease-in-out; } /* 애니메이션의 중간 상태를 지정 */ @keyframes rotateScale { /* from-to 또는 % 작성 가능 */ /* from{ transform: none; } to{ transform: rotate(1turn) scale(.5, .5); } */ 0%{ transform: none; } 50%{ transform: rotate(1turn) scale(.5, .5); } 100% { transform: none; background-color: y.. CSS 2019. 1. 3. pseudo-class 선택자(selector)에 추가된 키워드 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 Selector - Pseudo Selector input[type="submit"]{ background-color: red; } input[required] { background-color: blue; } /* input과 형제 요소인 .box 선택 */ input + .box { background-color: darkorange; } .box { background-co.. CSS 2019. 1. 3. flexbox(Flexible Box module) CSS3에서 등장한 1차원 레이아웃 모델(행과 열만을 다룸) 화면 크기에 상관없이 웹 페이지의 레이아웃을 동일하게 유지하고 싶을 때 사용 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 flex html, body { height: 100%; } .father { height: 100%; display: flex; /* 플렉스 요소의 x축 방향 정렬 방식 설정, default: flex-start */ justify-content: space-around; /* 플렉스 요소의 y축 방향 정렬 방식 설정, default: stretch */ align-items: center; /* 플렉스 요소가 배치.. CSS 2018. 12. 29. 이전 1 다음