밑줄 긋기.
border-bottom: 2px solid black;
글자 바깥 영역이 margin 이 마진 값을 0으로 하면 글자가 정렬
가로줄 긋기
ol{
border-right: 1px solid gray;
width:400px
}
ol태그에다가 우측으로 400픽셀만큼 떨어진 곳에 선을 긋게 한다.
<body> 본문 전체에다가 여백을 없애려면. body{
margin:0;
}
디자인만을 위해서 어떤 의미도 존재하지 않는 태그를 사용해야 한다.
태그 division의 약자.
감싸는 부모 태그.
#grid{
border:5px solid pink;
}
이런식으로 효과를 주면.
아이스크림
케이크
div태그는 기본적으로 화면 전체를 쓰는 태그-- 자동 줄바꿈.
div와 같은 기능하면서 부분을 쓰는 inline태그인 span태그.
저 두 태그를 묶어서 효과를 주는 방식인 grid 방식.
아이스크림
케이크
이렇게 두 태그를 포함할 수 있다.
display:grid;
grid-template-columns: 150px 1fr 1fr은 남은 공간을 다쓴다는 뜻, 즉 줄바꿈이 아니라 빈공간으로 들감.
fr은 화면전체를 쓰게 하는 단위.
grid-template-columns: 2fr 1fr;로 한다면.
이렇게 2대1 비율로 나온다.
그리드는 최신 css기술, 이런기술을 써도 되는가에 대해 알려주는 사이트
현재 사용되는 기술의 통계를 알려주는
https://caniuse.com/
- MARGIN을 없애고 padding을 늘리는 식으로 조절해본다.
- div,span은 디자인만을 위한 의미없는 태그.
- 그리드를 사용해서 태그를 묶는다.
- fr은 화면전체를 쓰게 하는 단위.
왕초보