반응형
크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
경매하는 개발자
크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
전체 방문자
오늘
어제
  • 분류 전체보기 (329)
    • IT (128)
      • 아두이노 (6)
      • C C++ (17)
      • C C++ 컴파일 에러 (3)
      • LINUX (3)
      • Git (1)
      • OpenGL (0)
      • IT 상식 (38)
      • EXCEL & VBA (9)
      • 정보처리기사 (20)
      • 무작정 웹사이트 만들기 (6)
      • 포토샵 (3)
      • 파이썬 & vscode (16)
      • 머신러닝 & 인공지능 & 데이터사이언스 (5)
    • 부동산 (91)
      • 부동산일반 (31)
      • 세금 (6)
      • 경매 (46)
      • 법, 소송 (8)
    • 개인사업자 (43)
      • 할 일 (11)
      • 꿀팁 (9)
      • 세금 (14)
      • 지원사업 (8)
    • 독후감 (25)
      • 독후감 (25)
    • 경제 (4)
      • 거시경제 (4)
    • Tistory (34)
      • 티스토리 (23)
      • 애드센스 (11)
    • 기타 (4)
      • 에세이 (2)
      • 퇴사준비 (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 부가가치세
  • 개인사업자
  • 부의추월차선요약
  • 전자세금계산서
  • 세금계산서
  • 티스토리애드센스
  • 전입신고
  • 온비드공동인증서
  • 부의추월차선
  • 부의추월차선서평
  • 일반과세자
  • 부의추월차선줄거리
  • 공매
  • 온비드공매
  • 온비드공인인증서
  • 부의추월차선독후감
  • 애드센스
  • 부의추월차선리뷰
  • 경매
  • 확정일자

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널

경매하는 개발자

[웹사이트 만들기-6] CSS 문법 종류
IT/무작정 웹사이트 만들기

[웹사이트 만들기-6] CSS 문법 종류

2022. 11. 12. 22:59
반응형

[웹사이트 만들기-6] CSS 문법 종류

반응형

 


1. 이미지 배경 넣기

 - css 파일에 아래와 같이 background 명령어 및 url을 입력하면 배경이미지가 추가된다.

 - 아래 예시는 span 태그에 대한 배경이미지를 삽입한 것이다.

 

index.html 파일 소스

<!DOCTYPE html>
<html lang="ko">

<head>
  <title>Satthew's Page</title>
  <meta charset="UTF-8">
  <meta name="Satthew's Page" content="Satthew">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./images/favicon.png">
  
  <script src="./js/main.js"></script> <!--#hi-->

  <style>
    div {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <!-- <img src="./images/logo.jpg" alt="Can Not Used"> -->
  <span>Hello World!!</span>
  <span>Hello World!!</span>
  <div>Hello World!!</div> 
  <div>Hello World!!</div>
  <div>Hello World!!</div>
  <div>Hello Worldddddd!!</div>
</body>

</html>
반응형

 

main.css 파일 소스

span {
  color: red;
  width: 200px;
  height: 200px;
  background: url("../images/logo.jpg");
  font-size: 100px;
}

span 태그에 해당되는 부분에서 배경이 삽입되었다.

반응형

 

반응형

'IT > 무작정 웹사이트 만들기' 카테고리의 다른 글

[웹사이트 만들기-5] HTML 태그 종류  (0) 2022.11.12
[웹사이트 만들기-4] HTML, CSS, JS 구조  (0) 2022.11.12
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)  (1) 2022.11.12
[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란?  (1) 2022.10.18
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할  (0) 2022.10.17

    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널

    'IT/무작정 웹사이트 만들기' 카테고리의 다른 글
    • [웹사이트 만들기-5] HTML 태그 종류
    • [웹사이트 만들기-4] HTML, CSS, JS 구조
    • [웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)
    • [웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란?
    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널
    크몽 '경매하는 개발자' 님의 경매/부동산/IT/사업 채널입니다.

    티스토리툴바