html5 -> 기본 형식 자동 완성
div는 block이 default이다
block은 화면의 끝까지 공간을 차지한다
자기 크기 만큼 딱 맞게 차지하게 만들고 싶으면 inline으로 변경해야 한다
넓이는 줄이되 높이는 유지하고 싶으면 inline-block으로 설정
ul=unodered list
ol=oerderd list
li = ul,ol 사이에 사용하는 리스트
css적용법 : head에
<link rel="stylesheet" href="CSS/styles.css"/>
걸어야 한다
nav{
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: space-between;
}
->grid-template-colums 1fr씩 주면서 1대1비율 만든다
*{padding, margin} 전부 0으로 줘야 화면에 꽉 차게 나온다
box-siging : border-box -> 박스 크기를 패딩과 마진을 포함한 크기로 잡아서 더 직관적으로 계산 가능하다
display : grid를 줘야 내부컨텐츠를 정렬하는 justify-content를 사용할 수 있다
박스 안에서 다시 박스가 필요할때는 table을 이용해보자
colspan : 만약 테이블에 2개의 열이 필요한 행과 1개의 열만 필요한 행이 있을때 하나의 열만 필요한 행에 사용한다
<tr><td colspan ="2" ></td></tr>
position : relative; ->static이 default라 변경해줘야 이동가능하다
background-size : 100% 100% ->세로 가로 100프로
css에서 background로 이미지 넣으면 height를 줘야 한다
'프론트' 카테고리의 다른 글
JS_basic (0) | 2024.06.02 |
---|---|
JS기초(코딩앙마) (0) | 2024.02.21 |