HTML,CSS
개념 이해
HTML은 웹브라우저에 기본적인 문서편집 기능이라 볼수 있다. 다양한 HTML 문법을 이용하여, 브라우저에 문서 작성하듯 기본적인 내용을 만들어 줄수 있다.
CSS란 작성된 HTML을 꾸며주는 기능을 한다.
CSS를 잘 활용하여, 더 멋진 웹페이지를 꾸밀수 있다.
HTML 기본 문법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>박스</div>
<p>글</p>
<ul>
<li>목록1</li>
<li>목록2</li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>제목</h1>
<h2>소제목</h2>
<h3>기타 소제목</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>HTML에서 제공되는 기본적인 태그들로 이루어진 내용이다. 해당 태그들을 조합여, 웹페이지 문서를 작성할수 있다.
CSS 기본 문법
<style>
.css {
color: white;
width: 300px;
height: 200px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding-top: 40px;
}
</style>HTML에 정의된 class 를 이용하여, css 스타일을 꾸밀수 있다. HTML 문서에서는 style 안에서 작성할수 있다.
부트스트랩
CSS를 기본적으로 작성해서 사용할수도 있지만, 이미 만들어진 프레임워크를 이용해도 사용이 가능 하다.
대표적인 CSS 프레임워크로는 부트스트랩이 있다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>부트스트랩 연습하기</title>
</head>
<body>
<h1>제목</h1>
</body>
</html>부트스랩은 기본적으로 여러가지 방법으로 임포트해서 사용하지만 대표적으로 link를 통해 임포트 해서 사용한다.
상단에 부트스트랩 사이트에서 예제를 통해 문서를 복사해서 사용할수 있다.
이것저것 변형해가며 자신의 스타일에 맞게 사용될수 있다.
Java Script
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다.
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다.
기본 예제
<script>
var firstNum = 10; // 소수점을 사용하지 않은 표현
var secondNum = 10.00; // 소수점을 사용한 표현
var thirdNum = 10e6; // 10000000
var fourthNum = 10e-6; // 0.00001
var firstStr = "이것도 문자열입니다."; // 큰따옴표를 사용한 문자열
var secondStr = '이것도 문자열입니다.'; // 작은따옴표를 사용한 문자열
var fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.
// 숫자와 문자열을 더할수도 있습니다.
var num = 10;
var str = "JavaScript";
// HTML 문에서 id result 값을 변환
document.getElementById("result").innerHTML = (num + str); // 10JavaScript
//불리언 참 or 거짓
var firstNum = 10;
var secondNum = 11;
document.getElementById("result").innerHTML = (firstNum == secondNum); // false
// 심볼 (ES6 새롭게 추가된 기능 IE 지원불가)
var sym = Symbol("javascript"); // symbol 타입
var symObj = Object(sym); // object 타입
// 심볼은 변경할수 없는 타입으로 객체에 프로퍼티를 위한 식별자료로 사용할수 있다.
// 피연산자의 타입을 반환하는 피연산자 하나뿐인 연산자
typeof 10; // number 타입
typeof "문자열"; // string 타입
typeof true; // boolean 타입
typeof undefined; // undefined 타입
typeof null; // object 타입
//Null 과 undefinded
var num; // 초기화하지 않았으므로 undefined 값을 반환함.
var str = null; // object 타입의 null 값
typeof secondNum; // 정의되지 않은 변수에 접근하면 undefined 값을 반환함.
null == undefined; // true
null === undefined; // false
//Object(객체)
// 객체의 프로퍼티 참조
var dog = { name: "해피", age: 3 }; // 객체의 생성
document.getElementById("result").innerHTML =
"강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";
</script>자바스크립트 활용
자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일은 다음과 같이 매우 다양합니다.
-
자바스크립트는 HTML의 '내용'을 변경할수 있습니다
-
자바스크립트는 HTML의 '속성'을 변경할수 있습니다.
-
자바스크립트는 HTML의 '스타일'을 변경할수 있습니다.
HTML 요소의 스타일 변경
자바스크립트를 사용하면 HTML 요소의 스타일을 손쉽게 변경할 수 있습니다.
자바스크립트 출력
자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다.
자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다.
-
window.alert() 메소드
-
HTML DOM 요소를 이용한 innerHTML 프로퍼티
-
document.write() 메소드
-
console.log() 메소드
메소드(method)와 프로퍼티(property)에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있습니다.
HTML CSS JS 페이지 만들기
간단한 페이지를 만들어 보았습니다!
<!DOCTYPE html>
<html lang="en">
<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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>김다미 팬명록</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.mypic {
width: 100%;
height: 600px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://t1.daumcdn.net/cfile/tistory/99F080445E38093530');
background-position: center 30%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
}
.mypost > button {
margin-top: 15px;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mypic">
<h1>김다미 팬명록</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
</div>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>드라마 잘 보고 있습니다.</p>
<footer class="blockquote-footer">이민기</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>너무 이뻐요!!</p>
<footer class="blockquote-footer">이승철</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>연기를 너무 잘하시는것 같습니다.</p>
<footer class="blockquote-footer">윤상현</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>HTML CSS 이용해서 만든 페이지 입니다.
동적으로 만들기 위해서 추후 JS도 사용할 예정 입니다.
이로써 1일차 공부를 마치고 개발일지를 마무리 합니다.
지나가는사람
오 인터프리터에 대한 부분도 공부하셨군요 ㅎㅎ