CSS & HTML 기초(3)

min_chan·2024년 3월 18일

CSS & HTML

목록 보기

3/10

10. display 특성

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="desciption"
      content="교원라이프는 교원그룹 계열사로서, 늘 고객님의 삶과 함께하는 프리미엄 라이프케어 서비스 기업입니다."
    />
    <title>웹 폰트 변환하여 연결하기</title>
    <!-- 웹 폰트 코드 먼저 연결해야함 -->
    <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=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./main.css" />
    <!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문 바로가기</a>
    </div>
    <div id="wrap">
      <main id="container">
        <section class="main_etc">
          <div class="inner">
            <h2>chatGPT</h2>
            <p>
              1. 시작하기 플러터에서 현재 공식지원되는 라이브러리인
              tflite_flutter를 사용하기 위해서는 tflite(TensorFlow Lite)파일이
              필요로 한다. 2. tflite란? TensorFlow공식 문서에 들어가보면
              tflite(TensorFlow Lite)는 개발자가 모바일, 내장형 기기,
              IoT기기에서 모델을 실행할 수 있도록 지원하여 기기 내 머신러닝을
              사용할 수 있도록 하는 도구 모음이라고 한다.
            </p>
            <p>
              3. TensorFlow Lite 모델 생성하는 방법 TensorFlow Lite Model Maker
              라이브러리를 사용하여 자체 맞춤 데이터 세트를 포함하는 모델 생성
              TensorFlow 모델을 TensorFlow Lite 모델로 변환(TensorFlow Lite
              변환기 사용) Teachable Machine 사용하기 나는 인공지능, 딥러닝을
              전공한 개발자가 아니기 때문에 3번을 사용하여 tflite모델을
              생성했다. 4.
            </p>
            <p>
              Teachable Machine이란? Teachable Machine은 구글에서 만든 웹기반
              노코드 인공지능 학습 툴로 이미지,오디오,포즈 샘플을 추가하여
              모델을 학습시키면 프로젝트에서 사용할 수 있는 모델로 내보낼 수
              있다.
            </p>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css
/* 컬러 변수 */
:root {
  --point-color1: #ff601e;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #666;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  min-width: 1280px;
  height: 1500px;
}

/* width는 자동으로 100% height는 내용만큼 매치*/
#header {
  border: 5px solid red;
  width: 1200px;
  margin-top: 50px;
  padding-top: 50px;
}

#header a {
  border: 1px solid black;
  height: 40px;
  margin-right: 30px;
  padding-right: 30px;
  /* 인라인 요소에 마진,패딩 상하 불가 */
  margin-top: 20px;
  padding-top: 20px;
  /* display 변경가능 */
  /* block으로 바꿀 시 인라인에서 block으로 바뀐다. */
  display: inline-block;
  /* display: block; */
}

#header button {
  height: 50px;
  margin-top: 50px;
  padding-top: 30px;
  /* 요소를 안보이게 */
  display: none;
}

11. 교원 라이프 하단메뉴 구현

html
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="desciption"
      content="교원라이프는 교원그룹 계열사로서, 늘 고객님의 삶과 함께하는 프리미엄 라이프케어 서비스 기업입니다."
    />
    <title>교원라이프</title>
    <!-- 웹 폰트 코드 먼저 연결해야함 -->
    <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=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./main.css" />
    <!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문 바로가기</a>
    </div>
    <div id="wrap">
      <main id="container">
        <section class="main_etc">
          <div class="inner">
            <h2 class="blind">기타 서비스</h2>
            <ul class="etc">
              <li>
                <a href="#">
                  <!-- 부 제목 h3 -->
                  <h3>회사소개</h3>
                  <p>
                    삶의 희로애락을 함께하는<br />토털 라이프케어 서비스 기업
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <h3>교원라이프 소식</h3>
                  <p>교원라이프의 주요 소식을<br />알려드립니다.</p>
                </a>
              </li>
              <li>
                <a href="#">
                  <h3>교원예움 장례식장</h3>
                  <p>
                    떠나는 고인을 진심으로 추모하고,<br />남겨진 분들은 따뚯하게
                    위로합니다.
                  </p>
                </a>
              </li>
              <li>
                <a href="#">
                  <h3>자주하는 질문</h3>
                  <p>교원라이프의<br />자주하는 질문입니다.</p>
                </a>
              </li>
            </ul>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css

