- 아래 HTML 문서를 조건에 맞게 디자인하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 실습</title>
<style>
/* 1. 박스 패딩, 테두리, 마진 설정 */
.box {
/* 이곳에 패딩, 테두리, 마진을 설정하세요 */
}
/* 2. 제목의 기본 색상은 녹색 */
h1 {
/* 이곳에 기본 제목 색상을 설정하세요 */
}
/* 3. 제목에 클래스 .highlight가 있을 때는 빨간색 */
.highlight {
/* 이곳에 클래스 적용 시 제목 색상을 설정하세요 */
}
/* 4. id가 special인 경우 노란색 */
#special {
/* 이곳에 id 적용 시 색상을 설정하세요 */
}
/* 5. 단위를 적절히 사용해 크기 및 글자 크기를 설정하세요 */
.content {
width: 50%; /* 50%로 박스 크기를 설정 */
font-size: 1.5em; /* 글자 크기 설정 */
}
</style>
</head>
<body>
<h1 class="highlight">박스 모델 실습</h1>
<h1 id="special">우선순위 실습</h1>
<div class="box content">
이곳은 박스 모델이 적용된 콘텐츠입니다.
</div>
</body>
</html>
적용할 CSS 속성
- 박스 안에 텍스트가 있고, 패딩(padding)을 이용해 텍스트와 테두리 사이의 여백을 10픽셀로 설정합니다.
- 박스 테두리(border)는 3픽셀 두께의 실선(
solid)으로 설정하고, 색상은 파란색(blue)으로 합니다. - 박스 바깥쪽 여백(margin)은 20픽셀로 설정합니다.
h1제목은 기본적으로 녹색(green)으로 설정하되, 클래스.highlight가 적용된 경우 빨간색(red)이 되도록 스타일을 지정합니다.id가special인 요소는 우선순위에서 무조건 노란색(yellow)으로 설정되도록 합니다.- 단위로는
px,em,rem,%를 적절히 사용하여 박스의 크기와 글자 크기를 설정하세요.
오늘은 어제와 다르게 삼성 Dex모드를 이용하여 휴대폰으로 작업하였다. https://vscode.dev 에 접속하면 웹모드로 Visual Studio Code를 사용할 수 있다. 또 안드로이드용 Vscode도 구글 플레이스토어에 존재하니 받아서 사용할 수 있었다.
오늘 해볼 실습과제는 별로 어려운건 아니라서 빠르게 한꺼번에 작성하였다.
선택자 우선순위는
1순위 ID 선택자
2순위 클래스 선택자
3순위 태그 선택자
이다. 따라서 위에 <h1>태그 에 적용된 파랑색은 ID 선택자와 클래스 선택자에 밀려 적용되지 않는다.
오늘은 휴대폰으로 코드를 작성하고 블로그에 글을 게시해보았다. 적당한 수준의 Visual Studio Code 작성은 무리가 없는 것 같다.
안녕하세요~~