편집 기록

프로필 알 수 없는 사용자님의 편집

날짜2019.09.24

html,css공부 중 질문이 있습니다.

html

css

web-ide

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>샘플</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://use.fontawesome.com/7dddd79e16.js"></script>

</head>

<body>

  <section class="conA">
    <div class="container">
      <img src="img/logo.svg" alt="">
      <h1>LOGGER</h1>
      <p>맛있고 즐거운 라이프로그</p>
      <a href="#">라이프로그 시작하기</a>
    </div>
  </section>

  <section class="conB">
    <div class="container">
      <div class="text">
        <span class="fa fa-bar-chart icon"></span>
        <h2>라이프로그란?</h2>
        <p>일상의 이런저런 것들을 기록하다 보면 보이지 않던 소중한 것들이 보입니다.</p>
        <a href="#">MORE... 
        <span class="fa fa-chevron-right"></span>
        </a>
      </div>

      <div class="text">
        <span class="fa fa-mobile icon"></span>
        <h2>스마트폰이 있다면</h2>
        <p>스마트폰이 있다면 언제라도 라이프로그를 시작할 수 있습니다.</p>
        <a href="#">MORE... 
        <span class="fa fa-chevron-right"></span>
        </a>
      </div>

      <div class="text">
        <span class="fa fa-instagram icon"></span>
        <h2>쉽고 빠른 SNS와 연동</h2>
        <p>instagram,twitter 등 sns와 연동하여 로그를 간단히 공유할 수 있습니다.</p>
        <a href="#">MORE... 
        <span class="fa fa-chevron-right"></span>
        </a>
      </div>
    </div>
  </section>

  <section class="conC">
    <div class="container">
      <div class="photo"></div>
      <div class='text'>
        <h2>귀찮은 설정과 데이터 관리를 하지 않아도 됩니다.</h2>
        <p>라이프로그에서는 귀찮은 설정과 데이터 관리를 따로 하지 않아도 됩니다. 다른 애플리케이션과의 연동도 버튼 하나만 누르면 됩니다.</p>
        <a href="#">자세한 설정 방법 살펴보기
     <span class="fa fa-chevron-right"></span>
      </a>
      </div>
    </div>
  </section>

  <section class="conD">
    <div class="container">
      <div class="photo"></div>
      <div class='text'>
        <h2>라이프로그와 함께하는 재미있는 일상 생활</h2>
        <p>그때그때 일상을 기록하는 라이프로그, 나중에 과거의 일상을 보면 그때는 알지 못했던 다양한 즐거움이 보일 것입니다.</p>
        <a href="#">라이프로그 살펴보기
     <span class="fa fa-chevron-right"></span>
      </a>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">

      <div class="footA">
        <h2>LOGGER</h2>
        <p>
          주소 : IT 전문서시 위키구 북스동<br>
          <a href="http://logger.net/">http://logger.net/</a>
        </p>
      </div>

      <nav class="footB">
        <div>
          <h3>ABOUT</h3>
          <ul>
            <li><a href="#">설립</a></li>
            <li><a href="#">주소</a></li>
            <li><a href="#">지도</a></li>
            <li><a href="#">스태프</a></li>
          </ul>
        </div>

        <div>
          <h3>SUPPORT</h3>
          <ul>
            <li><a href="#">다운로드</a></li>
            <li><a href="#">메뉴얼</a></li>
            <li><a href="#">자주 묻는 질문</a></li>
            <li><a href="#">문의</a></li>
          </ul>
        </div>

        <div>
          <h3>CONTENTS</h3>
          <ul>
            <li><a href="#">공지사항</a></li>
            <li><a href="#">비즈니스</a></li>
            <li><a href="#">프로필</a></li>
            <li><a href="#">개발자</a></li>
            <li><a href="#">블로그</a></li>
          </ul>
        </div>


      </nav>

      <div class="footC">
         © LOGGER corp. All rights reserverd.
      </div>

    </div>
  </footer>

</body>

</html>

