Category: K-MOOC

bookmark_border자바스크립트 반복문

Posted on

자바스크립트 반복문

  • While
    • 조건이 참인 동안 코드블록을 반복
    • 반복 횟수가 불명확한 경우 주로 사용

while(조건) {
코드블록
}

var a = Math.floor(Math.random() * 10);
var b = Math.floor(Math.random() * 10);
var answer;

while (answer != (a + b)) {
  answer = prompt(a + '+' + b + '= ?');
}
console.log("정답입니다.");
0506-while-1다운로드
  • For
    • 배열안의 요소를 하나씩 꺼내며 반복
    • 배열의 길이만큼 처럼 반복 횟수가 명확한 경우 주로 사용

for(var{변수}of{배열}) {
코드 블록
}

var scores = [90, 92, 84, 98, 70];
var sum = 0;

for (var score of scores) {
  sum += score;
}
console.log("총점: " + sum);
console.log("평균: " + (sum / scores.length));
0507-for-1다운로드
  • 가장 큰 수를 반환하는 함수
function max(arr) {
  var _max = -99999; // 아주 작은수
  for (var i of arr) {
    if (i > _max) {
      _max = i;
    }
  }
  return _max;
}      
console.log("가장 큰 수는 " + max([5, 7, 10, 2, 8]) + "입니다.");
0508-max-num-1다운로드
  • 배열을 화면에 출력하기
<ul id="list"></ul>
<script>
  var list = document.getElementById("list");
  var products = ['데스크탑', '모니터', '노트북', '스피커', '마우스'];

  var html = '';
  for (var product of products) {
    html += '<li>' + product + '</li>';
  }
  list.innerHTML = html;
</script>
0509-print-array-1다운로드

과제 : 전달 받은 배열 중 가장 큰 수를 반환하는 자바스크립트 함수를 작성해보세요.

0510-homework-1다운로드

bookmark_border자바스크립트 조건문

Posted on

자바스크립트 조건문

  • if
  • if~else
  • if ~else if~else
var score = prompt("성적을 입력하세요.");

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}
  • switch
  • break
var language = prompt("언어를 입력해주세요.");

switch(language) {
  case "korean":
    alert("안녕하세요.");
    break;
  case "english":
    alert("Hello.");
    break;
  case "spanish":
    alert("Hola.");
    break;
  default:
    alert("지원하지 않는 언어입니다.");
    break;
}
0505-condition-1다운로드

bookmark_border자바스크립트 함수

Posted on

자바스크립트 함수

