7l log

0531 본문

2022

0531

HAPAGO 2022. 6. 2. 09:33
 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경 이미지</title>
  <style>
    body{
      background: url(images/bg1.jpg);
    }
    h1 {
      margin-top:150px;   /* 상단 마진 */
      font-size:80px;  /* 글자 크기 */
      text-align: center;      /* 가운데 정렬 */
    }
  </style>
</head>
<body>
  <h1>Do it!</h1>
 </body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경 이미지</title>
  <style>
    #container{
      width:1100px;
      margin:50px auto;
    }
    .box{
      float:left;
      border:1px solid #222;
      width:300px;
      height:300px;      
      margin:20px;
      background:url('images/bg4.jpg') no-repeat left top;
    }
    #bg1 { background-size:auto;}  /* 원래 배경 이미지 크기로 표시 */
    #bg2 { background-size:200px;}  /* 너비는 200px, 높이는 자동 계산 */
    #bg3 { background-size:50%;}  /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
    #bg4 { background-size:100% 100%;}  /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
    #bg5 { background-size:contain;}  /* 요소 안에 배경 이미지가 다 보이도록 표시 */
    #bg6 { background-size:cover;}  /* 요소를 완전히 덮도록 배경 이미지 표시 */
  </style>
</head>
<body>
  <div id="container">
    <div class="box" id="bg1"></div>
    <div class="box" id="bg2"></div>
    <div class="box" id="bg3"></div>
    <div class="box" id="bg4"></div>
    <div class="box" id="bg5"></div>
    <div class="box" id="bg6"></div>
  </div>
 </body>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>배경 이미지</title>
  <style>
    body {  
      background-image:url('images/bg2.png');  /* 문서 전체 배경 이미지 */
      background-repeat:no-repeat;  /* 배경 이미지 반복 안 함 */
      background-position:right top;  /* 배경 이미지를 오른쪽 상단에 위치시킴 */
      background-attachment:fixed;  /* 배경 이미지 고정 */
    }
    div {
      width:400px;
      height:250px;
      padding: 20px;
      border: 20px  solid rgba(204, 204, 204, 0.493);        
      margin-bottom:20px;
      overflow:auto;
      background-image:url('images/bg3.png');  /* 텍스트 상자의 배경 이미지 */
      background-repeat:no-repeat;  /* 배경 이미지 반복 안 함 */      
      background-position:right top;  /* 배경 이미지를 오른쪽 상단에 위치시킴 */
    }
    #bg1 {  
      background-origin:padding-box;  /* 패딩까지 배경 이미지 표시 */
    }
    #bg2 {
      background-origin:border-box;  /* 테두리까지 배경 이미지 표시 */
    }
    #bg3 {    
      background-origin:content-box;  /* 내용 영역만 배경 이미지 표시 */
    }
  </style>
</head>
<body>
  <div id="bg1">
    <h2>바빠 시리즈 </h2>
    <h3>-바쁜 학생을 위한 빠른 학습법</h3>
    <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
  </div>
  <div id="bg2">
    <h2>바빠 시리즈 </h2>
    <h3>-바쁜 학생을 위한 빠른 학습법</h3>
    <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
  </div>
  <div id="bg3">
    <h2>바빠 시리즈 </h2>
    <h3>-바쁜 학생을 위한 빠른 학습법</h3>
    <p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
  </div>
 </body>
</html>

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>link 스타일</title>
<style>
  .container {
    width: 960px;
    margin : 0 auto;
  }
  .navi{
    width:960px;
    height:60px;
    padding-bottom:10px;
    border-bottom:2px solid #ccc;
  }
  .navi ul{
    list-style: none;
    padding-top:10px;
    padding-bottom:5px;
  }
  .navi ul li {
    float:left;
    width:150px;
    padding:10px;  
  }
  .navi a:link{
    display:block;
    font-size:14px;
    color:rgb(41, 164, 115);
    padding: 10px;
    text-decoration: none;  /* 밑줄 없앰 */
    text-align: center;
  }
  .navi a:hover,  .navi a:focus {
    background-color:#222;  /* 배경 색 */
    color:#fff;  /* 글자 색 */
  }
  .navi a:active {
    background-color:#f00;  /* 배경 색 */
  }
  h1+p{
    background: red;
  }
</style>
</head>

<body>
<div class="container">
    <nav class="navi">
      <ul>
        <li><a href="#">이용 안내</a></li>
        <li><a href="#">객실 소개</a></li>
        <li><a href="#">예약 방법 및 요금</a></li>
        <li><a href="#">예약하기</a></li>
      </ul>
    </nav>  
  </div>
  <section>
    <h1>형제 노드를 찾아보아요!</h1>
    <p> 나는 h1과 같은 레벨이므로 형제입니다.1</p>
    <p> 나는 h1과 같은 레벨이므로 형제입니다.2</p>
    <p> 나는 h1과 같은 레벨이므로 형제입니다.3</p>

  </section>
</body>
</html>

 

 

 

 

Flexbox Froggy - CSS flexbox 속성 배우기 게임

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

 

시맨틱태그를 쓰는 연습, 배치(그리드, 플렉스 등등) 

자바스크립트 확장자: .js

 

자바스크립트 변수 var 와 let의 차이

[자바스크립트] 변수 선언 방식 차이: var / let / const (tistory.com)

 

[자바스크립트] 변수 선언 방식 차이: var / let / const

자바스크립트의 변수 선언은 var로만 가능했으나, ES6(ES2015)부터 let과 const가 추가 되었다. 옛날의 var가 최신의 let(변수), const(상수)로 분리되었다고 생각할 수 있으나, 내부 사정은 상당히 다르

curryyou.tistory.com

 

 

저작자표시 비영리 변경금지 (새창열림)

'2022' 카테고리의 다른 글

[직무관련] 백엔드, 풀스택 개발자 서칭  (0) 2022.12.31
0602  (0) 2022.06.02
0530 CSS  (0) 2022.05.30
0527 HTML  (0) 2022.05.27
[R데이터분석] 날짜와 시간 관련함수(package: lubridate)  (0) 2022.04.24
'2022' Related Articles more
Comments