▶준비물

· 불필요하게 중복된 코드가 많은 상태

h1 {
  border-width: 5px;
  border-color: green;
  border-style: solid;
}
a {
  border-width: 5px;
  border-color: green;
  border-style: solid;
}

 

▶줄이기

h1, a {
      border-width: 5px;
      border-color: green;
      border-style: solid;
    }

 

▶더 줄이기

h1, a {
      border:5px solid green;
    }

 


 

생활코딩 WEB2 CSS 5 - 혁명적 변화

 

▶선택자

· 선택자(Selector)

 

· 선언문(Declaration)

 

· 속성(Property)

 

· 속성값(Value)

'1-2 css' 카테고리의 다른 글

[css] Block level element, Inline element_박스 기본 영역  (0) 2021.07.08
[css] id, class속성  (0) 2021.07.07
[css] 속성 간략하게 쓰기  (0) 2021.07.05
[css] html문서에서 css 연결하기  (0) 2021.05.13
[css] css 시작하기  (0) 2021.05.10


html, css, javasacript

기념일 계산기

 

▶자바스크립트의 날짜, 시간 입력

YYYY 연도 (4자리)
MM 월 (2자리)
DD 일 (2자리)
HH  (2자리)
MM  (2자리)
SS  (2자리)
ISO형식(YYYY-MM-DDTHH:MM:SS)  
긴 날짜 형식(MMM DD YYYY) · 월, 일, 연도 순
· 월은 숫자가 아닌, 영문으로 작성해야 함(January, Jan과 같은)
짧은 날짜 형식(MM/DD/YYYY) · 월, 일, 연도 순

 

▶자바스크립트 시간 단위

1밀리초 = 1/1,000초
1초 = 1,000밀리초
1분 = 60초 (= 1,000 * 60 = 60,000밀리초)
1시간 = 60분 (= 1,000 * 60 * 60 = 3,600,000밀리초)
1일 = 24시간 (= 1,000 * 60 * 60 * 24 = 86,400,000밀리초)

 

▶getTime() 함수가 바로 시, 분, 초 단위로 나오지 않고

밀리초로 나오기 때문에 

밀리초를 통해  다른 단위로 변환시켜야 한다. (위 '자바스크립트 시간 단위' 참조)

 

▶javascript/ date객체

console창에 new Date()를 입력하면

바로 지금 나우 이 순간의 날짜와 시간이 결과로 나타난다.

 

Date객체의 인스턴스를 now변수에 저장함

저장시킨 이후에는(이 말인 즉, var now = new Date를 적은 이후)

now객체는 Date객체의 속성과 함수를 사용할 수 있다.

두번째 줄의 now는 이를 이용해 오늘 날짜와 시간을 결과로 소환한 것.

 

▶javascript/ 자바스크립트의

document.querySelector('#accent').innerText = passedDay + "일"; 

요 부분을 통해 '얼마나'가 '182일'로 변환된다.

브라우저 창에서 확인하면,

요 부분이 없을 때는 '얼마나' 요 부분을 넣으면 '182일' 

 

▶javascript/ 번거로운 계산

var future = toFirst + 100 * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date100").innerText = year + " 년 " + month + " 월 " + date + " 일 ";

