안녕하세요,
수업듣고 실습중 아래와 같은 문제가 생겨 문의 드립니다.
제일 하단에 html, css 코드를 붙여넣어 두었고 정상적으로 저장 하였음을 확인했습니다.
문제는 바로 아래와 같습니다.
1. VS-code의 live Server로 미리보기 시 화면에 분할 영역의 색이 안보임
--> 각 div에 텍스트를 추가해보니 보임 (라이브 서버의 문제는 아닌것으로 생각)
2. Bracket 에디터에서의 문제 두가지
2-1: css퀵에디트: 각 class명에 커서를 두고 Ctrl+e를 누르면
"CSS빠른편집: 커서를 태그 클래스 또는 아이디에 두세요" 이런 팝업이 뜨면서 진행이 되지 않습니다.
<div class="container"> 이 구문에서 container에 커서두고 누르면 됩니다.
2-2: VS-code와 같이 미리보기에 div 각 색 블럭이 보이지 않습니다.
3. 모든 class를 id로 바꾸고, css도 #id로 바꾸면 정상적으로 출력됨.
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div clsss="header"></div>
<div clsss="left-menu"></div>
<div clsss="right"></div>
<div clsss="footer"></div>
</div>
</body>
</html>
```CSS
.profile {
width: 100px;
display: block;
margin-left: auto;
margin-right:auto
}
.title{
text-align:center;
font-size:16px;
}
.content {
text-align: center;
}
.box{
width: 200px;
background-color: cadetblue;
margin: 10px;
padding: 40px;
border-radius: 5px;
margin-left: auto;
margin-right:auto;
font-size: 12px;
font-family: gulim;
text-align: center;
color: white;
box-shadow: 5px 5px black;
}
.container{
width: 800px;
}
.header{
width: 100%;
height: 100px;
background: aquamarine;
}
.left-menu{
width: 20%;
height: 400px;
background: cornflowerblue;
float: left;
}
.right{
width: 80%;
height: 400px;
background: coral;
float: left;
}
.footer{
width: 100%;
height: 100px;
background-color: grey;
clear: both;
}
