CSS 우선순위 계산 CSS를 적용할때 적용범위가 겹치는 경우가 많은데 그런 상황에서 어떠한 부분이 우선되어 적용 되는지 알아보자 1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선 3.내부 ,외부, 인라인 스타일 시트중 인라인을 우선시 적용 4. 계산식 -inline : 1000점 -id 속성: 100점 -class,속성 선택자 : 10점 -element : 1점 5.!important 를 적용하면 0순위 HTML 예제 코드 DOCTYPE html> Css 우선순위 #id-style{background-color: deeppink;} #id-style2{background-color: deepskyblue;} d..
transition - 요소에 추가할 css 스타일 전환효과를 설정 - 추가할 전환효과나 지속시간도 설정 property 요소에 추가할 전환효과를 설정 timing -function 전환 효과의 값을 설정 속성값들 ●linear: 처음부터 끝까지 일정한 속도 ●ease : 전환효과가 천천히 -> 빨라지고 ->천천히 ->끝 ●duration : 전환효과를 나타내는 시간을 설정 ●delay : 설정한 시간만큼 대기하다 전환효과를 나타냄 HTML 예제 코드 1. DOCTYPE html> transition div{ width: 100px; height: 100px; float: left; margin: 30px; } #bg-tr{ background-color: gold; transition: backgrou..
transform - 2차원 좌표에서 요소를 변형시키는 속성 translate: 이동 rotate : 회전 scale : 확대, 축소 skew : 경사, 비틀기 HTML 예제 코드 transform original translate rotate scale skew gradient 결과 ✔참조 벤더 프리픽스(vender prefix) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 블라우저에 그 사실을 알리기 위해 사용하는 접두사 -W3C CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙임 -webkit- : 크롬,엣지를 위한 접두사 -o- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -moz-..
미디어 쿼리(media query)란? 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나 ●반응형웹 하나의 웹사이트에서 PC,스마트폰, 테블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 문법 @media 매체유형 and(속성에 대한 조건){ css코드 .... } ✔매체유형 all : 모든 매체 screen : 컴퓨터,테플릿,스마트폰 print : 프린터 speech : 스크린 리더 예시를 보며 결과를 보자 HTML 코드 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum officiis nemo ali..
Flex 란? 수평정렬을 하기 위한 속성, 다양한 속성값과 결합하여 디스플레이를 나타내 보자 ●flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 1.nowrap : 기본값 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 2.wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘기기 3.wrap-reverse : 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 (단, 아래쪽이 아닌 위쪽으로 넘김) ●flex-direction 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 1.row : 기본값 . 가로로 배치 2.row-reverse : 가로로 배치(반대로) 3.column :세로로 배치되는 4.column-reverse :세로로 배치 (반대..
다단 레이아웃 이란? 텍스트를 column속성으로 다단을 생성해주는것 문법 column-count : 단의 갯수를 설정 column-rule : 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 column-gap : 단과 단사이의 여백을 설정 column-span : 단과 안의 포함된 요소를 다단편집에서 해제(all) HTML 코드 다단 레이아웃 Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dolorum error itaque dolores id, in, quasi eum obcaecati labore quam assumenda natus odio iure? Ut voluptatibus impedit suscipit si..
clear란? float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해주는 것! ✔ -float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬 -clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left,right,both) HTML 코드 clear Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusamus consectetur, cupiditate officiis ex id. Mollitia, quia? Maiores saepe fugiat, aspernatur libero distinctio voluptatum pl..
float란? HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들기 위해 사용하는것! float 특징 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소의 방향을 결정(left,right) - 컨텐츠 크기 만큼만 영역을 설정(블록) - float를 적용받은 요소는 다른 요소보다 위쪽에 위치(배경보다 위) 바로 코드를 보며 이해해보자 HTML 코드 float1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut est reiciendis, voluptatibus modi tempora vitae earum repudiandae autem inventore neque ess..