```css
@charset "UTF-8";

/* 기본 색상 */
:root {
    --main-color: #5D9AB2;
    --accent-color: #BF6A7A;
    --dark-main-color: #2B5566;
    --text-bright-color: #fff;
    --icon-color: #fff;
    --icon-bk-color: #ddd;
  --large-width: 1000px;
}


/* 기본 설정: 페이지 전체 */
body {
    margin: 0;
    font-family: '맑은 고딕',
        'Apple SD Gothic Neo', 
        sans-serif;
}


/* 콘텐츠A: 히어로 이미지 */
.conA {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 450px;
    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(img/fruits.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
    color: var(--text-bright-color);
    text-align: center;
}

.conA h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15vw;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
}

.conA p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 18px;
}

.conA img {
    width: 20%;
}

.conA a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 30px;
    border: solid 3px currentColor;
    border-radius: 6px;
    background-color: #BF6A7A;
    background-color: var(--accent-color);
    color: #fff;
    color: var(--text-bright-color);
    font-size: 14px;
    text-decoration: none;
}

.conA a:hover   {
    background-image: linear-gradient(
        rgba(255,255,255,0.2),
        rgba(255,255,255,0.2)
    );
}


@media (min-width: 768px) {
    .conA h1 {
        font-size: 115px;
    }

    .conA p {
        font-size: 24px;
    }
}



/* 콘텐츠B: 개요(아이콘 + 글자) */
.conB .container {
  padding-top: 80px;
  padding-bottom: 20px;
}

.conB .text {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
    text-align: center;
}

.conB h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}

.conB p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}

.conB a {
    color: #5D9AB2;
    color: var(--main-color);
    text-decoration: none;
}

.conB a:hover   {
    text-decoration: underline;
}

.conB .icon {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 40px;
    width: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
    background-color: #ddd;
    background-color: var(--icon-bk-color);
    color: #fff;
    color: var(--icon-color);
}

@media (min-width: 768px) {
  .conB .container {
    display: flex;
    max-width: 1000px
    max-width: var(--large-width);
    margin-right: auto;
    margin-left: auto;
  }

  .conB .text {
    flex: 1;
  }
}

/* 콘텐츠C: 개요(이미지+글자) */
.conC {
  background-color: #5D9AB2;
  background-color: var(--main-color);
  color: #fff;
  color: var(--text-bright-color);
}

.conC text {
  padding: 20px;
}

.conC h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  }

.conC p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size:14px;
  line-height: 1.8;
  opacity: 0.8;
}

.conC a {
  display: inline-block;
  margin-top: 20xp;
  padding: 10px 30px;
  border: solid 3px currentcolor;
  border-radius: 6px;
  background-color: #BF6A7A;
  background-color: var(--accent-color);
  color: #fff;
  color: var(--text-brighr-color);
  font-size: 14px;
  text-decoration: none;  
}

.conC a:hover {
  background-image: linear-gradient(
  rgba(255,255,255,0.2),
  rgba(255,255,255,0.2)
  );
}
  .conC .photo{
    min-height: 200px;
    background-image: url(img/note.jpg);
    background-position: center;
    background-size: cover;
  }

@media (min-width: 768px) {
  .conC .container {
    display: flex;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
    }

  .conC .photo {
    flex: 3;
  }

  .conC .text {
    flex: 2;
    padding: 50px;
  }
}

.conC {
  background-color: #5D9AB2;
  background-color: var(--main-color);
  color: #fff;
  color: var(--text-bright-color);
}

.conC text {
  padding: 20px;
}

.conC h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  }

.conC p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size:14px;
  line-height: 1.8;
  opacity: 0.8;
}

.conC a {
  display: inline-block;
  margin-top: 20xp;
  padding: 10px 30px;
  border: solid 3px currentcolor;
  border-radius: 6px;
  background-color: #BF6A7A;
  background-color: var(--accent-color);
  color: #fff;
  color: var(--text-brighr-color);
  font-size: 14px;
  text-decoration: none;  
}

.conC a:hover {
  background-image: linear-gradient(
  rgba(255,255,255,0.2),
  rgba(255,255,255,0.2)
  );
}
  .conC .photo{
    min-height: 200px;
    background-image: url(img/note.jpg);
    background-position: center;
    background-size: cover;
  }

@media (min-width: 768px) {
  .conC .container {
    display: flex;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
    }

  .conC .photo {
    flex: 3;
  }

  .conC .text {
    flex: 2;
    padding: 50px;
  }
}

/* 콘텐츠D: 개요(이미지 + 글자: 반대로 배치하기) */
.conD .container {
  padding-top: 2px;
}

.conD text {
  padding: 20px;
}

.conD h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
  }

.conD p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size:14px;
  line-height: 1.8;
  opacity: 0.8;
}

.conD a {
  display: inline-block;
  margin-top: 20xp;
  padding: 10px 30px;
  box-shadow: 0 0 0 1px #888; 
  border: solid 3px currentcolor;
  border-radius: 6px;
  background-color: #BF6A7A;
  background-color: var(--accent-color);
  color: #fff;
  color: var(--text-brighr-color);
  font-size: 14px;
  text-decoration: none;  
}

.conD a:hover {
  background-image: linear-gradient(
  rgba(255,255,255,0.2),
  rgba(255,255,255,0.2)
  );
}
  .conD .photo{
    min-height: 200px;
    background-image: url(img/life.jpg);
    background-position: center;
    background-size: cover;
  }

@media (min-width: 768px) {
  .conD .container {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-bottom: 40px;
    }

  .conD .photo {
    flex: 0 0 400px;
  }

  .conD .text {
    flex: 1;
    padding: 50px;
  }
}
/* 푸터 */
footer {
  color: #fff;
  color: var(--text-bright-color);
  background-color: #2B5566;
  background-color: var(--dark-main-color);
}

footer .container {
  padding: 40px 20px;
}
/* 푸터A : 사이트 정보 */
.footA {
  margin-bottom: 30px;
}

.footA h2 {
  margin-top:0;
  margin-bottom: 10px;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.2em;
}

.footA p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.footA a {
  color: inherit;
  text-decoration: none;
}

/* 푸터B: 푸터 메뉴 */
.footB div {
    margin-bottom: 20px;
}

.footB h3 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: solid 1px currentColor;
    font-size: 14px;
}

.footB ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footB a {
    display: block;
    padding: 5px;
    color: inherit;
    font-size: 12px;
    text-decoration: none;
}

.footB a:hover {
    background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
    .footB {
        display: flex;
    }

    .footB div {
        flex: 1;
    }

  .footB div:not(first-child) {
    margin-left: 40px;
    }
  }

/ 푸터C: 저작권 */
.footC p{
  font-size: 12px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}
**strong text**


웹코딩에서 위와 같이 작성하고 있는데 css에 입력한것이 바로 적용되어 출력되지 않습니다. 해결방법이 뭘까요