함수 정의

  • 특정 기능을 하는 구문(알고리즘,로직)을 독립된 형태로 만드는 것
  • 변수에 저장할 수 있는 한가지 자료형
  • 함수 구조 형식 : var {함수명}=function(){//저장할 코드 }
  • 축약 형식 : function{함수명}(){//저장할 코드 }
  • 함수 실행 : {함수명}()
var sayHello = function () {
  console.log('Hello~');
}
sayHello();

// 같은 코드
function sayHello() {
  console.log('Hello~');
}

함수에 값 전달하기

  • 함수에 저장된 코드를 실행할 때 값을 전달할 수 있음
  • 매개변수 사용 함수 형식 : function{함수명}(값1,값2,…){}
  • 값1,값2,…매개변수라고 함
  • 코드 블럭 안에서 전달 받은 값 사용 가능
  • 함수에 전달하는 값을 함수 인자라고 함
function square(x) {
  console.log(x * x);
}
square(2);
square(0.1);

값을 반환하는 함수

  • 함수의 실행 결과를 반환
  • 함수 코드 블록 안에서 return{값} 형식 사용
  • 반환된 값은 다른 표현식들과 같은 취급
function square(x) {
  return x * x;
}
var vaule = square(4);
0501-function-1다운로드

함수를 인자로 전달받는 함수

  • 함수의 인자로 함수명을 전달
  • 함수 내부에서 전달받은 함수를 실행
  • ex) setInterval(tick, 1000);
function operator(x, y, func) {
  return func(x, y);
}

function add(a, b) { return a+b; }
function substract(a, b) { return a-b; }

console.log(operator(4, 2, add));
console.log(operator(4, 2, substract));

<script>
  var element = document.getElementById("text");

  setTimeout(function() {
    element.innerText = '삭제됨';
  }, 3000);      
</script>
0502-function-2다운로드

배열 객체의 함수

고갱고흐
겁무모함
인색함낭비
격분줏대없음
촌스러움익살
무뚝뚝함아부
var balls = ['축구공', '야구공', '배구공', '농구공'];
balls.forEach(throwBall);

function throwBall(ball) {
  console.log(ball + '을(를) 던졌습니다.')
};

var numbers = [1, 2, 3, 4, 5];
var twice = numbers.map(function(value, index) {
  return value*2;
});
console.log(twice);

var even = numbers.filter(function(value, index) {
  return value % 2 == 0;
});
console.log(even);
0503-function-3다운로드

이벤트

자바스크립트 이벤트

  • 사용자의 입력을 처리
  • HTML태그 마다 다양한 이벤트가 발생됨
  • click, focus, blur 등
  • 이벤트 처리기는 이벤트 발생 시 실행할 함수를 전달받음

이벤트 처리기 등록

  • 자바스크립트로 html요소를 선택한 뒤 addEventListener 함수를 호출
  • 형식 : addEventListner(이벤트이름, 실행할 함수)
    • 첫 번째 인자-이벤트의 이름
    • 두 번째 인자-이벤트가 발생했을 때 실행할 함수

Click이벤트

  • HTML 요소를 마우스로 클릭하거나 터치 디바이스에서 터치시 발생
  • 마우스 이벤트 중 하나로 mousedown, mouseup 이벤트 발생 후에 발생됨
  • 버튼 뿐만 아니라 모든 HTML요소에서 이벤트가 발생되고 이벤트 처리기를 등록할 수 있음
var button = document.getElementById("button");
var element = document.getElementById("count");

var count = 0;
button.addEventListener('click', function() {
  count++;
  element.innerText = count + '회 클릭';
});
0504-function-4다운로드

bookmark_border자바스크립트 객체

Posted on

자바스크립트 객체

객체의 정의

  • 객체의 구성:
    • 속성(Property)
    • 메써드(Method)
  • 객체는 키와 값의 쌍으로 복합 정보를 저장
  • 객체 저장 형식
    • { “키1”: “값1”, “키2”: “값2”, … (생략) }
  • 객체의 요소에 접근 방식
    • {객체명}.{키} 형식
  • 객체의 한 키/값 쌍을 프로퍼티라 함
var student = {
   "name":"홍길동", "id":"219xxx", "gender":"남성", "address":"포항시 북구"
}
student.name
student.id
student['name']

var students = [
 {'name':'홍길동', 'id':'219xxx'},
 {'name':'김아무개', 'id':'218xxx'},
 {'name':'최xx', 'id':'220xxx'}
}
student[2].name
var id_name = student[1].id + ' ' + student[1].name

중첩 객체

• 객체의 프로퍼티의 값으로 객체를 가질 수 있음
• 객체 안에 다른 객체 저장 가능

var student = {
   name: {
          first: '군오',
          last:'김'
   },
   class: ['자바스크립트', '파이썬']
}
student.name.last + student.name.first

내장 객체 : Math, Date

  • 자바스크립트에서 자주 사용하는 기능을 미리 구현해 놓은 객체
  • Math, Number, Date, Array, Set 등 다양한 내장 객체가 존재
  • Math
    • 수학적인 상수와 함수를 가진 객체
코드 설명
Math.PI 원주율
Math.abs(x) x 의 절대값
Math.ceil(x),
Math.round(x),
Math.floor(x)		 x의 올림,
반올림,
버림
Math.sqrt(x) x 의 제곱근
Math.max(x, y, …),
Math.min(x, y, …)		 인수 중 가장 큰수,
가장 작은수
  • Date
    • 날짜와 시간을 다루기 위한 객체
코드 설명
var today = new Date() 변수 today 에 현재 날짜, 시간을 저장
var someday = new Date(‘2019-06-03’) 변수 someday 에 2019년 6월 3일을 저장
today.getFullYear() today 에 저장되어 있는 날짜의 4자리 연도를 반환
today.getMonth() today 에 저장되어 있는 달을 나타내는 0에서 11 사이의 수를 반환. 0은 1월
today.getDate() today 에 저장되어 있는 날짜의 ‘일’을 반환
today.getDay() today 에 저장되어 있는 날짜의 요일을 나타내는 0에서 6 사이의 수를 반환. 0은 일요일

전자시계 만들기

<p id="text" class="content"></p>
<script>
  var element = document.getElementById("text");
  var tick = function() {
    var now = new Date();
    var time = now.getHours() + '시' + 
                now.getMinutes() + '분' +
                now.getSeconds() + '초';
  
    element.innerText = time;
  };
  setInterval(tick, 1000);
</script>
0402-time-tick다운로드

bookmark_border자바스크립트 배열

Posted on

자바스크립트 배열(Array)

const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
let index = cars.indexOf("Volvo");

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits.push("Kiwi");

var students = ['김xx', '최xx', '박xx', '이xx']
students[Math.floor(Math.random()*students.length)]


let a = Math.floor(0.60); > 0
let d = Math.floor(5.1); > 5
let e = Math.floor(-5.1); > -6
let f = Math.floor(-5.9); > -6

Html문서에 자바스크립트 코드 포함

  • JavaScript HTML DOM Document
  • document.getElementById: 결과가 하나
  • document.getElementsByTagName, document.getElementsByClassName: 결과가 다수
<!DOCTYPE html>
<html>
<body>
  <p id="my_text" class="content"></p>
  <script>
    var element1 = document.getElementById("my_text");
    var element2 = document.getElementsByTagName("p");
    var element3 = document.getElementsByClassName("content");

    console.log(element1);
    console.log(element2);
    console.log(element3);
  </script>
</body>
</html>

> 크롬 console 결과
<p id="my_text" class="content"></p>
HTMLCollection(1)
HTMLCollection(1)


<!DOCTYPE html>
<html>
  <head><title>7-2</title></head>
<body>
  <p id="my_text" class="content"></p>
  <script>
    var element = document.getElementById("my_text");
    var name = prompt("이름을 입력하세요");
    document.innerText = name + "님, 안녕하세요."
  </script>
</body>
</html>
0401-javascript다운로드

bookmark_border자바스크립트 변수와 연산자

Posted on

자바스크립트 변수와 연산자

자바스크립트 소개

  • 웹 브라우저에서 동작하는 스크립트 언어
  • HTML 요소 조작, 사용자 입력 처리 가능
  • 가장 인기있는 프로그래밍 언어
    • 앱 개발
    • 서버측 프로그램 개발
    • 사물인터넷 개발 등
    • 다양한 방면에서 이용됨
  • 자바스크립트의 장점
    • 웹 브라우저에서 코드 작성 및 실행가능
    • 데이터베이스부터 앱까지 모두 개발 가능
    • 타 언어에 비해 배우기 쉬움

변수의 정의와 사용

  • 크롬 > F12 >Consol > 입력, Shift+Enter (줄바꿈)
var a = 10
var b = 3
var c = (a + b) / 2
console.log(c)

var name = "자바스크립트"
console.log(name)

연산자 종류와 사용

var name = "자바스크립트" + "배우는" + "시간입니다"
console.log(name)

console.log('10' + 5) // 문자로 인식
> '105'

var trueOrFalse = true
console.log(trueOrFalse)

var speed = 80
var speedLimit= 100

speedViolation = speed >= speedLimit
> false

bookmark_border부트스트랩 소개 및 활용

Posted on

부트스트랩 소개 및 활용

부트스트랩

  • 웹 디자인을 목적으로 하는 오픈 소스의 Framework
  • CSS와 JAVA 스크립트로 이루어진 라이브러리
  • 트위터 내부의 인터페이스 일관성을 목적으로 개발(Blue Print)
  • 오픈 소스로 공개되면서 Bootstrap으로 바뀜

프레임 워크 (Framework)

  • 소프트웨어의 생산성 문제 때문에 개발된 방법
  • 반복된 구조나 기능들을 추상화 시켜 재사용을 가능하도록 하는 소프트웨어 환경

Bootstrap의 장점

  • 저렴한 비용
    • 오픈소스 이기 때문에 무료로 이용 가능
    • 저렴한 비용으로 다양한 테마 구매 가능
  • 시간 절약
    • 웹 페이지를 만들 때, 코딩에 대한 부담 감소
    • HTML, CSS 코드가 이미 형성 되어 있음
  • 사용하기 간편한 그리드 시스템
    • 태블릿, 스마트폰 등 다양해지는 화면의 사이즈에 맞게 비율에 따라 디자인 가능
  • 모바일 자동 적용(반응형)
    • 다양한 디바이스 크기에 맞게 요소 배치
    • 모바일 우선 지원
    • Desktop용 제작 > mobile용 자동으로 제작

Bootstrap의 단점

  • 기존 set-up과의 충돌
    • 기존에 제작된 코드들과 새로운 코딩들이 충돌, 버그 발생
  • 대용량
    • 부트스트랩 전부를 이용할 경우 126KB의 CSS와 29KB의 자바 스크립트 포함
    • 로딩 시간 길어짐, 모바일 배터리 문제
  • 보편화
    • 자체적으로 디자인한 것에 비해
    • 공장에서 찍어낸 듯한 느낌을 피하기가 어려움
  • 불필요한 class들 발생
    • 도메인 객체 모델이 불필요한 class로 가득 채워 짐
    • 좋은 웹디자인 규칙을 어김

부트스트랩 적용

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<p class="text-left">좌측정렬된 텍스트.</p>
<p class="text-center">중앙정렬된 텍스트.</p>
<p class="text-right">우측정렬된 텍스트.</p>
<p class="text-justify">양쪽정렬된 텍스트.</p>
<p class="text-nowrap">그냥 텍스트.</p>

<!-- 순서없는 -->
<ul>
  <li>...</li>
</ul>

<!-- 순서있는 -->
<ol>
  <li>...</li>
</ol>

<!-- 스타일 없는 -->
<ul class="list-unstyled">
  <li>...</li>
</ul>

<!-- 한줄로 보여주는 -->
<ul class="list-inline">
  <li>...</li>
</ul>

<!-- 기본예제 -->
<table class="table">
  ...
</table>

<!-- 줄무늬 행 -->
<table class="table table-striped">
  ...
</table>

<!-- 맥락적인 클래스들 -->
<!-- `tr`, `td`, `th` 모두 사용 가능 -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

<!-- 반응형 웹 테이블 -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

부트스트랩을 이용한 설문조사 문서

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 합쳐지고 최소화된 최신 CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <title>나의 설문조사</title>
    </head>
    <body>
        <h2>설문조사</h2>
        <form>
            <h3>설문자</h3>
            <div class="form-group">
              <label for="exampleInputEmail1">이메일 주소</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">암호</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
            </div>
            <h3>학년를 선택하시오</h3>
            <div class="radio"><label><input type="radio" name="학년" value="1학년">1학년<br></label></div>
            <div class="radio"><label><input type="radio" name="학년" value="2학년">2학년<br></label></div>
            <div class="radio"><label><input type="radio" name="학년" value="3학년">3학년<br></label></div>
            <div class="radio"><label><input type="radio" name="학년" value="4학년">4학년<br></label></div>
            <h3>HTML부터 웹앱까지를 듣는 이유는?</h3>
            <div class="checkbox"><label><input type="checkbox" name="홈페이지를 만들고 싶어서" value="수강이유">홈페이지를 만들고 싶어서</label></div>
            <div class="checkbox"><label><input type="checkbox" name="실무전산 필수학점을 위해서" value="수강이유">실무전산 필수학점을 위해서</label></div>
            <div class="checkbox"><label><input type="checkbox" name="김근우 교수님과의 교제를 위해서" value="수강이유">김근우 교수님과의 교제를 위해서</label></div>
            <div class="checkbox"><label><input type="checkbox" name="그냥" value="수강이유">그냥</label></div>
            <h3>학기수를 선택하시오</h3>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            <!-- <button type="submit" class="btn btn-default">제출</button> -->
            <input class="btn btn-default" type="submit" value="전송하기"></input>
            <input class="btn btn-danger" type="reset" value="취소하기"></input>            
        </form>
        <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </body>
</html>
0304-bootstrap-intro다운로드

bookmark_borderCSS 고급활용

Posted on

전환 : CSS Transitions

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>
...
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
...

애니메이션 : CSS Animations

<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
...
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
...

그래디언트 : CSS Gradients

<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
...
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):/p>
<div id="grad1"></div>
...

