클라우딩 어플리케이션 엔지니어링 TIL Day 7

지금까지 배운 HTML과 CSS를 종합해서 간단한 페이지를 만들어보는 시간이다

전체 소스코드를 올릴 수는 없어서 클론코딩을 하면서

알아두면 좋을 내용들을 간략하게 정리하고

완성된 페이지를 포스팅 하려고 한다

---

# header, main, footer는 레이아웃을 구성하는 태그

한 페이지 한 파일 안에 반드시 한번만 나와야 함

 

검색엔진이 페이지에 들어오면 header 태그부터 찾아서 어디가 제목인지 파악한다

header 안의 h1을 찾으면 이것이 페이지의 제목이라는 것을 검색엔진이 알게 된다

main 태그와 footer 태그도 검색엔진에게 해당 부분이 main이고 footer 임을 알려줄 수 있다

 <div id="wrap">
      <!-- header, main, footer는 레이아웃을 구성하기 때문에 한번만 사용됨 -->
      <header id="header">
        <h1>JINNY</h1>

        <a href="mailto:aaabbb123123@naver.com">
          <img src="assets/svg/이메일.svg" alt="이메일 아이콘" />
        </a>
      </header>

      <main id="main"></main>

      <footer id="footer"></footer>
    </div>

# a 태그 href 속성 중

mailto:이메일주소 -> 메일 폼 생성해주는 링크이다

<a href="mailto:aaabbb123132@naver.com"> </a>

---

# 블록레벨요소는 margin : 0 auto; 로 설정해주면 가운데에 위치하도록 설정해줄 수 있다

다만 해당 블록레벨요소가 크기를 가지고 있어야 한다

grid 속성을 사용해서 header 와 main, footer를 지정해 줄 수 있다

#wrap {
  display: grid;
  grid-template-areas:
    "header main"
    "header footer";
  /*블록레벨요소는 margin 값에 0 auto 지정 시
  가운데로 옴 + 크기 가져야 함*/
  margin: 0 auto;
  max-width: 520px;
  background-color: #fff;
}

이 때 자식 요소들에게는 grid-area : 해당 부분; 으로 설정 가능하다

/*grid-area 속성을 사용해서 해당 gird가
어느 영역인지 지정해 줄 수 있다*/
#header {
  grid-area: header;
  width: 200px;
}

#main {
  grid-area: main;
}

#footer {
  grid-area: footer;
}

# grid에는 fr이라는 특별한 단위가 있다

분수의 처리를 의미하는데

  /*grid의 특별한 단위 -> fr (auto랑 같음)
  두 개의 컬럼을 만들어서 하나의 컬럼은 200px
  나머지 컬럼은 200px를 제외한 나머지 의 의미*/
  grid-template-columns: 200px 1fr;

해당 코드에서는 2개의 컬럼을 지정해 준 뒤 첫번째 컬럼은 200px, 나머지 컬럼은 200px를 제외한 나머지 부분으로 auto와 같은 처리를 한다

---

# margin : 0 으로 브라우저의 기본 설정을 초기화 시킬 수 있다

/*margin : 0 으로 초기화*/

body {
  margin: 0;
  background-color: #ecf0f1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

 

# font 먼저 불러오고 css 파일을 불러오는 것이 좋다

왜?

css 파일 먼저 불러오고 font를 불러오게 되면 기본 브라우저 폰트가 보이다가 중간에 설정한 폰트로 바뀔 수도 있기 때문에 애초에 폰트 먼저 적용시키자

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Merienda:wght@500;800&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:wght@300&display=swap"
      rel="stylesheet"
    />
    <!-- core -->
    <link rel="stylesheet" href="style.css" />

---

# 마크업들은 차곡 차곡 쌓인다

원하는 마크업을 앞으로 혹은 뒤로 보내는 속성 -> z-index

/*z-index : 2; 로 설정해서 맨 앞으로 가지고 옴*/
#header a {
  position: relative;
  z-index: 2;
}

 

---

# a 태그는 inline 레벨 요소이지만 block 레벨 요소를 가질 수 있다

<a href="">
              <div class="icon"></div>
              <div class="text"></div
            ></a>

 

# text-decoration : 밑줄을 부여하는 속성, a 태그에 밑줄 생기는 것을 없애고 싶을 때는 none 으로 설정

  text-decoration: none;

 

# hover 효과 등과 같이 바뀌는 CSS를 지정해 줄 때 너무 확 바뀌는 것을 천천히 바뀌게 할 때는

transition 속성을 사용하자

  /*0.2초 동안 변하게 지정*/
  transition: all 0.2s;

 

만들어진 페이지는 과연?!

PC 화면

모바일 화면

---

# 새로 알게 된 점

간단한 페이지를 만드는 클론 코딩 작업이었지만

CSS의 사용법이 너무 다양해서 조금 헷갈렸다

의사요소 설정, position으로 원하는 위치 지정은 많은 실습이 필요할 듯 하다