22강
C(Cascading)S(Style)S(Sheet)
캐스케이딩(Cascading):상속받은 여러가지 css선언중에 어떤것을 적용할지 우선순위를 정하는것
많은 스타일 요소중 어떤 스타일을 브라우저에 그릴지 결정해주는 css우선순위적용원리.
첫번째, 중요도: 해당 css가 얼마나 중요한 것인지에따라.
브라우저에서는 css 가 선언된 위치에따라 판단.
브라우저 스타일시트<사용자스타일시트(고대비모드사용, 사용자 폰트지정)<개발자스타일시트(해당 개발자가 만들어서 넣어놓은 스타일시트)
개발자 스타일 시트 에서의 중요도
링크태그로 연결한 css파일 <html안에 style태그 요소 를 사용한 css <html문서에 인라인 스타일로 직접부여한 css
두번째, 구체성(명시도)
순서==>
부모에게 상속받은 속성(가장 구체적이지 않음.즉, 낮은 명시도 가짐) <전체선택자(*) <태그선택자<클래스선택자/가상선택자 <아이디선택자
아이디와 클래스: 아이디는 딱하나의 요소에만 부여가능, 클래스는 여러개의 요소에 중복해 적용가능.
선택자가 지칭하는 범위가 포괄적이고 광범위할수록 우선순위가 낮고 구체적이고 작은범위일수록 우선순위가 높다.
세번째(마지막), 선언순서
중요도와 명시도가 동일한 여러개가 중첩되어있는경우 (ex 같은 아이디 선언이 여러개 있는경우): 가장 마지막에 선언했던것이 적용됨
모든 조건을 다 무시하고 강제로 명시도 끌어올리기
: !important를 속성값에 붙여줌.띄어쓰기없이
다만 전체 스타일 시트의 우선순위를 꼬아버릴수도 있으니 최소화해서 사용. 가능하면 사용하지 않는 것이 좋음
23강
배경
background-color,background-image
background-image: url("이미지 경로")
background-image: linear-gradient(방향(to left==>오른쪽에서 왼쪽으로 간다 같은 원리로 to right, to bottom, to top . 방향 생략되었을 경우 기본값은 아래에서 위.) ,시작색상, 종료색상)==>이것을 사용해 해당 옵션 제공된 그라데이션 줄 수 있음
linear-gradient 는 일직선형 그라데이션,
radical-gradient는 원형 그라데이션,
conic-gradient는 콘형//
background-image는 여러 이비지나 그라데언트를 콤마로 연결해 여러개 깔아주는 것(적용하는것) 가능(먼저 선언한것이 위에, 나중에 선언한 것이 아래에 깔림.
background-position 이미지 위치지정
background-position: center;
background-position:top
background-position:bottom
background-position:left
background-position:right
background-position:top left,
background-position:top right,
background-position:x축값 y축값 ;으로 구체적인 수치 입력가능.
background-repeat==>배경이미지의 반복여부, 반복방향 정함.
기본값은 repeat. 바둑판식처럼 반복.
하나의 이미지만 원한다면
background-repeat: no-repeat;
한 방향으로만 반복
x축(가로)으로만 반복
background-repeat: repeat-x
y축(세로)으로만 반복
background-repeat: repeat-y
배경 크기만 조정
background-size: auto;==>얘가 기본으로 그 이미지가 가지는 고유한 값으로 들어가게됨.
background-size: cover
이미지가 찌그러지지 않도록 꽉맞춰서 늘려 빈틈없이 채워줌.
background-size: contain
이미지를 늘리는 것은 동일,빈틈이 남더라도 이미지가 다 보이게하는 것 잘리지 않게 하는 것을 더 중요시 함.
background-size: x축값(가로) y축값(세로);
이런식으로 구체적인 값넣기도.
background-attachment: => 배경이미지의 스크롤 여부 정함.
background-attachment: scroll==>기본값. 속성 안줘도 자동으로 들어감..내부 스크롤 적용 안됨(내부스크롤을내려도 변화 없음)
background-attachment: fixed;
=>배경 고정.
background-attachment: local;
=>스크롤과 비슷하지만 얘는 내부 스크롤 움직이면 애부에서도 스크롤 적용됨
background: ==>단축속성. 오늘 배운것 전부 적용가능
순서중요
*color image repeat position
/size attachment;
대부분의 경우에는 단축속성을 이용하니 순서 유의
다만, background요소는 html요소 안에 이미지태그나 비디오테그를 넣었을 경우에는 사용이 불가.
이것때문에 만들어진것이
object-fit ==> 이것을 사용할 시 <image>나 <video>등 대체 요소의 내용을 지정된 높이와 너비에 맞출 수 있음
object-fit: fill
==>기본값.
가로값 새로값 인위적으로 주면 그싸이즈에 맞춰서 이미지가 찌그러지며 늘어나 꽉채움
object-fit: cover
==>이미지 안에 빈틈이 생기지 않는 범위 내에서 적절한 범위로 이미지가 늘어나며 화면 즉, 요소의 영역을 꽉채움
object-fit:contain
==>여백과 상관없이 이미지 전체가 딱 보이게 함.
object-fit: none
==>이미지의 원본 비율대로 보여줌
object-position
==> <image>나 <video>같은 대체 요소의 정렬방식 지정
object-position: x축 y축;구체적인 수치입력가능.
object-position: center top;==> 가운데 상단에서부터 이미지 보이게 하는것 가능
object-position: left
등 방향 입력 가능.
24강
색상
색상이름, 핵스(hex)색상코드,rgb/rgba
색상이름: 총 216가지 표기 가능==> 이것들을 웹 안전색상 이라고 함.즉, 어떤 운영체재,어떤 브라우저에서도 '안전하게'그려지는 색을 의미.
핵스(hex)색상코드: 16진수 6가지로 색상표기. 앞에#붙어있음.
rgb(red,green,blue)=>각 요소에는 0에서 255사이의 수를 입력할 수있음.
rgba=>여기서 a는 는 알파라는 뜻으로 투명도를 정할때 사용. 1은 100%, 소수점이하로 하면 반투명한 색생 지정가능.
또는 opacity사용.요소의 불투명도 설정.
0부터 1까지의 숫자 지정
25강
단위2
상대단위
vw / vh
:요소의 규격을 viewport의 너비값과 높이값에 비례하여 결정.
viewport=> 브라우저 안에서 실제로 화면이 그려지는 영역
위의 메뉴바와 테두리 제외하고 실제 화면이 노출되는 영역
vw / vh (viewport width/viewport height)
viewport가 만약 1200px x 920px이고
vw가 10vw==10/100=0.1px,
vh가 50vh면 =50/100=0.5px
1200 x 0.1=120px
920px x 0.5 = 460px
100vw=1px==>1200 x 1 =1200px
26강
포지션
트렌지션
단위 심화
:css에서도 함수 사용할 수 있을까?
calc() =>소괄호 안에 사칙연산 넣을 수 있음. 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용함.
속성: 속성값==> 속성값에 calc()을 써서 사용하고 이때 소괄호 안에 덧셈이나 뺄셈 사용시 반드시 부호 앞뒤에 공백필요.곱셈과 나눗셈은 상관없음.
27강
position:html 요소가 배치되는 방식을 결정
static==>기본값
relative
absolute
fixed
sticky
이렇게 다섯개의 속성값이 있다.
각각의 차이를 알기 위해서는 먼저 알아야 할 것이 있다.
top
left
bottom
right
이들의 차이이다.각각의 해당 방향을 기준으로 요소의 좌표값을 변경할 수 있다.
position:static==>얘가 기본값.position 을 설정하지 않거나 position:static으로 설정하면 원래위치에 있어야하는 위치에 배치된다.
이때에는 top,left,bottom ,right를 이용한 인위적인 위치조정이 불가능하다. 속성값 top: ; left: ;이런것들을 주어도 적용되지 않아 없는 코드나 마찬가지라고 보면된다.
position: relative==> 원래있던 자리를 기준으로 top,left,bottom ,right를 이용해 요소의 위치를 조정할 수 있다.
top,left,bottom ,right를 사용하지 않을 경우 static과 같은 위치에 있다. 다만 이 경우(position:relative;)에는 op,left,bottom ,right를 이용,좌표값을 조종해 줄 수 있다는 것이 차이이다.
position: absolute==> 웹브라우저 안에있는 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
절대 좌표: 1. absolute가 적용된 부모요소 중 relative가 적용된 요소를 찾아 그 요소의 영영을 기준으로 삼음.
2. 만약 부모요소,조상요소에서 relative가 하나도 없을 경우에는html의 body전체를 기준으로 삼는다.
position: fixed;
스크롤을 내려도 사라지지않고 화면 내에서 특정 영역에 고정되어있는 메뉴같은것들.viewport 기준으로 위치 설정하는것.
==>위치는 그대로 고정되어있어 스크롤을 내려도 그 위치가 바뀌지 않음.(원하는 위치,원하는 좌표에 고정시켜줄수 있음)
position: sticky;
=>static 과 fixed가 합쳐진 것이라고 보면됨.
원래는 원래위치에 있다(static과같은 위치에 있다가)가 스크롤이 해당 좌표를 벗어나면 fixed처럼 지정된 좌표의 위치에 있게된다.
z-index:==>여러개의 요소가 겹쳐져 있을때 무엇이 앞으로 나올 지 결정하는 속성
z는 z축을 의미. 일반적으로 이차원은 x축(가로) y축(세로).여기에 3차원으로 확장하면 대각선으로 z축
z-index: auto; ==>기본값
따로 속성값을 지정해주지 않으면 html요소의 기본값으로 자리잡음.
여기에 1 2 3 ...숫자로 값을입력해 줄 수 있는데 숫자가 클수록 더 앞쪽으로옴
주의!!position이 static이나 적용되지 않을경우에는 z-index도 적용되지 않는다!
28강
transition
변화, 전환
css의 속성을 이용한 변화의 전 후 사이에 에니메이션을 추가하여 움직임을 부드럽게 만들어 줄 수 있음.
transition-property: ==>
어떤 속성의 transition을 적용할 것인지를 결정해 주는 속성
특정 속성을 지정해주거나, all이라는 키워드를 이용하여변화가 일어나는 해당요소의 모든 속성을 한꺼번에 지정하는 것도 가능.
transition-duration: ==>transition즉, 전환 효과에에 걸리는 시간을 지정해주는데 초(s), 혹은 밀리초(ms) 단위로 지정가능.
transition-timing-function
트렌지션이 일어나는 속도의 패턴을 지정함.
linear :일정한 속도로 변화한다
ease:시작할때는 빨라지다가 느려진다
ease-in:천천히 시작했다가 속도를 높여끝난다.
ease-out:빠르게 시작했다가 , 천천히 끝난다.
ease-in-out:천천히 시작--->정상속도--->빠르게 마무리
.
.
.
.
등
transition-delay: => 실제로 실행되기까지의 기다려야하는 시간 지정
transition: =>트렌지션 단축속성
순서
transition: property(속성) duration(걸리는 시간) timing-function(속도) delay ;**
단축속성은 순서가 중요
