저번 시간에는 CSS 강의를 듣고 퀴즈도 풀어봤다.
2023.07.04 - [프로그래밍/프론트엔드] - [CSS] 얄코의 CSS 강의를 듣고
[CSS] 얄코의 CSS 강의를 듣고
지난 번 스터디에서는 HTML 강의로 생활코딩님의 유튜브를 들었다. 2023.07.01 - [프로그래밍/프론트엔드] - [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 [HTML] 생활코딩 WEB1 - HTML & Internet을 듣고 오랜만에
quickchabun.tistory.com
2023.07.05 - [분류 전체보기] - [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자
[W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자
저번에는 HTMl 퀴즈를 풀어보았다. 2023.07.02 - [프로그래밍/프론트엔드] - [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다. [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보았다. 프론트엔드 스터디를 하면서 강의를
quickchabun.tistory.com
이번에는 CSS를 활용한 예제를 풀어볼 것이다. 밑에 링크에 들어가면 문제를 확인할 수 있다.
https://dinfree.com/lecture/frontend/122_css_exam.html#q-1
CSS 프로그래밍 기초
CSS 프로그래밍 기초 실습 모음 입니다.
dinfree.com
강의를 듣고 퀴즈를 풀어보기는 했지만 실제로 CSS를 많이 다뤄본 적은 없어서 잘 만들 수 있을지 확신은 들지 않았다. 하지만 할 수 있으리라 믿고 한 번 시도해보기로 했다.
1번째 시도
HTML 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="csspr1.css">
</head>
<body>
<div id="title">CSS Quiz-1</div>
<br><br>
<div id="info">
<div class="info-c">
<p>Department: Computer Engineering</p>
<p>Student name: Hong Kil Dong</p>
<p>Student ID: 20190129</p>
</div>
</div>
<br><br>
<div id="main">
<div class="ex-title">
<p>Example</p>
</div>
<div id="example-back">
<div class="example">
<p><h1>Hello World!</h1></p>
<p><p>Lorem ipsum...</p></p>
</div>
</div>
<br><br>
<div class="ex-button">
<input class="try" type="button" value="Try it Yourself>>">
</div>
</div>
</body>
</html>
CSS 코드
#title {
background-color: blue;
text-align: center;
color: white;
font-size: 30px;
margin: 0 auto;
width: 80vw;
}
#info {
position: relative;
background-color: #FF5500;
color: white;
text-align: left;
margin: 0 auto;
width: 80vw;
height: 20vh;
line-height: 5px;
}
.info-c {
font-size: 20px;
position: absolute;
top: 25%;
left: 8%;
}
#main {
position: relative;
background-color: gray;
margin: 0 auto;
width: 80vw;
height: 40vh;
}
.ex-title {
position: absolute;
margin-top: 0;
margin-left: 5vw;
font-size: 30px;
color: black;
font-family:'Times New Roman', Times, serif;
}
#example-back{
position: absolute;
width: 70vw;
height: 15vh;
background-color: azure;
line-height: 10vh;
margin-top: 15vh;
margin-left: 5vw;
}
.example {
position: absolute;
margin-left: 5vw;
margin-top: 3vh;
line-height: 0;
}
.ex-button {
position: absolute;
margin-top: 30vh;
margin-left: 5vw;
background-color: greenyellow;
color: white;
}
position을 다뤄본적이 많이 없어서 여기서 시간을 다 잡아먹었다. 요소들이 원하는 대로 배치가 되지 않아서 position을 relative로 바꿔보기도하고 absolute로 바꿔보기도하고. margin이랑 padding도 건드려보다가 이 사단이 난 것 같다.
다른 팀원분들의 코드를 보니 다들 position을 안 건드셨다. 최대한 문제의 그림과 비슷해 보이게, 다시 한 번 시도해본다.
두 번째 시도
HTML 코드
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="csspr1.css">
</head>
<body>
<div class="container">
<h1 id="title">CSS Quiz-1</h1>
<div id="info">
<p class="infor">Department: Computer Engineering</p>
<p class="infor">Student name: Hong Kil Dong</p>
<p class="infor">Student ID: 20190129</p>
</div>
<br><br>
<div id="main">
<h2 id="ex-title">Example</h2>
<div id="ex-back">
<p class = "ex"><h1>Hello World!</h1></p>
<p class = "ex"><p>Lorem ipsum...</p></p>
</div>
<input class="try" type="button" value="Try it Yourself>>">
</div>
</div>
</body>
</html>CSS 코드
.container {
width: 80%;
margin: 0 auto;
}
#title {
background-color: #50BCDF;
text-align: center;
color: white;
}
#info {
background-color: #FF5500;
padding: 30px 10px;
line-height: 5px;
}
.infor {
color: white;
text-align: left;
padding: 0;
margin-left: 30px;
}
#main {
background-color: #D3D3D3;
height: 40vh;
padding: 30px 30px;
}
#ex-title {
color: black;
font-family:'Times New Roman', Times, serif;
}
#ex-back {
background-color: azure;
border-left: 5px solid green;
padding: 50px 0;
margin: 30px 0 10px 0;
line-height: 5px;
}
.ex {
padding-left : 50px;
font-weight: bold;
font-size: 15px;
}
.try {
background-color: green;
color: white;
margin: 10px 0 5px 0;
padding: 10px 30px;
font-size: 30px;
}
이제 꽤 문제의 그림과 비슷해진 것 같다. 요소들의 width가 같을 때 그 요소들을 하나의 div로 묶어서 그 div의 속성만 변경해주면 꽤 편리하다는 사실을 배우게 되었다.
※ 이제 보니 저 예제의 힌트에서 소스 코드 부분은 <xml> 태그를 활용하면 좋다고 했다. 다음에는 태그가 본문에 포함되어 있을 때는 <xml> 태그를 활용해야겠다.
아직은 CSS를 다루는 데 미숙하다. 연습량의 부족때문일 것이다. 남은 예제들도 풀어보면서 CSS에 익숙해지기 위해 노력할 것이다. 재작년에 강의 들으면서 CSS를 열심히 배웠던 기억이 났는데, 역시 오랫동안 손을 놓았던 것은 기억해내기 어렵나보다. 결국, 계속 해보는 수밖에 없다.
'Frontend > HTML, CSS' 카테고리의 다른 글
| [HTML] HTML 구조, <script> 태그, HTML 박스모델 등에 대한 요약 (0) | 2024.03.14 |
|---|---|
| [W3Schools/W3스쿨즈] CSS 퀴즈를 풀어보자 (0) | 2023.07.05 |
| [CSS] 얄코의 CSS 강의를 듣고 (0) | 2023.07.04 |
| [HTML] 실습 예제를 풀어보자 (0) | 2023.07.02 |
| [W3Schools/W3스쿨즈] HTML 퀴즈를 풀어보자 (0) | 2023.07.02 |
