강의에서 다음과 같이 사이트를 직접 백지에서 부터 만들어보라고 해서 만들어보았다.
색은 귀찮아서 통일하지 않았고, 나름대로 최대한 똑같이 만든 것 같다. 처음으로 직접 웹페이지를 만들어보니 성취감도 있었고 재밌었다.
그런데 노란색 글씨 왼쪽 끝에 있는 '|' 모양은 대체 어떻게 하는건지 몰라서 해설 강의를 찾아봤다.
border-left: 4px solid rgb(247, 230, 124);
padding-left: 10px;border-left 속성을 사용하면 되는거였다. padding-left를 추가해줘야 위의 예시 답안처럼 나온다.
+또한 사이트를 만드는 중에 자꾸 콘텐츠들이 중앙정렬이 되지 않아서 꽤나 헤맸는데, margin 속성의 속성 값을 잘못 지정한 것이었다. 익숙해지도록 노력해야겠다.
html 코드
<html lang="en">
<head>
<title>2nd-project</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<main>
<h1>HTML & CSS Basics Summary</h1>
<img src="images/html-css.png" alt="HTML&CSS" />
<div id="BOX">
<ol>
<li>
<h2>HTML Summary</h2>
<p>
HTML(HyperText Markup Language) is used to define our page
content, sturcture and meaning. You <span style="font-weight: bold">don't</span> use it for
styling purposes. Use CSS for that instead!
</p>
<p class="highlight">HTML uses 'elements' to describe(annotate) content</p>
<p>
HTML elements typically have an opening tag, content and then a
closing tag
</p>
<p class="highlight">You can also have void(empty) elements like images</p>
<p class="highlight">You can also configure elements with attributes</p>
<p>
There's a long list of available elements but you'll gain
experience over time, no worries.
</p>
<p>
Learn more about all available HTML elements on
<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element"
>the MDN HTML element reference</a
>
</p>
</li>
<li>
<h2>CSS Summary</h2>
<p>
CSS(Cascading Style Sheets) is used for styling your page content.
</p>
<p>Styles are assigned via property-value pairs</p>
<p>You can assign styles via the 'style' attribute</p>
<p class="highlight">
To avoid code duplication, you typically use global styles(e.g.
via the 'style' element) instead
</p>
<p>
Alternatively, you can work with external stylesheet files which
you 'link' to
</p>
<p class="highlight">
When working with CSS, concepts like 'inheritance', 'specificity'
and the 'box model' should be understood.
</p>
<p>
Learn more about all available CSS properties and values on
<a href="https://developer.mozilla.org/ko/docs/Web/CSS/Reference"
>the MDN CSS property reference</a
>
</p>
</li>
</ol>
</div>
<footer>
<a href="pdfs/html-css-basics-summary.pdf">Download PDF Summary</a>
<p>(c) Academined GmbH</p>
</footer>
</main>
</body>
</html>
CSS코드
main {
margin: 50px;
width: 800px;
padding: 24px;
width: 800px;
margin: 100px auto 72px auto;
}
body {
background-color: rgb(217, 187, 228);
text-align: center;
margin: 50px;
}
img {
width: 380px;
height: 200px;
margin-top: 20px;
}
h1 {
font-size: 40px;
color: rgb(152, 5, 205);
}
ol {
list-style: None;
background-color: rgb(173, 37, 207);
color: white;
text-align: left;
border: 2px solid rgb(18, 18, 9);
border-radius: 8px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.4);
padding: 20px;
}
ol h2 {
font-size: 30px;
}
ol a {
text-decoration: none;
color: black;
background-color: rgb(225, 225, 171);
border-radius: 4px;
padding: 2.5px;
font-weight: bold;
}
.highlight {
color: yellow;
margin-left: 15px;
border-left: 4px solid rgb(247, 230, 124);
padding-left: 10px;
}
#BOX {
margin-top: 50px;
}
footer {
margin-top: 50px;
}
footer a {
font-weight: bold;
border-radius: 4px;
text-decoration: none;
color: black;
padding: 10px;
background-color: rgb(247, 230, 124);
}
footer p {
margin-top: 25px;
}만들다보니 CSS부분에서 선택자를 약간 뭔가 체계적으로 쓰고 싶었는데 잘 안됐다. 이 부분은 클론코딩 등으로 배워봐야겠다.
- 추가내용: 페이지에 의미를 더해주는 요소들
시각장애인이나 웹 크롤러 등에게 더 의미있는 정보를 주기 위해서는 페이지에 의미론적인 요소를 더해주어야 한다.
-> Don’t 부분의 요소를 em(emphasis)이나 strong으로 바꿔준다. Strong을 사용하면 브라우저에서 자체로 글자를 굵게 만들어준다. 또한 보이스웨어 같은 프로그램에서 실제로 저 단어를 강조하여 읽어준다고 한다.
또한 구조를 더욱 명확하게 보여주고 싶다면 section요소를 사용하면 된다고 한다. HTML Summary부분과 CSS Summary부분을 각각 section요소에 중첩시켜주면 페이지의 구조가 명확해지기 때문에 필수로 해야하는건 아니지만 협업 등에서 무조건 써야할 것 같다.