/* 컬러 변수 */
:root {
  --point-color1: #ff7200;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #222;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* min-width: 1280px; */
  height: 1500px;
}

.main_etc {
  background: #f0f0f0;
  /* 패딩은 바깥요소에서 잡고 가기 */
  padding: 70px 0;
}

.main_etc .inner {
  /* 반응형으로 창이 줄어들 때 줄어들어야 하므로 max-width 사용 */
  /* 기본 그리드 + 좌우 패딩 */
  max-width: 1230px;
  margin: 0 auto;
  /* 창이 줄어들경우 좌우가 붙지 않도록 테블릿 여백을 미리 준다*/
  padding: 0 15px;
}

.main_etc .etc {
  display: flex;
  /* 좌우 여백 */
  gap: 0 15px;
}

.main_etc .etc li {
  width: 25%;
  box-shadow: 2px 2px 4px rgba(220, 220, 220, 1);
}

/* hover: 마우스 올려뒀을 때의 상태 */
.main_etc .etc li:hover h3 {
  color: var(--point-color2);
}

.main_etc .etc a {
  display: block;
  /* 높이는 안에서 잡고 너비는 밖에서 */
  height: 250px;
  padding: 40px 25px 0;
  /* background: 색 url() 반복옵션 x xoffset y위치 yoffset / 가로크기 세로크기 */
  background: #fff url(./images/company.svg) no-repeat right 25px bottom 25px /
    auto 55px;
}

.main_etc .etc li:nth-child(2) a {
  background-image: url(images/mic.svg);
}

.main_etc .etc li:nth-child(3) a {
  background-image: url(images/chrysanthemum.svg);
}

.main_etc .etc li:nth-child(4) a {
  background-image: url(images/qna.svg);
}

.main_etc .etc h3 {
  font-size: 22px;
  font-weight: 500;
}

.main_etc .etc p {
  font-size: 16px;
  color: var(--txt-color-400);
  /* 이동은 항상 마진 */
  margin-top: 12px;
}

/* 태블릿 분기점 */
@media (max-width: 1200px) {
  .main_etc .etc p br {
    display: none;
  }
}

/* 모바일 분기점 */
@media (max-width: 767px) {
  .main_etc {
    padding: 35px 0;
  }
  .main_etc .etc {
    flex-wrap: wrap;
    gap: 15px;
  }

  .main_etc .etc li {
    /* 필셀은 소수점 불가 */
    width: calc(50% - 15px / 2);
  }
  .main_etc .etc a {
    padding: 25px 15px 0;
    height: 200px;
    background-size: auto 45px;
    background-position: right 15px bottom 15px;
  }
  .main_etc .etc h3 {
    font-size: 18px;
  }

  .main_etc .etc p {
    font-size: 14px;
  }
}

