position 속성 값인 relative와 absolute의 개념을 더 자세히 배우다. parent 아이디를 가진 회색 영역 안의 child1 빨간 영역이 absolute라서 회색 우측하단에 위치하게 된다.
Front-End
요소의 위치를 어떤 기준으로 배치할지를 배우다. Child Child Child 결과창을 보고 relative와 absolute를 구별하면 쉽다.
background 속성에 대해서 배우다. background-image: url(이미지 주소) background-repeat(반복) background-size(이미지로 사이트의 너비를 꽉 채움) 너비와 높이, 위치를 알려주는 사이트 http://www.spritecow.com/
꼭짓점 경계선을 둥글게 만들어주는 속성인 border-radius를 배우다. 정사각형을 기준으로 하면 px, % 상관없지만, 직사각형을 기준으로 하면 px는 비율이 똑같이 둥글어지고, %는 나뭇잎? 변의 길이의 비율에 맞게 둥글어진다.
요소의 크기를 화면에 표시하는 방식을 배우다. content-box border-box 정리 border-box는 border + padding + content content-box는 오직 content의 크기만을 정의한다.
박스 모델 구조의 padding을 배우다. 실습 시작 BOX BOX BOX BOX 테두리 기준으로 요소의 안쪽 여백을 채우는 것이기 때문에, left를 사용하면 왼쪽에서 오른쪽으로 늘어나는 모습을 볼 수 있다.
박스 모델 구조의 margin을 배우다. radius는 나중에 배우지만 꼭짓점을 둥글게 만들어 준다.
display 속성의 값 중 하나인 none을 배우다. Quiz! Q. 여러분은 비오는 거 좋아하시나요? A. 아뇨. 요소를 안 보이게 하는 none.
