Skip to content
toylee blog · 컴퓨터, 프로그램 정보 공유

toylee blog · 컴퓨터, 프로그램 정보 공유

html css 예제 적용 및 연결

toylee, 2023년 05월 28일

CSS는 HTML과 함께 웹 페이지를 디자인하는 데 필수적인 요소입니다. HTML은 웹 페이지의 내용을 결정하는 반면, CSS는 내용을 꾸며주는 역할을 합니다. 따라서, CSS를 사용하여 웹 페이지의 디자인을 구성하는 것은 매우 중요합니다. 이번 글에서는 html css 예제 적용 및 연결 까지 함께 설명하겠습니다.

[목차]

  • 1. html css 예제 1 – background-color
  • 2. html css 예제 2 – 글꼴 및 글자 크기 변경
  • 3. html css 예제 3 – 이미지 사진 크기 변경
  • 4. html css 예제 4 – 텍스트 정렬
  • 5. html css 예제 5 – 링크 스타일 변경
  • 6. css 레이아웃 설정 그리드(grid)
  • 7. 결론 및 의견

1. html css 예제 1 – background-color

다음 예제는 HTML 문서의 배경 색상을 변경하는 CSS 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
  <style>
    body {
      background-color: #ff0000;
    }
  </style>
</head>
<body>
  <p>내용</p>
</body>
</html>
 
Colored by Color Scripter
cs

[실행화면]

css 배경변경

