CSS

Build a Responsive Website | HTML, CSS Grid, Flexbox & More 학습로그

들어가며

• 부트캠프 섹션1, 1주차 2일차 학습토픽은 HTML/CSS다.
  주어진 학습 내용은 대부분 한번 학습했던 내용이어서 같은 주제의 심화 또는 실전 내용을 공부하기로 했다.

공부한 내용

• brad traversy님 build a responsive website를 들으면서 코딩하고, 까다로운 css 부분은 주석을 달아가면서 학습했다. 이분은 나에게 익숙한 미국식 억양이어서 듣기 좋음.
• html, css, layout(flex, grid)에 대해서 복습하고 정리하는 좋은 시간이었다.
• 1-line-layouts도 추후에 학습하면 좋겠다.

정리

주요 css 코드

• 참조할만한 css 코드와 학습하면서 달았던 주석을 포스팅 해본다.
• 미디어쿼리를 활용한 responsive grid layout

:root {
  --primary-color: #047aed;
}

/* Tablets and under  768px will be styled here*/
@media (max-width: 768px) {
  /* stack grids elems one col */
  .grid,
  .showcase .grid,
  .stats .grid,
  .cli .grid,
  .cloud .grid,
  .features-main .grid,
  .features-head .grid,
  .features-sub-head .grid,
  .docs-head .grid,
  .docs-main .grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  /* stacking every grid elem in a line */
  .features-main .grid > *:first-child,
  .features-main .grid > *:nth-child(2) {
  grid-column: 1;
  }
}

@media (max-width: 500px) {
  .navbar {
    height: 110px;
  }

  .navbar .flex {
    flex-direction: column;
  }

  .navbar ul {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.1); /*blackish transparent bg*/
  }
}


.languages .flex {
  flex-wrap: wrap; /* flex cards rearranged by browser width */
}

.languages .card {
  text-align: center;
  margin: 18px 10px 40px;
  transition: transform 0.2s ease; /* add smoothe anime to transform on hover */
}

.cli .grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr); /* this makes another row */
}

util.css

• 유용한 것은 utils.css를 따로 작성하여 bootstrap과 같이 활용하였다는 것이다.
• css에 드는 코드를 재사용해서, 코드량을 많이 줄이고, 일관성을 높일 수 있을듯.
• 개별 엘리먼트들은 util에 있는 css를 오버라이드 해서 활용한다.
• 컨테이너, 카드, 버튼 css는 자주자주 재활용 할 수 있어 보인다.

/* Utils */

.container {
  /* inserting container with max width  */
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto; /* to get rid of top margin cause by h1 margin-top: 10px*/
  padding: 0 40px; /* gives space between h1 and container */
}

.card {
  background-color: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* simulates pop-up like visual */
  padding: 20px;
  margin: 10px;
}

.btn {
  display: inline-block; /* button is inline by default */
  padding: 10px 30px;
  cursor: pointer;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
}

.btn-outline {
  background-color: transparent;
  border: 1px #fff solid;
}

.btn:hover {
  transform: scale(0.98);
}

.bg-primary,
.btn-primary {
  background: var(--primary-color);
  color: #fff;
}

.bg-secondary,
.btn-secondary {
  background: var(--secondary-color);
  color: #fff;
}

/* text colors */
.text-primary {
  color: var(--primary-color);
}

.text-dark {
  color: var(--dark-color);
}

/* text sizes */

.lead {
  font-size: 20px;
}

.sm {
  font-size: 1rem;
}

.xl {
  font-size: 4rem;
}

.text-center {
  text-align: center;
}

.alert {
  background-color: var(--light-color);
  padding: 10px 20px;
  font-weight: bold;
  margin: 15px 0;
}

.alert i {
  margin-right: 10px;
}

.alert-success {
  background-color: var(--success-color);
  color: white;
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  height: 100%; /* height must be specifed to get aligned vertically*/
  justify-content: center;
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  height: 100%; /* height must be specifed to get aligned vertically*/
  justify-content: center;
  align-items: center;
}

/* Margin */
.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 1.5rem 0;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 1.5rem;
}

Github CLI

• gh cli가 설치된 후 터미널에서 pull request하기
• 훨~씬 간단하고 편하다.
• Covenant님의 블로그 참고함

# fork and cloning to local env
gh repo fork https://github.com/codestates-beb/im-sprint-query-selector

# make some changes... such as
echo "change1" >> created_file.txt

git add .
git commit -m "commit for pull request"
git push

gh pr create # follow cli instructions

gh pr close prNumber # close pr

• gh pr 관련 다른 명령어들

gh pr list # 목록보기
gh pr comment prNumber # 댓글달기
gh pr edit # 제목, 내용 등 변경하기
gh pr checkout prNumber # git checkout