CSS grid
header {
background-color: black;
padding: 20px;
transition: background-color 0.5s ease-in-out;
height: 700px;
display: grid;
grid-template-columns: 700px 1fr;
grid-template-rows: 80px 1fr 200px 1fr;
}제일 먼저 display : gird를 설정하고
grid-template-colums와
grid-template-rows로 열과 행을 원하는 모양으로 잡아줄 수 있다.
위의 코드는 2열 4행으로 만든 코드다!
첫번째 열의 크기는 700px로 고정이고,
두번째 열의 크기는 1fr로 설정해서 남는 크기만큼 생성하도록 했다.
첫번째 행의 크기는 80px 고정,
세번째도 200px 고정
두번째와 네번째만 남는 크기만큼을 자동으로 갖도록 1fr설정
모든 행과 열을 1fr로 하면
다 같은 크기의 행과 열로 생성됐던 것 같다..!!
하지만 나는 아래의 사진처럼 원하는 모양이 있었기 때문에 고정된 사이즈를 정해서 grid를 생성했다.
위의 사진을 보면 숫자가 써있는데,
상단은 colum의 번호
좌측은 row의 번호다.
.home {
grid-column: 1 / 3;
grid-row: 1 / 2;
height: 30px;
font-size: 20px;
}
.top-rated {
grid-column: 2 / 3;
grid-row: 2 / 5;
margin: auto;
}그래서 The Movie가 속해 있는 home클래스의 위치를 위의 코드와 같이 설정해주었다.
grid-column: 1 / 3 colum은 1번부터 3번까지 모두
grid-row: 1 / 2 row는 1번부터 2번까지
.title-Text {
margin-left: 100px;
grid-column: 1 / 2;
grid-row: 3 / 4;
font-family: "TheJamsil5Bold";
color: rgb(183, 183, 183);
width: 550px;
text-align: justify;
}.search-container {
margin-left: 100px;
grid-column: 1 / 2;
grid-row: 4 / 5;
}위에 설명했던 것과 같은 방법으로 grid를 설정해 주었다.
결과물
참고로 grid선은 개발자 도구에서 grid버튼을 누르면 확인할 수 있다.
어려웠던 점
대부분의 태그들은 위치를 정해주면 그리드 시작 모서리에 위치하는데,
a태그는 a태그 안의 글자가 그리드 시작점에 위치해서 padding값을 준 부분이 위쪽 그리드를 계속 침범했다.
아직까진 해결방법을 찾지는 못했지만,
a태그 자체가 가진 속성 때문인 것 같다.
그래서 다음 프로젝트 진행시에는
처음부터 cssreset 파일을 생성해서
기본적으로 태그들에 적용되어 있는 css를 다 삭제하고 시작해야겠다고 생각했다..!
나중에 적용하면 또 힘들어 질 수 있기 때문이다.. 😂
Git add, commit, push 취소하기
가끔 수정사항을 다른 브랜치로 잘못 올렸다던가 문제가 발생해서 취소해야 될 상황이 발생하는데,
그때 참고하기 좋은 사이트다.
들어가서 보면 알겠지만,
add와 commit을 취소하는 건 그래도 간단한 편이고,
push를 취소하는 건 좀 복잡하다.
결론은 push는 신중하게 해야 한다는 것이다!😂
[Git] git add 취소하기, git commit 취소하기, git push 취소하기 - Heee's Development Blog
Step by step goes a long way.
gmlwjd9405.github.io
배포 사이트
- netlift
- vercel
리팩토링
처음 쓸 때부터 확실하게 쓰는게 좋다.
