hy30nq's blog

섹션 4: HTML & CSS - 연습과 요약 [9일-10일차] 본문

Web/100일 코딩 챌린지 - Web Development

섹션 4: HTML & CSS - 연습과 요약 [9일-10일차]

hy30nq 2023. 12. 28. 12:36
728x90

day 9

 

그동안 배운 내용을 바탕으로 아래 사이트 만들어보기

 

만약 css로 이미지를 줄일 때 width를 사용하면 줄이면 기본적인 가로세로비는 유지되기 때문에 크기를 줄이거나 키울 수 있다.

 

 

 

day 10

 

margin collapse 주의

 

margin: 수직 좌우;

 

li {
  margin: 14px 0;
  padding-left: 10px;
  border-left: 5px solid transparent;
}

.extra-important {
  color: rgb(255, 237, 177);
  border-color: rgb(247, 209, 85);
}

위의 방식으로 테두리 색을 지정할 수 있고 한 쪽만 지정할 수 있다.

 

a href="/html-css-basics-summary.pdf" target="_blank"

해당 방법을 사용하면 해당 파일 새 탭에서 열린다

 

글자 강조에 있어서 em, stong html tag를 이용할 수 있다. 

-> css에서도 강조가 되는데 왜 html tag를 이용하여 강조를 할까? 그이유는 검색 엔진 노출 그리고 시각 장애인 같은 경우는 해당 css 파일을 읽을 수 없기 때문에 이렇게 하는 것이다.

 

<section> tag를 이용하여 구별하면 가독성이 좋아진다.

 

오늘 한 코드들

더보기 
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>HTML & CSS 기본 요약</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=Roboto:wght@400;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/styles/styles.css" />
  </head>
  <body>
    <header>
      <h1>HTML & CSS 기본 요약</h1>
      <img src="/images/html-css.png" alt="HTML and CSS logos" />
    </header>
    <main>
      <section>
        <h2>HTML 요약</h2>
        <p>
          HTML (HyperText Markup Language) is used to define our page content,
          structure and meaning. You <strong>don't</strong> use it for styling
          purpose. Use CSS for that instead!
        </p>
        <ul>
          <li class="extra-important">
            HTML uses "elements" to describe (annotate) content
          </li>
          <li>
            HTML elements typically have an opening tag, content and closing
            tag.
          </li>
          <li class="extra-important">
            You can also have void (empty) elements like images
          </li>
          <li class="extra-important">
            You can also configure elements with attributes
          </li>
          <li>
            There's a long list of available elements but you'll gain experience
            over time, no worries.
          </li>
        </ul>
        <p>
          Learn more about all available HTML elements on
          <a
            href="https://developer.mozilla.org/ko/docs/Web/html/Reference"
            target="_blank"
            >MDN HTML element reference</a
          >.
        </p>
      </section>
      <section>
        <h2>CSS 요약</h2>
        <p>
          CSS (Cascading Style Sheets) is used for styling your page content.
        </p>
        <ul>
          <li>Styles are assigned via property-value pairs</li>
          <li>You can assign styles via the "style" attribute</li>
          <li class="extra-important">
            To avoid code duplication, you typically use global styles (e.g. via
            the "style" element) instead
          </li>
          <li>
            Alternatively, you can work with external stylesheet files which you
            "link" to
          </li>
          <li class="extra-important">
            When working with CSS, concepts like "inheritance", "specificity"
            and the "box model" should be understood.
          </li>
          <p>
            Learn more about all available CSS properties and values on
            <a
              href="https://developer.mozilla.org/ko/docs/Web/CSS/Reference"
              target="_blank"
              >the MDN CSS property reference</a
            >.
          </p>
        </ul>
      </section>
    </main>
    <footer>
      <a href="/pdfs/html-css-basics-summary.pdf" target="_blank"
        >Download PDF Summary</a
      >
      <p>made by techq</p>
    </footer>
  </body>
</html>
body {
  font-family: "Roboto", sans-serif;
  background-color: rgb(244, 234, 255);
}

h1 {
  font-size: 52px;
  color: rgb(88, 49, 196);
}

header {
  text-align: center;
  padding: 32px;
}

header img {
  width: 300px;
}

main {
  background-color: rgb(122, 74, 218);
  padding: 32px;
  margin: 32px auto;
  width: 700px;
  border-radius: 8px;
  color: rgb(248, 241, 255);
}

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

li {
  margin: 14px 0;
  padding-left: 10px;
  border-left: 5px solid transparent;
}

a {
  text-decoration: none;
  color: rgb(36, 3, 102);
  background-color: rgb(255, 237, 177);
  padding: 2px 6px;
  border-radius: 4px;
}

a:hover,
a:active {
  background-color: rgb(250, 201, 39);
}

footer {
  text-align: center;
  margin-bottom: 100px;
}

footer p {
  color: rgb(131, 113, 149);
  margin-top: 30px;
}

footer a {
  padding: 12px 20px;
  border-radius: 8px;
  background-color: rgb(250, 201, 39);
  color: rgb(66, 51, 4);
}

footer a:hover,
footer a:active {
  background-color: rgb(255, 186, 58);
}

.extra-important {
  color: rgb(255, 237, 177);
  border-color: rgb(247, 209, 85);
}

 

728x90

'Web > 100일 코딩 챌린지 - Web Development' 카테고리의 다른 글

섹션 6: 깃 & 깃허브를 사용한 버전 제어 소개 [11일차]  (0) 2023.12.29
섹션 5: 웹사이트 제공(호스팅 & 배포) [11일차]  (0) 2023.12.29
섹션 3: HTML & CSS 자세히 알아보기 [7일 - 8일차]  (0) 2023.12.27
섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [5일차], 섹션 3: HTML & CSS 자세히 알아보기 [6일차]  (1) 2023.12.26
섹션 2: 첫 번째 웹사이트 구축: HTML 및 CSS 기초 [3일 - 4일차]  (0) 2023.12.25
'Web/100일 코딩 챌린지 - Web Development' Related Articles more