[공부 기록 04] CSS 추가 적용해서 더 꾸미기

---

1. 제목 속성 추가: align

 

제목은 h1태그로 밖에 안 썼으니, 이를 CSS로 style태그 안에 h1 선택자를 열어서 사이즈, 정렬을 할 수 있다.

font-size로 크기를 더 크게 하고, text-align을 통해 center에 정렬시킬 수 있다.

h1{
    font-size: 60px;
    text-align: center;
}

 

이러한 속성 정보들은 필요할 때마다 구글에 property로 서치하여 찾을 수 있기 때문에, 따로 암기할 필요는 없다. (심지어 조금만 쳐도 알아서 자동완성 추천기능이 있기 때문에 더더욱... 그래도 어떤 기능을 사용할 수 있는지 정도는 알아 두자!!)

 

 

 

---

2. ID, Class, 태그 선택자와 우선 순위

 

★우선 순위
-같은 선택자일 때는 하위 라인에 있는 것이 더 우선 된다.
-#(ID) > .(class) > (태그) 순서로 우선된다.

 

★class는 html에서 class="name"으로 선언 되며, 이때 이름은 공백으로 하여 여러 개의 클래스를 만들 수 있다.
이는 css의 <style>안에서 ".name"으로 불러와서 속성을 부여할 수 있다. 같은 클래스가 여러 개 있을 때, css의 클래스가 더 아래 있는 것이 우선 된다.

 

 

아래와 같은 코드가 있을 때, saw보다 active가 우선 된다. (방문한 페이지는 회색으로, 현재 페이지는 색상으로, 미방문 페이지는 블랙으로 처리하는 코드)

...
      .saw{
        color:gray;
      }
      .active{
        color: rgb(231, 164, 175);
        text-decoration: underline;
      }
    </style>
  </head>

    <h1 style="color: rgb(231, 164, 175);">SEASON</h1>
    <ul>
      <li><a href="index.html" class="saw">MAIN</a></li>
      <li><a href="1.html" class="saw active">봄</a></li>
      <li><a href="2.html">여름</a></li>
      <li><a href="3.html">가을</a></li>
      <li><a href="4.html">겨울</a></li>
    </ul>

 

---

 

★순서를 더 확실하게 하고 싶을 때는 ID를 사용한다. (ID값이 하나만 있을 때는 이 더 좋은 방법)
ID가 가장 우선 순위이므로 제일 위 라인에 써도 우선시 된다. 마찬가지로 클래스가 일반 태그보다 더 높으므로 위에 써도 우선시 된다.

<style>
      #active{
        color: rgb(231, 164, 175);
        text-decoration: underline;
      }
      .saw{
        color:gray;
      }
      a{
        color: black;
        text-decoration: none;
      }
      h1{
        font-size: 60px;
        text-align: center;
      }
    </style>

 

 

 

 

 

---

3. 박스 모델: block level, inline level

제목 태그와 같이, 화면 전체의 넓이를 쓰는 것을 블럭 레벨이라 한다. 반대로 자기 자신(글자 크기)만큼의 넓이를 쓰는 것은 인라인 레벨이라 한다. 이는 펜(border)으로 그려서 확인해 볼 수 있다. (태그=element)

<style>
      a{ /*inline level element*/
        color: black;
        text-decoration: none;
      }
      h1{ /*block level element*/
        font-size: 60px;
        text-align: center;
        border-width:5px;
        border-color: red;
        border-style: solid;
      }
    </style>

화면 전체를 씀(왼쪽 정렬해도 같음)

 

 

border와 같이 여러번 쓰는 것들은 중복이 되어 불편하다. 이는 한번에 쓸 수 있다. 쓰는 순서는 상관 없다. 또한 다른 클래스와도 중복으로 써야 하는 경우 ','로 구분하여 같이 쓸 수 있다.

    a, h1{ /*block level element*/
        font-size: 60px;
        text-align: center;
        border: 5px solid red;
    }

 

---

 

★글자를 감싸는 여백의 크기를 조절하는 것은 padding이고, 그 글자들의 간격을 조절하는 것은 margin이다.

 

★블럭 레벨에 width를 조절하면 화면 전체를 쓰는 형태에서 width만큼만 쓰는 형태로 바뀌게 된다.

 

 

 

---

4. 개발자 도구

 

웹 페이지를 우클릭하여 검사를 실행하면, 더 자세히 알 수 있다.

전체 코드에서 라인을 선택하면, 해당 라인이 어느 css의 영향을 받고 있는지 아래 style에 나온다.

 

