과제 23.06.09 과제 JS-A 임휘훈 Header Nav Section1 Section2 Side Footer
Front-End/CSS
Cascading Style Sheets
여태 배운 것들을 응용하여 layout 실습을 하다. SMHRD 메뉴 서비스 고객지원 로그인 회원가입 blue yellow green 파란 영역과 노란 영역의 너비의 합은 전체 너비와 같다. #nav의 justify-content는 요소들의 정렬(포토샵)로 생각하면 된다. → 양 끝 있는 요소 끝에 위치시키고 나머지 요소들을 일정 간격으로 정렬
요소의 크기를 자유롭게 지정하게 해주는 flex를 배우다.
보통 웹 사이트의 상단바로 이동하는 버튼을 만들 때 사용하는 position의 속성값 fixed를 배우다. Top 파란색 영역의 Top 글씨를 누르면 웹 사이트의 상단 위치로 이동한다. 웹 사이트에서 위아래로 이동해도 파란색 영역은 화면의 우측하단에 고정(fixed)된다. 텍스트를 영역의 중앙으로 이동하기 위해서 가로의 중앙, 세로의 중앙으로 이동시키기 위해(.child3 참고)
position 속성 값인 relative와 absolute의 개념을 더 자세히 배우다. parent 아이디를 가진 회색 영역 안의 child1 빨간 영역이 absolute라서 회색 우측하단에 위치하게 된다.
요소의 위치를 어떤 기준으로 배치할지를 배우다. Child Child Child 결과창을 보고 relative와 absolute를 구별하면 쉽다.
background 속성에 대해서 배우다. background-image: url(이미지 주소) background-repeat(반복) background-size(이미지로 사이트의 너비를 꽉 채움) 너비와 높이, 위치를 알려주는 사이트 http://www.spritecow.com/
꼭짓점 경계선을 둥글게 만들어주는 속성인 border-radius를 배우다. 정사각형을 기준으로 하면 px, % 상관없지만, 직사각형을 기준으로 하면 px는 비율이 똑같이 둥글어지고, %는 나뭇잎? 변의 길이의 비율에 맞게 둥글어진다.