12. overflow

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- 반응형 세팅이 아닐경우 (데스크탑) 뷰 포트 크기 고정해야함 기본 그리드 + 80정도-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- ios 사파리 전화번호 링크 컬러 변경못하게  -->
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="desciption"
      content="교원라이프는 교원그룹 계열사로서, 늘 고객님의 삶과 함께하는 프리미엄 라이프케어 서비스 기업입니다."
    />
    <title>overflow</title>
    <!-- 웹 폰트 코드 먼저 연결해야함 -->
    <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=Noto+Sans+KR:wght@100..900&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./main.css" />
    <!-- main.css가 덮어씀 그래서 큰걸 아래에 배치 해야함-->
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문 바로가기</a>
    </div>
    <div id="wrap">
      <main id="container">
        <section class="main_etc">
          <div class="inner">
            <p>
              1. 시작하기 플러터에서 현재 공식지원되는 라이브러리인
              tflite_flutter를 사용하기 위해서는 tflite(TensorFlow Lite)파일이
              필요로 한다. 2. tflite란? TensorFlow공식 문서에 들어가보면
              tflite(TensorFlow Lite)는 개발자가 모바일, 내장형 기기,
              IoT기기에서 모델을 실행할 수 있도록 지원하여 기기 내 머신러닝을
              사용할 수 있도록 하는 도구 모음이라고 한다.
            </p>
            <p>
              3. TensorFlow Lite 모델 생성하는 방법 TensorFlow Lite Model Maker
              라이브러리를 사용하여 자체 맞춤 데이터 세트를 포함하는 모델 생성
              TensorFlow 모델을 TensorFlow Lite 모델로 변환(TensorFlow Lite
              변환기 사용) Teachable Machine 사용하기 나는 인공지능, 딥러닝을
              전공한 개발자가 아니기 때문에 3번을 사용하여 tflite모델을
              생성했다. 4.
            </p>
            <p>
              Teachable Machine이란? Teachable Machine은 구글에서 만든 웹기반
              노코드 인공지능 학습 툴로 이미지,오디오,포즈 샘플을 추가하여
              모델을 학습시키면 프로젝트에서 사용할 수 있는 모델로 내보낼 수
              있다.
            </p>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css

/* 컬러 변수 */
:root {
  --point-color1: #ff7200;
  --point-color2: #feb12d;
  --txt-color-400: #888;
  --txt-color-500: #222;
  --txt-color-600: #000;
}

#wrap {
  /* min-width: 최소 너비를 지정하여 화면이 작아지더라도 짤림 방지  */
  /* min-width: 1280px; */
  height: 1500px;
}

.main_etc {
  background: #f0f0f0;
  /* 패딩은 바깥요소에서 잡고 가기 */
  padding: 70px 0;
}

.main_etc .inner {
  /* 반응형으로 창이 줄어들 때 줄어들어야 하므로 max-width 사용 */
  /* 기본 그리드 + 좌우 패딩 */
  max-width: 1230px;
  margin: 0 auto;
  /* 창이 줄어들경우 좌우가 붙지 않도록 테블릿 여백을 미리 준다*/
  padding: 0 15px;
  border: 4px solid red;
  height: 100px;
  /* overflow: visible; -> 기본값 넘친 내용을 그대로 보여준다 */
  overflow: visible;
  /* overflow: auto; -> 스크롤로 보여줌 */
  overflow: auto;

  /* overflow: hidden; -> 넘친 내용을 가려줌 */
  overflow: hidden;

  /* overflow: scroll; -> 가로 스크롤도 가능 */
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;
}

13. 웹 폰트 연결

common.css

@font-face {
  font-family: 'Akrobat';
  font-style: normal;
  font-weight: 800;
  src: url(./assets/fonts/Akrobat-ExtraBold.eot);
  src: url(./assets/fonts/Akrobat-ExtraBold.eot?#iefix)
      format('embedded-opentype'),
    url(./assets/fonts/Akrobat-ExtraBold.woff) format('woff'),
    url(./assets/fonts/Akrobat-ExtraBold.ttf) format('truetype');
}


/* main.css */

.main_etc h2 {
  font-size: 50px;
  font-family: 'Akrobat', sans-serif;
}

min_chan

github.com/kangminchan99

이전 포스트

CSS & HTML 기초(2)

다음 포스트

CSS & HTML 기초(3)

CSS & HTML

10. display 특성

11. 교원 라이프 하단메뉴 구현

12. overflow

13. 웹 폰트 연결

CSS & HTML 기초(2)

CSS & HTML 기초(4)

0개의 댓글