-
[100DaysOfCode] 09 - 10강 (Html, CSS 연습)Front-end/100DaysOfCode 2022. 7. 25. 22:30
Html, CSS 실습
만들어야 하는 페이지
실제 구현한 페이지
💡 구현 실패한 부분
강조 텍스트 앞에 있는 마커(bar)
p{ color: white; padding-left: 10px; } .subTitle{ color: rgb(246, 255, 151); border-left: 5px solid rgb(227, 197, 0); }padding-left 속성을 이용해서 본문 텍스트를 오른쪽으로 이동 시키고,
마커를 만들고자하는 텍스트에 border-left 속성을 이용해서 만들 수 있다
소스코드
<!DOCTYPE html> <html lang="en"> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>HTML & CSS Basics Summary</h1> <img src="images/html-css.png" alt="logo"> </header> <main> <h3>HTML Summary</h3> <p class="context">HTML (HyperText Markup Language) is the heart of every webpage. It defines the structure of the webpage and annotates the content to tell the browser what to display and provide extra meaning. </p> <p class="bar"></p><p class="subTitle">HTML (HyperText Markup Language) is the heart of every webpage. </p> <p>It defines the structure of the webpage and annotates the content to tell the browser what to display and provide extra meaning. </p> <p class="subTitle">Without HTML, text would always be "just text"</p> <p class="subTitle">there would be no semantic difference between titles, normal text, subtitles etc.</p> <p>Even though browsers by default add styles for certain HTML elements (e.g. elements are bold and bigger by default), you don't use <span>HTML for styling purposes!</span></p> <h3>CSS Summary</h3> <p class="context">CSS (Cascading Style Sheets) is a language that allows you to define style definitions for your HTML document. </p> <p>These definitions will be picked up by the browser</p> <p>control how the content will be displayed </p> <p class="subTitle">Where HTML defines the structure and meaning of your content </p> <p>CSS is used to then present the content exactly how you want to present it. </p> <p class="subTitle">It adds no meaning or annotation - it's really just about how things look.</p> <p>There's a broad variety of available CSS properties which you can define. <span>All those properties</span></p> </main> <footer> <a>Download PDF Summary</a> <p class="company">(c) Academend GmbH</p> </footer> </body> </html>body { background-color: rgb(234, 219, 251); } h1{ text-align: center; padding: 0; font-size: 48px; font-weight: 900; color:rgb(82, 0, 175); } img { display: block; margin: 36px auto 0 auto; width: 300px; margin-bottom: 40px; } main{ width: 760px; margin: 0 auto; background-color: rgb(82, 0, 175); border-radius: 8px; padding: 32px 32px; } h3{ margin-top: 24px; color:white; font-weight: 900; font-size: 24px; } .context{ color: white; } .context span{ font-weight: 900; } .subTitle{ color: rgb(246, 255, 151); border-left: 5px solid rgb(227, 197, 0); } p{ color: white; padding-left: 10px; } p span{ display: inline-block; background-color: rgb(245, 255, 139); color: black; padding: 2px 4px; border-radius: 4px; } footer { display: table; margin: 32px auto; padding: 0; } a { background-color: rgb(227, 197, 0); padding: 12px 16px; text-align: center; border-radius: 8px; } .company { color:rgb(114, 114, 114); font-size: 16px; text-align: center; margin-top: 32px; }아쉬운 점:
본문 텍스트를 <ui><li> 태그를 이용해서 작성했다면 코드가 더 깔끔했을 것 같다
<em>, <strong> 태그
html을 작성하면서 어떤 문장을 강조하고자 할 때, css를 통해 bold 속성을 주는 등 강조할 수 있지만, 눈이 안 보이는 사람들에게는 웹 접근성이 현저히 떨어진다. 따라서 <em>, <strong> 태그를 이용하면 억양이 바뀌기 때문에 더 직관적으로 강조할 수 있다
'Front-end > 100DaysOfCode' 카테고리의 다른 글
[100DaysOfCode] 11강(2) (0) 2022.07.26 [100DaysOfCode] 11강(1) (0) 2022.07.25 [100DaysOfCode] 08강 (0) 2022.07.22 [100DaysOfCode] 07강 (0) 2022.07.20 [100DaysOfCode] 06강 (0) 2022.07.19