여전히 개발일지는 어떻게 쓰는건지 모르겠지만 그냥 느낌가는대로 프로젝트 진행하며 공부했던 것들 까먹지 않게 적어두기
1. 화면분할 여러개
처음엔 아무것도 모르고 구글링해서 나온 코드를 그대로 갖다 썼었는데, 창을 줄일때마다 화면 구성이 점점 안쪽으로 밀리길래 뭐지 싶었다. 알고보니 내가 쓴 코드는 비율을 이용한 화면분할이었는데, 이건 반응형 웹을 만들 때 쓰이는 방식이어서 그랬던 것. 화면이 밀리는걸 원하지 않았다면 픽셀로 고정해줬어야 했다.
<head>
<style>
.left {
width: 30%;
float: left;
}
.right {
width: 70%;
float: right;
}
</style>
</head>
<body>
<div class="left">
왼쪽은 화면의 30% 너비
</div>
<div>
오른쪽은 화면의 70% 너비
</div>
</body>조금 더 손보고 수정해서 반응형 웹으로 만들 생각이라 굳이 픽셀로 고정시키지 않고 일단 저부분은 그대로 놔뒀다.
2. css로 도형 만들기
.shape {
border-bottom: 100px solid #BB8F86; /*테두리 bottom에 두께를 줘야 모양이 생긴다*/
border-left: 40px solid transparent; /*테두리 왼쪽은 40px만큼 깎아내기.*/
border-right: 7px solid transparent; /*오른쪽. bottom은 그대로고 윗부분이 깎여 들어간다*/
width: 580px; /*너비는 580px. 위 테두리 bottom에 준건 두께(=높이)*/
transform: rotate(270deg); /*270도 회전시켜 원하는 책갈피 모양으로 만들어줬다*/
}
.shape:after { /*책갈피 아래 리본처럼 갈라진 부분*/
content: ""; /*content로 내용물을 만들어 붙이기. 실제 입력할 것은 없으므로 공란처리*/
position: absolute; /*상대적 위치*/
border-bottom: 100px solid #BB8F86; /*shape와 동일*/
border-right: 40px solid transparent; /*shape와 동일*/
transform: rotate(-180deg); /*리본모양을 만들고 싶기 때문에 shape와 반대모양으로 회전시킨다*/
width: 550px; /*윗부분은 shape에서 만든 경사진 모양을 살리기 위해 너비를 짧게 만들어 숨긴다*/
}
3. 모달 같이 연구
4. 인풋박스랑 출력창 연결
5. 인풋박스랑 텍스트에리어 차이
6. 텍스트에리어의 스크롤바, 오른쪽 아래 줄 없애기
7. 인풋박스는 테두리 없애기 먹히는데 텍스트에리어는 안먹힌 것. 알고보니 부트스트랩 설정
'스파르타코딩클럽 > 내일배움단' 카테고리의 다른 글
| 내일배움단 프로젝트 챌린지 최종 점검 (0) | 2021.12.13 |
|---|---|
| 내일배움단 메이킹챌린지 개인적인 후기 (0) | 2021.12.08 |
| 내일배움단 프로젝트 챌린지 중간점검 (0) | 2021.12.03 |
| 스파르타코딩클럽 내일배움단 웹개발 종합반 후기 (0) | 2021.11.21 |
| 웹종 5주차 (0) | 2021.11.16 |