HTML 기본

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를 줘야 한다