-
z-index z축 (레이어 처럼 쌓을 수 있음) 무조건 position값 줘야 쓸 수 있음
-
border-spacing 셀 사이 여백
-
vertical-align속성 : 셀 안에 수직 정렬 ; 인라인 요소끼리의 상하단 맞출 수 있다. top/middle/bottom :inline 또는 table-cell box에서의 수직 정렬을 지정합니다. (블록레벨은 안돼)
width auto 와 100%의 차이
auto는 자기 영역부터 남은 공간
100%는 정해진 width대로 감
반응형
반응형 레이아웃: 화면 크기 따라 레이아웃 바뀌는 것
반응형 사용하면 단위를 절대단위 아니고 상대단위 사용해야해
절대값 px
상대값 % , em, rem, vw, vh, vmax
calc()연산함수
clac(50% -25px) +-*/
calc(50% - 4.5px) 값 사이에 간격 한 칸씩 무조건 줘야함 (안줘서 출력 안된 경험 有)
가변글꼴
- em(equal to M) M사이즈랑 같은 크기다
- rem(equal to root M) 근본 M사이즈랑 같은 크기다( 사이즈)
- 1em =16px 이 디폴트값
- 1em은 상위요소를 기준으로 정해짐
css <style> body{font-size: 16px;} <얘가 상위요소 .ex1{font-size: 16px;} .ex2{font-size: 1em;} .ex3{font-size: 100%;} </style> <body> <h1 class="ex1">폰트사이즈</h1> <h1 class="ex2">폰트사이즈</h1> <h1 class="ex3">폰트사이즈</h1>여기서 상위요소는
<body>이다 body 크기가 16px 이므로 16px 을 기준으로 em의 사이즈가 정해진다.<div class="box1"> 박스1 <div class="box2"> 박스2 <div class="box3"> 박스3 <div class="box4"> 박스4라는 마크업 하면
.box1{width: 500px; height: 500px; border: 1px solid red;font-size: 30px;}
.box2{width: 400px; height: 400px; border: 1px solid blue;font-size: 2em;}
-상위요소인 box1 기준이라 60px
.box3{width: 300px; height: 300px; border: 1px solid green;font-size: 2em;}
--상위요소인 box2 기준이라 120px
.box4{width: 200px; height: 200px; border: 1px solid purple;font-size: 2em;}
--상위요소인 box3 기준이라 240px
- rem : 가장 최상위 요소를 기준으로 사이즈 정해짐
<html>이 가장 상위요소이므로
css에서 html을 선택자로 잡고 폰트사이즈 조정하면 rem의 기준 된다html{font-size: 20px;} 하면 .box2{width: 400px; height: 400px; border: 1px solid blue;font-size: 2rem;}box2는 box1이라는 상위요소 있지만 최상위요소인 html을 기준으로 크기가 조정되어서 40px됨
뷰포트(보여지는 화면)
vw(viewport width) 뷰포트 기준
vmin 뷰포트기준으로 작은 쪽/ vmax 뷰포트 큰 쪽 기준
vh는 화면 높이를 기준으로 할 때 쓴다.
.box5{width: 100vw; height: 19.72222222222vw;/해상도화면360px이고 사용하려는 요소의 넓이는360px이면서 높이가 71px일때 >>
width:100vw = 360px
height:71나누기360(해상도)=0.1972222222
,0.1972222222100=19.72vw 인거다~
max-width / min-width
{width: 100%; max-width: 800px;} / max이하 /
{width: 100%; min-width: 700px;} / min이상 /
이름 그대로 최대 크기/ 최소크기라고 생각하면 돼
max-height / min-height도 마찬가지
-
포인트랑 픽셀은 다르다
320x480 point = 640x960px (point에 2 곱해준다고 생각하면돼) -
이미지 넣을 때 1배수 이미지를 쓰게 되면 이미지가 퍼지게됨
가장 작은 사이즈를 기준으로 2배수 3배수 해서 그걸 기준으로 %계산해서 맞춰주기
모바일코딩
- 모바일코딩 할 때 a는 모두 블록처리 a{display : block} ; 터치환경에서는 더 미스가 많이 나기 때문에 블록 처리해야 편해~~~ 실제 이미지보다 넓게 영역 잡아 주는게 편함
- text-size-adjust : none 하기 (모바일 폰트크기 관련) none 안하면 화면 크기 따라 자동 조절될 수 있기 때문에 none함
비율 맞게 높이 계산
- width값을 %로 줬을 때 비율에 맞게 height값을 주고 싶다면 padding-top을 늘려주기
.box2{width: 70%; background: url(./img/shop2.png) no-repeat; background-size: cover; border: 3px solid blue; display: block;padding-top: 63.300%;}
/ 548/606 x 70 /
(배경이미지의 높이/ 배경이미지 넓이 )x width 지정된 % 를 패딩탑으로 지정해주기
미디어쿼리
사이트에 접속하는 장치에 따라 특정한 css스타일을 사용하도록 해줌
@media [only / not] 미디어유형 [and 조건] * [and 조건]연산자
- and : 조건을 계속 추가할 수 있다
- ,(쉼표) : 동일한 스타일 유형을 사용할 미디어 유형과 조건이 있다면 쉼표를 이용해 추가합니다.
- only : 미디어쿼리를 지원하는 웹브라우저에서만 조건을 인식하게 한다.
- not : not 다음 지정하는 미디어 유형을 제외한다.
미디어쿼리를 이용하면 해상도에 따라 css를 다르게 적용할 수 있다
- max 적용할 때는 큰 값부터 내려와야 함 (1920 -> 1200 -> 960..)
- min 적용할 때는 작은 값부터 내려와야 함(960 > 1200 > 1920
우선순위 생각해서 고쳐야함 경로가 있는 것이 더욱 우선순위etc
속성 : value값 !important << 이거 쓰면 이 값이 무조건 최우선순위 이거 적어놓으면 이 값만 적용됨(다른 거 적어도)