style에서 아래로 스크롤 해보면 더 정확한 사이즈 들이 나온다. 마우스를 갖다 대면 해당 부분에 대해 더 간편하게 확인할 수 있다.

 

 

 

---

5. 응용: margin, padding

 

웹 페이지 제목 아래 선을 그리기 위해, 다음과 같이 코드를 작성한다.

    h1{
        font-size: 60px;
        text-align: center;
        border-bottom: 1px solid gray
    }

 

 

여기까지만 하면, 아래에 비해 위 공간이 남는다. 이때 개발자 도구를 열어서 어떤 것이 문제인지 확인한다.

 

 

바깥 공간은 margin이 담당하는 것을 알 수 있다.

그럼 코드에서 margin 값을 0으로 한다.

또한, 그렇게 하면 또 너무 제목 공간이 좁아 보이므로 padding을 입혀서 공간을 확보한다.

 

      h1{
        font-size: 60px;
        text-align: center;
        border-bottom: 1px solid gray;
        margin:0px;
        padding:30px;
      }

대충 적당하게 바뀌었다!!

 

 

---

 

 

이번에는 목록을 왼쪽으로 두고 세로 줄을 그은 뒤 내용들을 오른쪽으로 옮겨보자!

목록은 <ul>태그로 만들었으므로, 그에 대한 css를 추가한다.

펜으로 단순히 그리기만 하면, ul 태그도 마찬가지로 블럭 레벨이므로 화면 제일 우측에 선이 그려지게 된다. 따라서 width로 따로 조정해주어서 왼쪽으로 선을 옮긴다.

      ul{
        border-right: 1px solid gray;
        width:100px;
      }

 

그런데 이러면 이제 또 선끼리 여백이 생긴다. 이는 다시 개발자 도구에서 문제를 확인해 볼 수 있다.

 

 

 

보면 또 마진이 문제다. 없애 주자.

그러면 자연스럽게 또 너무 붙으니까 padding도 입혀준다.

      ul{
        border-right: 1px solid gray;
        width:100px;
        margin:0px;
        padding: 30px;
      }

 

 

이번엔 body 태그의 마진때문에 선에 여백이 남아있다. 마찬가지로 또...

 

 

      body{
        margin: 0px;
      }

 

 

추가로 선 색상도 통일하고 목록 여백도 조정하였다.

 

 

 

이제 글들을 오른쪽으로 옮기기만 하면 됨!!

 

 

 

---

6. 그리드: <div id="grid">

 

★<div>: 블럭 레벨 (공간 다 씀, 줄 바꿈)
★<span>: 인라인 레벨 (자신의 공간만)

 

<div>를 활용하여 그리드를 만들 수 있다. 각 div들을 전체 grid div로 묶어서 값을 조절하면 되기 때문이다.

 

★can i use 사이트에 들어가서 html, css등의 기능을 검색했을 때 어디에서 지원이 가능하고 불가능한지 확인해 볼 수 있다.
-> https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

---

 

먼저, 내용에 집어 넣을 부분이 현재 다 따로 떨어져 있다. 이를 일단 아무 의미도 없는 <div>로 묶어준다.

그 다음에도 역시 목록과 내용을 다시 한꺼번에 <div>로 묶어준다.

그리고 html에서 각 div에 id값을 주어서 css에서 값을 추가하면 된다.

<div id="grid>
  <div id="list">
    <ul>
    ...
    </ul>
  </div>
  
  <div id="article">
  ...
  </div>
</div>

 

      #grid ul{ /*그리드의 ul을 가리킴*/
        width:70px;
        margin:0px;
        padding: 30px;
        padding-left: 40px;
      }
      #grid{ /*그리드 전체*/
        display: grid;
        grid-template-columns: 180px 1fr;
      }
      #list{ /*목록*/
        border-right: 3px solid rgb(222, 191, 66);
      }
      #article{ /*내용*/
        padding-top: 5px;
        padding-left: 40px;
      }

★그리드를 사용할 때는 꼭 display: grid로 먼저 모드 변경을 해주자! 그 다음에 그리드 탬플릿하고 행 또는 열로 적용할 수 있다. 현재는 왼쪽 오른쪽 구성으로, 열이 필요하니 columns를 하고 각 사이즈 값을 써준다.
px로 하면 해당 값이 고정되며, fr로 하면 웹 페이지의 사이즈에 따라 반응형 느낌으로 조절된다. 
예를 들어, 1fr 4fr로 하면 1:4 비율로 자동 조절 된다.

 

 

 

아무튼 이렇게 하면 틀까지 적용 완료~!~!