기본적인 페이지 구도 이해
블럭
h1 - h6 p ul ol li form filedset sectioning
블럭의 특징 = 가로(border좌우+margin 좌우+ padding 좌우+ width가 auto) == 부모의 width만큼 커진다.
블럭요소의 가장 큰 특징 => 크기 (width , height , margin padding)를 가질수 있다. 아래쪽으로 쌓인다.
container 박스가 있다면 그 하위요소를 정리하는것
인라인 = X 크기를 가질수없다.> 행에 들어갈 수 있다. but input, img 태그는 크기는 가질수 있다.
테이블 = O 데이터를 정리하는 역할
인라인블럭 = O 행에들어가지만 크기를가질수있다.
ul 의 자식요소는 li만 가능하다.
ul과 li이 사이에는 다른요소를 넣을수 없다.
인라인 태그는 항상 블럭태그안에있어야한다.
인라인크기 = 글자크기(font size 와 line-height가 결정)
==> 작성순서
제목 - h1~h6(인라인태그 이외는 안됨)
제목작성 후 내용(블럭) - p, ul li(순서 없는목록), ol li(순서 있는 목록), dl dt(제목)+dd(내용), form, ...
블럭태그 내부 인라인 - span ,a input, label ....
div로 묶어서 스타일 처리
input type = radio. checkbox, date, datetime, month, color, search, text,
password, reset, submit, button, email, url
Sprite 이미지를 만드는 이유?
모든 이미지를 일일히 or 모든 테이블 정보를 일일히 가져오게 되면 서버환경에따라 로딩속도가 차이가 날 수 있다
=>요청사항 - 클라이언트가 개당 게시물당 요청이 느리다
==> 해결방안 - onload (페이지 로딩시 먼저 정보를 들고 오는방법)
display : Flex; 는 컨테이너 요소에서 자식요소를 정리
블럭인 자식요소들을 일행정렬, 일렬정렬을 원하는 형식으로 하기위해서 사용한다.
여유공간을 잘 이용하려하는게 flex다.
container{
display : flex;
flex-direction: row || column;
justify-content: space-between || space-around || center || flex-start || flex-end;
여유공간을 사이에둬라 || 여유공간을 균일하게 두고 나누어라 || 자식요소를 가운데 두고 양옆에 여유공간을 둬라
start 자식요소들를 부모요소 시작점에 두고
end 자식요소들을 부모요소 끝점에 둔다.
align-items:stretch(default) || flex-start || flex-end || space-between || space-around || center
}
child {
flex: grow shrink basis;
0 1 auto
// 자라나다 , 줄어들다 , 기준
//부모의 크기가 자식요소에 나눠준 크기보다 더 작으면 grow 를 확인
반대로 크기가 자식요소에 나눠준 크기보다 더 크면 shrink를 확인
}
grow = 여유공간을 나누는 요소 => 부모의 여유공간만큼.
(1을 주게되면 3개의 자식요소가 있을때는 여유공간을 3개로 나눈다)
if) 첫번째 자식요소의 grow 가 2 일때는 여유공간을 4개로 나누고 2개를 할당한다.
basis 비율요소 = auto = content크기 만큼
if) 자식요소들의 크기를 같게하려면 basis를 동일하게 부여하면 된다.
ms o mozlia web(chrome, safari) 대표하는 단어가 vender-prefix 라고하고 이러한 요소들이 가지고있는 CSS요소가 있다.
그러한 요소를 제거하기 위해 -webkit-appearance:none ;을 사용한다
컨텐츠 요소가 겹쳐져있을때는 무조건 absolute 를 사용한다. (z-index 로 순서를 정할 수 있다.)
220518 - 추가된 내용
body에 크기를 주는것이 아니고 content요소를 전체 감싼 wrap를 구성하여 크기를 지정
단위
rem - 단위 (em , px ...등)
은 중간 단계의 역할을 한다 (다른 설정을 하기 위함.)
em // px
자신을 기준으로 박스사이즈를 지정 ( fontsize에 약 1.2배 공간을 주겠다.)
박스를 기준으로 자신의사이즈를 지정 (박스의 크기를 지정하고 안에 폰트를넣는다.)
width 가 auto이면 부모의 속성을 따라간다
opacity
.