텍스트 그림자 효과 : CSS Shadow Effects

<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
...
<h1>Text-shadow effect!</h1>
...

상자 그림자 효과 : CSS Box Shadow

Text Card Shadow
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
...
<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>
  <div class="container">
    <p>January 1, 2021</p>
  </div>
</div>
...
Image Shadow
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
...
<div class="polaroid">
  <img src="rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>
...

페이징 : CSS Pagination Examples

<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
...
<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&raquo;</a>
</div>
...

툴팁 : CSS Tooltip

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
...
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
...

2D변형 – rotate, scale, translate : CSS 2D Transforms

<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  transform: rotate(20deg);
}
</style>
...
<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
...

<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px,100px);
}
</style>
...
<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>
...

과제 : 0305-css-homework-1.html

bookmark_borderCSS 기초 활용

Posted on

CSS 테두리 : CSS Border Style

<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
</style>
...
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>

높이와 너비 : CSS Height and Width

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

CSS 여백 : CSS Margin

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

CSS 박스모델 : CSS Box Model

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

CSS 아이콘 모델 : CSS Icons

<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>

CSS 오버플로 모델 : CSS Layout – Overflow

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

CSS 가상클래스 :

CSS Links

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

CSS Dropdowns

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>


bookmark_borderCSS 기본