var future = toFirst + 365 * (100*60*60*24);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth();
var date = someday.getDate();
Document.querySelector("#date365").innerText = year + " 년 " + month + " 월 " + date + " 일 ";
future = toFirst + 100 * (100*60*60*24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
Document.querySelector("#date100").innerText = year + " 년 " + month + " 월 " + date + " 일 ";

future = toFirst + 365 * (100*60*60*24);
someday = new Date(future);
year = someday.getFullYear();
month = someday.getMonth();
date = someday.getDate();
Document.querySelector("#date365").innerText = year + " 년 " + month + " 월 " + date + " 일 ";

위의 두 방식대로 하면

100일 기념일, 365일 기념일... 등등 기념일 마다 매번 계산식을 작성해야 함

 

▶javascript/ 이 때 calcDate()함수를 이용하면,

function calcDate(days) {
  var future = toFirst + days * (100*60*60*24);
  var someday = new Date(future);
  var year = someday.getFullYear();
  var month = someday.getMonth();
  var date = someday.getDate();
  Document.querySelector("#date" + days).innerText = year + " 년 " + month + " 월 " + date + " 일 ";
}

calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일

function calcDate(days) {} 함수선언을 통해

일일이 계산할 필요가 없어진다.

 

javascript/ 아래의 함수호출 부분은

calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일

function calcDate(days) {} 함수의 앞, 뒤 어느 부분에 넣어도 상관 없음.

 

결과

 

▶html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aniversary calclulator</title>
  <link href="anniversary-calculator.css" rel="stylesheet">
</head>
<body>

  <div class="container">

    <div class="day1">
      <h5>처음 만난 날로부터</h5>
      <p id="accent" class="accent">
        <span style="font-size:0.9em; font-style:italic">얼마나...</span>
      </p>
    </div>

    <div class="bar">만난 지</div>

    <div class="day2">
      <ul>
        <li class="item-title">100일</li>         
        <li class="item-date" id="date100"></li>
      </ul>
      <ul>
        <li class="item-title">365일</li>
        <li class="item-date" id="date365"></li>
      </ul>     
      <ul>
          <li class="item-title">500일</li>
          <li class="item-date" id="date500"></li>
        </ul>      
      <ul>
        <li class="item-title">1000일</li>
        <li class="item-date" id="date1000"></li>
      </ul>      									     
      </div>
      
  </div>
  
  <script src="anniversary-calculator.js"></script>
    
</body>
</html>

 

▶css

* {
  box-sizing: border-box;
}
.container{
  width:500px;
  margin:0 auto;
  border:10px solid rgb(253, 208, 111);
  border-radius:2%;
  box-shadow:2px 2px 2px rgb(97, 97, 97, 0.5);
}
.day1 {
  padding-top:40px;
  text-align:center;  
  font-family: '배달의민족 한나';
  font-size:1em;
}
.day1 h5 {
  font-size:0.8em;
  color:rgb(145, 145, 145);
}
.accent {
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  font-family: '배달의민족 주아';
  font-weight: normal;
  font-size:4em;
  color:rgb(20, 124, 98);
}
.bar {
  width:100%;
  margin:60px auto 0 auto;
  padding-left:80px;
  height:50px;	
  background:rgb(20, 124, 98);
  font-family: '배달의민족 한나';
  font-size:1em;
  color:#fff;
  line-height:55px;
}
.day2 {
  font-family: '배달의민족 주아';
  font-size:1em;
  letter-spacing:-1.2pt;
  width:420px; 
  margin:20px auto 20px auto;
}
.day2 ul {
  list-style: none;
  border-bottom:1px dashed #ccc;
  height:70px;
}
.day2 ul:last-child {
  border-bottom:none;
}
.item-title {
  float:left;
  width:160px;        
  font-weight:bold;
  font-size:1.5em;
  line-height:60px;
}
.item-date {
  float:left;
  margin-left:60px;
  font-size:1.2em;
  color:#222;
  text-align:right;
  line-height:60px;
}

 

▶javascript

var now = new Date();
var firstDay = new Date("2020-12-25")

var toNow = now.getTime();
var toFirst = firstDay.getTime();
var passedTime = toNow - toFirst;

var passedDay = Math.round(passedTime/(1000*60*60*24));

document.querySelector('#accent').innerText = passedDay + "일";  

function calcDate(days) {
  var future = toFirst + days * (1000*60*60*24);
  var someday = new Date(future);
  var year = someday.getFullYear();
  var month = someday.getMonth();
  var date = someday.getDate();
  document.querySelector("#date" + days).innerText = year + " 년 " + month + " 월 " + date + " 일 ";
}

calcDate(100); //100일 기념일
calcDate(365); //365일 기념일
calcDate(500); //500일 기념일
calcDate(1000); //1000일 기념일

 

document.querySelector 에서 

document의 소문자d를 대문자D로 쓴 줄도 모르고 화면에 아무 것도 안 떠서 몇 시간이나 헤맸다.

예상치 못한 실수였는데, 

그렇다고 설마 저거 하나 때문에 브라우저에 결과값이 보이지 않을 거라고는 생각지도 못했다.


 

css 코드가 짧을 경우(html 문서 내에서 해결하고자 할 때)

 

html문서 내에서 <style></style>태그를 이용한다.

 

css 코드가 길 경우(css 파일을 연결하고자 할 때)

 

html문서에서 스크립트 파일로 저장된(별도의 파일로 저장된) css파일(.css)을 연결시키고자 할 때

html문서에서 <link>태그의 href속성, 즉 <link href>를 이용해서 css파일을 연결시킨다.

· <link rel="stylesheet" href="css파일경로">

 

▶예시

· <link>태그 + href속성

· <link rel="stylesheet" href="anniversary-calculator.css">

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>aniversary calclulator</title>
	<link rel="stylesheet" href="anniversary-calculator.css">
</head>
<body>
...


 

CSS(Cascading Style Sheet)

 

종속형 스타일 시트.

웹 브라우저에 정보를 나타내기 위해서는  html을 이용함

이 html을 시각적으로 꾸며주는 역할을 하는 것이 css.

 

웹 브라우저에 관한 디자인 작업시, html문서를 건드릴 필요 없이 css만으로 작업이 가능하다.

 

도서관 프로그래밍 코너에서 서성일 때

css 모음집이라는 두꺼운 책을 본 적이 있다.

당시에는 css 지식 자체가 방대하고 무거워 이에 비례해 두께가 두꺼운 게 아닐까, 하고 생각했는데

지금에 와서는 디자인적 요소에 따른 여러가지 예시가 많을 수 밖에 없기에 두꺼웠던 거라고 생각한다.

+ Recent posts