image tag는 기본적으로 inline요소이기에 baseline을 갖고 있다. 그래서 아래의 빈 공백이 생길 수 있는데 정확한 규격에 맞추어 이미지를 출력하려고 할 때에는 image tag를 block 요소로 바꾸어 아래의 공백을 제거할 수 있다.
img{
display:block;
}URL 해시(HASH)는 몇 가지 쓰임이 있지만, 그중 CSS ID 선택자를 이용해 페이지 내 특정 위치로 이동할 수 있다.
해시는 이동할 수 있으니 잠시 a tag 내 href요소에 아무 기능이 동작하지 않게 선언할 수 있다.
<a href="javascript:void(0)"></a>position: absoulte;는 inline 요소를 block 요소로 변경시킨다.
position: sticky 는 가장 가까운 조상 스크롤 박스에 붙는다.
position: sticky 는 가장 가까운 블록 조상(보통 부모) 요소 범위 안에서만 움직인다.
첫번째와 두번째 명제는 스크롤 박스와 요소의 범위라는 것에 차이가 있다는것을 기억하자.
붙는 위치는 top과 left로 조절할 수 있다.
relative - absoulte관계는 container-item의 관계를 갖지만 단 요소의 조상 요소 중 하나가 filter,transfrom,perspective 속성 중
하나라도 갖고 있다면, 뷰포트 대신 그 조상을 컨테이닝 블록으로 갖습니다.
a tag는 특수하게도 자식 요소가 하나인 것을 전제하고 블록 요소를 들여올 수 있다.
flex-container
flex container, flex items
flex-wrap: 줄바꿈이 기본이 아님 (no-wrap)
justify-content: 수평 정렬
space-between : 끝점을 기준으로 여백을 균등하게 한다.
space-around : 사이 사이의 여백을 균등하게 한다.
align-items : 수직 정렬 (한 줄일때)
align-content:수직 정렬 (2줄 이상일 때)
flex-items
order : order의 숫자가 크면 클수록 정렬의 뒷 순서로 밀린다.
주의해야 할 점은 구조적으로 바뀌지 않고 보여주는 순서만 바뀐다.
flex : grow , shrink ,basis의 단축속성이다.
flex-grow 기본값은 0이다. 기본 너비를 제외한 공백을 나누어 계산한다.
값이 클수록 값의 배수만큼 크기에서 상대적인 우위를 차지한다. 공백이 없을때에는 적용되지 않는다. 그때에는 shrink를 사용한다.
e.g. ( 1 / 2 / 1 ) => ( 25% : 50% : 25% )
flex-shrink 기본값은 1이다. 값이 작을수록 커지며 flex-items들의 크기에서 숫자만큼의 우위를 차지한다. 감소의 유무(0,1)로 보통 레이아웃을 잡는다. 줄어들지 않아야 하는 요소는 0으로 설정한다.
flex-basis 기본값은 auto이며 item의 기본 너비를 설정한다.
item들의 width 값이 100px라도 flex-basis를 통해 기본 너비를 단위만큼 만들어 비율을 설정할 수 있다.
align-self 개별 아이템의 수직 정렬을 만든다.
간단한 시맨틱 구조잡기
<header></header>
<main>
<nav>
<div class="header">HEADER</div>
<div class="contents">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="footer">FOOTER</div>
</nav>
<section></section>
</main>body{
background-color: black;
color:white;
}
body * {
border: 1px solid;
box-sizing: border-box;
}
header {
height: 70px;
}
main {
height: calc(100vh - 70px);
display: flex;
}
main nav {
width: 200px;
height: 100%;
display: flex;
flex-direction: column;
}
main nav .header {
height: 40px;
}
main nav .contents {
flex-grow: 1;
overflow: auto;
}
main nav .footer {
height: 100px;
}
main section {
width: calc(100% - 200px);
height: 100%;
}