Posted on

CSS Tutorial

CSS Reference

CSS 정의와 구조

  • CSS (Cascading Style Sheets)
  • 스타일 시트의 정의
    – 문서의 외형을 구체적으로 명시하기 위한 문장의 집합
    – 웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용
    – 글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는 부분을 제어
    – 문서의 구조와 스타일의 분리
    – 스타일의 변경과 웹 페이지의 일관성 유지가 용이
  • 스타일 시트 종류
    CSS (Cascading Style Sheet)
    – 스타일 속성, 속성값으로 스타일 제어
    : <style type=“text/css”> (CSS가 표준이므로 <style>만 사용 가능)
    JSSS (JavaScript Style Sheet)
    – Java script로 스타일 정보를 제어
    – {style type=“text/JavaScript”>
  • CSS의 형식



    – 선택자(selector) : 스타일을 지정하고자 하는 HTML 태그, CLASS나 ID 이름
    – 선언(declaration) : 속성(property)과 속성값(property value)으로 구성된 스타일 정보의 리스트
    – 속성과 속성값은 콜론(:)으로 연결
    – 하나의 태그에 여러 가지 속성 지정
    : 선언에 지정하고자 하는 속성들을 세미콜론으로 구분하여 나열
    : H3 { background-color:navy; color:white }
    – 여러 태그에 동일한 속성 지정
    : 선택자에 같은 스타일을 지정하는 경우 태그 이름 콤마로 구분하여 나열
    : H1 H2 { , background-color:navy }
    – 속성의 상속 (Inheritance)
    : 어떠한 태그에 지정된 속성은 그 안에 사용된 태그에도 적용됨
    : 예 : <p>태그의 글자 색: 회색 이면, <p><i> 태그 사용 시, <i>태그에 대해 회색으로 지정할 필요 없음
  • 스타일 정보 삽입 방법
    1. 웹 페이지 <head>태그 내 정의
    <head> <style>
    스타일의 내용
    </style></head>

    2. 인라인(in-line) 스타일 정의 : BODY 부분에 사용된 태그 내에 속성으로 정의
    <p style=”스타일내용”> </p>

    3. 별도의 style sheet 삽입
    <head>
    <link rel=”stylesheet” href=”CSS 파일 주소(URL)”>
    <head>
  • CSS 기초 실습
<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {color:white; background-color:blue}
            h2, h3 {color:white; background-color:green}
            p {color:red; font-size:15}
        </style>
    </head>
    <body>
        <h1>어서오세요! 환영합니다~</h1>
        <h2>거북선의 홈페이지입니다!</h2>
        <h3>이 페이지에는??</h3>
        <p>홈페이지를 <i>소개하는 글을</i> 써봅니다!</p>
        <p><font color="blue">이 홈페이지는 ...</font></p>
    </body>
</html>
03-css-example다운로드