1.3 색상과 배경

약 3분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

코드 css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.color-example {
    background-color: #FF5733; /* 배경색 설정 */
    color: white; /* 텍스트 색상 설정 */
    padding: 20px;
    text-align: center;
}

h1 {
    margin: 0;
    font-size: 2.5em;
}

p {
    font-size: 1.2em;
}

실습

이제 간단한 웹 페이지를 만들어보겠습니다. 위에 제공된 HTML과 CSS 코드를 각각 index.html과 styles.css라는 파일로 저장하세요. 그런 다음 웹 브라우저에서 index.html 파일을 열어보세요.

실습 결과 화면:

제목과 문단이 포함된 웹 페이지가 보일 것입니다.
배경 색상은 주황색이고, 문자 색상은 하얀색입니다.

자주 발생하는 오류 및 해결 방법

CSS가 적용되지 않는 경우:
- 확인해보세요. CSS 파일의 경로가 올바른지?(예: link 태그의 href 속성)
- 브라우저의 캐시 문제일 수 있으므로, 새로 고침(CTRL + R) 해보세요.
텍스트가 잘 보이지 않는 경우:
- 배경색과 텍스트 색상이 너무 유사한지 확인하세요. 배경색을 변경하여 가독성을 높이세요.

정리

이번 장에서는 색상과 배경을 활용하여 시각적으로 매력적인 웹 페이지를 만드는 법을 배웠습니다. 다양한 색상 지정 방법을 익히고, 이를 실제 웹사이트에 적용해보았습니다. 다음 장에서는 레이아웃을 조정하는 방법을 다룰 예정입니다. 이러한 기초 지식을 바탕으로 나만의 멋진 웹사이트를 디자인해보세요!

1.3 색상과 배경

실습

자주 발생하는 오류 및 해결 방법

정리

댓글 0