3.16 클론사이트 만들기
1. 페이지에 사진 크게 넣을 때 높이까지 지정해줄것
- 그 다음에 내용 작성할때 사진 뒤로 넘어가서 안보이게 되는 경우 방지
2. 하이퍼 링크 목록 만들기 순서 주의
<li><a href="#">학교소개</a><li> (ㅇ)
-----------------------------------
3. padding주기
시작지점에서 퍼지게 해줌. 원래라면 왼쪽 위 모서리 맨끝부터 시작이라면 패등을 주면 시작점이 패딩 준 만큼 오른쪽 아래로 이동하게 되는것임. 박스 크기도 커짐.
-----------------------------------
4. 사진넣기
개발자도구에서 이미지 저장- 우클릭 눌러서 open in new web해서 저장
css창에 코드입력
.box{backgrouund : url("경로") no-repeat;}
<!-- 경로 입력 한 뒤에 no-respect를 넣는 이유는 사진이 반복적으로 나오지 않게 하기 위함임>
--------------------------------------------------
5. 버튼모양 만들기
5-1) 버튼 모양을 만들기 전에 먼저 해당 html이 인라인 태그인지, 블록 태그인지 확인하고 만약 인라인 태그라면
높이와 넓이를 지정해주기 위해
display: block; 을 걸어준다.
5-2) 원하는 높이와 넓이를 지정해준다.
wid: 100px;
height: 30px;
5-3) 버튼 배경색 지정
background: #81b4f2;
5-4) 엘리먼트간 간격을 정해서 박스의 위치를 정해준다. 예를 들어 위에있는 엘리먼트랑 떼어놓고 싶으면 그만큼만 top margin을 주면 됨.
margin: 40px 0 0 0;
5-5) 박스 모양을 다듬어서 버튼처럼 만들기
border-radius 를 사용해서 둥글게 만들어줌. 보통 높이의 반만큼 px지정해주면 됨. 예를 들어 버튼 높이가 30px이면
border-radius 15px;
5-6) 버튼 안에 글자 색과 폰트 사이즈 지정
font-size: 14px;
color: #fff; /* #fff는 흰색*/
5-7) 버튼 안에 글자를 정리. line-height 사용해서 글자 윗 공간 확보하고, text-align사용해서 글자 좌우 정렬
line-height: 32px;
text-align: center;
6. 패딩과 선 사이즈 고려하지않고 바로 박스 사이즈를 줄일 수 있음.
box-sizing: border-box;
을 위에 쓰고 폭과 높이를 원래 지정하고싶은대로 해주면 됨.