위 코드는 body 요소의 배경 색상을 회색(#ff0000)으로 변경합니다. 상업적인 웹 페이지에서는 회사의 색상과 일치하는 배경 색상을 사용하는 것이 좋습니다.

2. html css 예제 2 – 글꼴 및 글자 크기 변경

다음 예제는 HTML 문서의 글꼴과 글자 크기를 변경하는 CSS 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
  <style>
    p {
      font-family: “맑은 고딕”;
      font-size: 116px;
    }
 
  </style>
</head>
<body>
  <p>내용</p>
</body>
</html>
 
cs

[실행화면]

텍스트 사이즈

p 요소의 글꼴을 Arial로, 글자 크기를 16px로 변경합니다. 글꼴과 글자 크기는 웹 페이지의 가독성과 디자인을 결정합니다. 따라서, 적절한 글꼴과 글자 크기를 선택하여 사용자가 웹 페이지를 쉽게 읽을 수 있도록 해야 합니다. 예를 들어, 온라인 서점에서는 책과 관련된 글꼴을 사용하고, 글자 크기는 사용자가 책을 읽는 데 불편하지 않도록 적절하게 설정하는 것이 좋습니다.

3. html css 예제 3 – 이미지 사진 크기 변경

다음 예제는 HTML 문서의 이미지 사진 크기를 변경하는 CSS 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
  <style>
    img {
      width: 50%;
      height: auto;
    }
  </style>
</head>
<body>
  <img src=“이미지 주소”>
</body>
</html>
 
cs

[실행화면]

작은 화면에 이미지 비율 50%

이미지 비율1

큰 화면에 이미지 비율 50%

이미지비율 2

모든 img 요소의 너비를 화면의 50%로, 높이는 자동으로 조정합니다. 적절한 이미지 크기를 선택하여 웹 페이지의 디자인을 완성해야 합니다. 예를 들어, 관광지 홍보 웹 페이지에서는 이미지를 크게 보여주어 사용자가 관광지의 분위기를 느낄 수 있도록 하는 것이 좋습니다.

4. html css 예제 4 – 텍스트 정렬

다음 예제는 HTML 문서의 텍스트를 중앙 정렬하는 CSS 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
  <style>
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>내용</h1>
</body>
</html>
 
cs

[실행화면]

html css 예제 3

h1 요소의 텍스트를 중앙 정렬합니다.

5. html css 예제 5 – 링크 스타일 변경

다음 예제는 HTML 문서의 링크 스타일을 변경하는 CSS 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
  <style>
    a {
      color: blue;
      text-decoration: none;
    }
    a:hover {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <a href=“#”>링크</a>
</body>
</html>
 
Colored by Color Scripter
cs

[실행화면]

평상시 화면

html css 예제 4

마우스 올렸을때 색상 변경 및 under line

html css 예제 5

모든 a 요소의 색상을 파랑색으로, 밑줄을 없애줍니다. 또한, 마우스를 갖다대면 색상을 빨강색으로, 밑줄을 생성합니다.

6. css 레이아웃 설정 그리드(grid)

다음 예제는 CSS 그리드 레이아웃을 사용하여 웹 페이지를 구성하는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      grid-gap: 10px;
    }
    .item {
      background-color: #f2f2f2;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class=“container”>
    <div class=“item”>내용1</div>
    <div class=“item”>내용2</div>
    <div class=“item”>내용3</div>
  </div>
</body>
</html>
 
Colored by Color Scripter
cs

[실행화면]

html css 예제

3개의 열로 구성된 그리드 레이아웃을 생성하고, 각 열에 1개의 요소를 배치합니다.

7. 결론 및 의견

CSS는 웹 페이지 디자인에서 매우 중요한 역할을 합니다. 적절한 CSS를 사용하여 웹 페이지를 꾸미고, 사용자가 쉽게 이용할 수 있도록 하는 것이 좋습니다. 지금까지 간단하게 CSS의 기본 예제와 함께 설명하였으며, 웹 페이지를 디자인하는 데 도움이 되었기를 바랍니다.

[관련글]

all html tag 설명 및 예제

파이썬 pyqt6 qtableview 테이블 위젯 사용

PyQt6 QT Designer 사용자 지정 위젯

html css

글 내비게이션

Previous post
Next post

Related Posts

html

div 태그로 레이아웃 구성하기

2024년 11월 02일

웹 개발에서 레이아웃 구성은 매우 중요한 요소입니다. 이를 통해 사용자가 콘텐츠를 쉽게 접근하고 탐색할 수 있도록 돕기 때문입니다. 그 중에서도 div 태그를 사용한 레이아웃 구성은 매우 보편적이고 유용한 방법입니다. div 태그는 HTML 문서 내에서 별도의 블록을 지정하는 데 사용되며, 이를 통해 여러 요소를 그룹화하거나 스타일을 적용할 수 있습니다. 이번 글에서는 div 태그를 활용한 레이아웃 구성 방법에 대해 자세히 알아보겠습니다.

Read More

html table in table 이렇게 하면 됩니다.

2025년 02월 01일2025년 02월 01일

안녕하세요! 오늘은 HTML 테이블 안에 또 다른 테이블을 만드는 방법(html table in table) 에 대해 재미있게 풀어보려고 해요. 이 글을 통해 여러분도 쉽게 배워보세요!     HTML 테이블 기본 구조 HTML 테이블은 데이터를 깔끔하게 정리하는 데 도움을 줍니다. 테이블은 선과 열로 이루어져 있는데요, 기본적인 테이블 구조는 다음과 같습니다   파이썬…

Read More
html

all html tag 설명 및 예제

2023년 05월 27일

HTML은 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. 웹 브라우저에게 웹 페이지를 어떻게 표시해야 하는지 알려주는 일종의 지시어이죠. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 데 중요한 역할을 하며, 다양한 태그를 사용해 내용을 표시합니다. 이번 글에서는 all html tag 설명 및 예제 까지 제공하겠습니다. 1. All HTML Tag – 기본 태그…

Read More

답글 남기기 응답 취소

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

최신 글

  • usb a타입에 대해 알아보자
  • 포토샵 누끼따기 방법
  • vpn 연결방법 쉽게 설명해드립니다.
  • usb 장치 인식 실패시 해결방안
  • cpu i5와 i7 차이, 확실히 알려드릴게요

최신 댓글

  1. 윈도우 단축키 모음 Best5의 ace
  2. http https 차이의 챗GPT 란? · Working for you

보관함

  • 2025년 6월
  • 2025년 5월
  • 2025년 4월
  • 2025년 3월
  • 2025년 2월
  • 2025년 1월
  • 2024년 12월
  • 2024년 11월
  • 2024년 8월
  • 2024년 6월
  • 2024년 5월
  • 2024년 3월
  • 2024년 2월
  • 2023년 11월
  • 2023년 9월
  • 2023년 8월
  • 2023년 7월
  • 2023년 6월
  • 2023년 5월
  • 2023년 4월
  • 2023년 3월
  • 2023년 2월

카테고리

  • flutter
  • html
  • linux
  • macbook
  • Pc Useful Tips
  • 미분류
  • 워드프레스
  • 자바(Java)
  • 파이썬
  • 프로그래밍
©2025 toylee blog · 컴퓨터, 프로그램 정보 공유 | WordPress Theme by SuperbThemes