반응형
css 과제가 있었기에 한번 연습해봤습니다
매우 간단했음에도, 강의 하루 뒤에 연습한다고 바로 가물가물한 거 봐서
어떤 학습이든지 바로 복습해주는 게 좋기는 하네요...
그리고 보너스 과제도 있었으나 이것은 글로 올리지 않겠습니다
내용은 display: none과 visibility:hidden을 실험해보는 것인데, 해보실 분들은 구글링해서 사용법 익혀 해보시는 것도 좋다고 생각합니다.
css 코드는 다음과 같습니다.
html {
.box {
border: 50px solid red;
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
margin-top: 20px;
}
.box-green {
border: 50px solid blue;
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
margin-top: 20px;
}
.box-blue {
border: 50px solid green;
width: 200px;
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
margin-top: 20px;
}
height: 100%;
width: 100%;
}
HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box">박스 1</div>
<div class="box-green">박스 2</div>
<div class="box-blue">박스 3</div>
</body>
</html>
참고로 본 과제는 코딩알려주는 누나님의 HTML,CSS 강의를 듣고하였으나...
본 내용은 코드를 임의로 무단복사하여 배포한 것이 아닌, 순수하게 저의 학습의 결과물 입니다
반응형
'It Study > 웹 개발 프로젝트 (임시 기록 중단)' 카테고리의 다른 글
| 도전과제- position과 flexbox를 연습해보자 - 개인 해답 (feat:코딩알려주는 누나/ HTML CSS) (0) | 2024.02.11 |
|---|---|
| Google 클론코딩 연습 (1) | 2024.02.11 |
| HTML 기초 연습1 (2) | 2024.01.29 |
