#18 TIL CSS 사용해서 계산기 만들기

CSS란?

CSS는 스타일링을 위한 도구이다. HTML, CSS, 그리고 JS는 웹 어플리케이션을 만드는 세가지의 주축인데 여기서 CSS는 스타일링을 담당을 한다. 처음에 코딩을 접하는 분들은 자신이 미술적 감각이 없고 CSS가 디자이너에 영역이라고 생각을 할 수도 있는데 아니다. 자신이 백엔드를 지망했어도 왠만한 CSS도 알고 있어야하며 자신을 개발자라고 소개할 수 있다면 최소한의 UI는 직접 만들 수 있어야한다. 그리고 CSS는 웹 개발자가 배우기 가장 쉬운 동시에, 가장 어려운 언어 중 하나이다.

CSS 코드예시

<link rel="stylesheet" href="index.css" />

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

html의 css을 연결을 할 때 link코드를 작성하고 href = "css파일의 이름" 을 작성하고 연결을 해줘야 css을 바꾸면 html의 적용이 된다.

Id, class란?

id는 하나의 문서에서 한 요소에만 사용해야 합니다.

<h4 id="navigation-title">This is the navigation section.</h4>
// css
#navigation-title {
  color: red;
}

class는 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 사용을 한다.

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>
// css
.menu-item {
  text-decoration: underline;
}

CSS는 오늘 다시 해보면서 이해도 잘 되고 처음에는 쉽다고 생각을 하였던 게 어려워지니까 사람들이 말을 한 것과 같이 어려운 언어라는 것을 알게 되었다. 하지만 내가 코드를 변경을 하였을 때 색깔이 변화고 점점 이쁘게 변하니까 나도 기분이 좋아지고 재밌는 공부를 했던 거 같아서 즐거웠다. 내일도 어드밴스를 풀면서 복습을 하고 코드 하나하나 손코딩을 해봐야겠다🔍

밑에는 내가 오늘 CSS을 사용해서 만든 계산기 디자인이다💻