CSS (24) 썸네일형 리스트형 23. CSS 우선순위 계산 CSS 우선순위 계산 동일한 속성을 적용한 경우 나중에 적용한 것이 우선 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용된 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 계산식 inline: 1000점 id 속성: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0순위 CSS 우선순위 계산 예제 HTML CSS 우선순위 div 1번(인라인 스타일 우선: aqua) div 2번(id 점수 우선: deeppink) div 3번(class 점수 우선: greenyellow) div 4번(같은 속성의 경우 나중에 적용한 속성이 우선: pink) div 5번(같은 요소일 경우 나중에 적용한 속성이 우선: purple) l.. 22. animation animation 요소의 현재 스타일을 다른 스타일로 변환 @keyframe 시작: 0%, from 과정: 1%, 3%, 10%, ... 끝: 100%, to 0% 5% 50% ... 100% 장면1 장면2 장면3 끝장면 animation-name 애니메이션의 이름을 설정 animation-fill-mode 애니메이션이 끝난 후 어떻게 처리할지 설정 forwards: 애니메이션 키프레임이 완료 되었을 때 마지막 프레임을 유지 animation-direction 애니메이션의 진행 방향을 정하는 속성 reverse: 반대 순서로 진행 alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행 reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행 animation-dura.. 21. transition transition 요소에 추가할 css 스타일 전환효과를 설정 추가할 전환효과나 지속시간도 설정 property 요소에 추가할 전환효과를 설정 timing-function 전환효과의 값을 설정 timing-function 종류 linear: 처음부터 끝까지 일정한 속도 선택자 {transition: 적용할 요소 linear 시간;} ease: 전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝 선택자 {transition: 적용할 요소 ease 시간;} duration: 전환효과를 나타내는 시간을 설정 선택자 {transition-duration: 시간;} delay: 설정한 시간만큼 대기하다 전환효과를 나타냄 선택자 {transition-delay: 시간;} linear, ease 적용 예제 tra.. 20. 벤더 프리픽스(vender prefix) 벤더 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사 W3C CSS 권고한에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임 해당 속성이 적용되지 않았을 경우 표현해야할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가장 마지막에 작성해야 함 벤더 프리픽스(vender prefix) 접두사 -webkit- : 크롬, 엣지를 위한 접두사 -o- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -moz- : 파이어폭스를 위한 접두사 linear-gradient() 색상의 그라데이션을 설정 벤더 프리픽스(vender prefix.. 19. transform transform 2차원 좌표에서 요소를 변형시키는 속성 transform 속성 translate: 이동 rotate: 회전 scale: 확대, 축소 skew: 경사, 비틀기 translate 선택자 {transform: translate(값, 값);} transform original translate rotate 선택자 {transform: rotate(기울기 값);} transform original rotate scale 선택자 {transform: scale(값, 값);} transform original scale skew 선택자 {transform: skew(x축의 기울기 각도, y축의 기울기 각도);} transform original skew 18. 미디어 쿼리를 이용한 종합 예제2 카페 소개 HTML 카페소개 오시는 길 이달의 추천 카페 소개 영업 시간 : 오전9시 ~ 밤 10시 휴무 : 매주 수요일 (수요일이 공휴일인 경우 수요일 영업, 다음날 휴무) 오시는 길 서귀포시 안덕면 사계리 000-000 제주 올레 10코스 산방산 근처 이달의 추천 핸드드립 아이스 커피 1인분을 기준으로 서버에 각 얼음 5조각(한조각은 20cc) 넣고 추출을 시작한다. 평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다 아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다. My times with Coffee CSS @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/.. 17. 미디어 쿼리를 이용한 종합 예제 솔로의 식탁 HTML 솔로의 식탁 밥/죽 샐러드 반찬 토스트 음료/칵테일 솔로의 식탁 CSS #container { width: 100%; } header{ width: 100%; } header > h1{ text-align: center; font-size: 3em; /* PC:16px * 3, Mobile:12px * 3 */ } #menus{ width: 100%; } #menus > div{ height: 400px; border: 1px solid black; margin-bottom: 15px; position: relative; } #menus h2{ position: absolute; right: 3%; bottom: 10px; font-size: 2em; color: white; tex.. 16. 미디어 쿼리(media query) 미디어 쿼리(media query)란? CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 출처 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries#%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB.. 이전 1 2 3 다음
