<복습>
- <img>
필수 속성! src
=> 상대경로
>> 현재를 기준으로 : ./ (생략 가능)
>> 상위를 기준으로 : ../
>> 루트를 기준으로 : ../../../
>> 최상단 : /
=> 절대경로 : 웹페이지 주소
- <a>
필수 속성! href
- <table>
1) 나 표 만들거야 => <table>
2) 몇 줄 만들거야 (열) =><tr>
3) 몇 칸 만들거야 => <th>/ <td>
4) 그안에 내용 넣을거야 => 컨텐츠- <form>
- 필수 속성 2가지 : action, method
- input 태그 ** 선택할 수 있는 input type
=> radio, checkbox(중복O)
>> 필수 속성 2개 : name, value ** 제출 할 수 있는 => input type="submit"
=> 조건 : 위치는 form 태그 안에
CSS로 웹을 꾸며보자!
CSS란?
Cascading Style Sheets
html 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
왜css를 따로 만들었을까?
유지보수 편의성+재사용성
디자인
무엇을?=선택자 | 어떻게?= 선언
font속성
font:글자의 폰트를 정의하는 속성
font-family: 글꼴(나눔고딕,굴림,돋음)
font-size: 글자크기(px,em,rem)
font-weight: 글자두께(bold, 100~900)
font-style: 글자 스타일(ltalic)
전체선택자: *로 표시되며 웹 문서 내 모든 요소 선택 => select*from students
<ex01start.html>
<!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">
<title>Document</title>
<style>
/* <head> 태그 내에 <style>태그를 기입해서 그 안에 css 문법 작성
"디자인 해줄꺼야!"
- 무엇을? '선택자'
- 어떻게? '선언'
선택자{
선언
}
*/
h1{
color:red;
}
h2{
color:orange;
}
p{
font-family: '나눔고딕','맑은고딕';
font-size :20px;
font-weight: 900;
font-style: italic;
}
</style>
</head>
<body>
<h1>h1태그</h1>
<h1>h1태그</h1>
<h2>h2태그</h2>
<p>폰트를 꾸며보자!</p>
</body>
</html><ex02선택자.html>
<!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">
<title>Document</title>
<style>
/* 1.전체 선택자 (*) */
*{
color:green;
}
/* 2.태그선택자 (태그이름) */
li{
color: blue;
}
/* 선택자들을 구분해서 디자인 해주는 경우
=> '특정 요소들만 선택'
=> 클래스/ 아이디
클래스 => 중복 가능
재사용성이 뛰어남
아이디 => 중복 불가능, 한 문서당 같은 아이디 사용x
*/
/* 3.틀래스 선택자 (.클래스이름) */
.food{
color:black;
}
/* 4.아이디 선택자 (# 아이디이름) */
#tuna{
color:red;
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>웹페이지를 꾸며주는 스타일 시트 언어</p>
<ul>
<li>CSS 기본구조</li>
<li>CSS 선택자</li>
<li>CSS 스타일</li>
</ul>
<h1 class="food">이번주에 뭐먹지~</h1>
<ul>
<li class="food">연어</li>
<li class="food" id="tuna">참치</li>
<li class="food">샐러드</li>
</ul>
</body>
</html>
계층선택자: 특정위치의 요소를 계층적 구조로 요소 선택
(1) 자식 선택자( 기준 > 선택)
ul>li{
color : blue;
}
(2) 자손 선택자 (기준 선택)
div li{
color : blue;
}
(3) 근접후행 선택자 (기준+선택)
=> 붙어있는 형제 관계짱구+짱아{ color : blue ; }
li+span{color : blue;'}
(4) 후행 선택자 (기준~선택)
짱구 ~ 흰둥 {}
li ~ li {}
선택자
기호
-전체 *
-태그 태그이름
-클래스 .
-아이디 #
(기준이 되는 선택자 : 기준 / 선택이 될 선택자 : 선택)
-자식 기준>선택
-자손 기준 선택
-후행 기준~선택
-근접후행 기준+선택
반응 선택자: 사용자의 반응으로 생성되는 특정한 상태를 선택
:active 마우스로 클릭할 때 선택
: hover 마우스롤 올린 태그를 선택
디자인
=> 뭘? '선택자'
=> 어떻게? '선언'선택자
<ex 03계층 선택자>
<!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">
<title>Document</title>
<style>
/* 계층선택자 연습하기! */
/* 1. div태그를 기준으로 자손 선택자인 span 태그의 글자를 tomato */
div span{
color:tomato;
}
/* 2. div태그를 기준으로 자손 선택자인 li태그의 글자를 blue */
div li{
color:blue;
}
/* 3. ol태그를 기준으로 자식 선택자인 span 태그의 글자를 red */
ol>span{
color:red;
}
/* 4. li태그를 기준으로 근접 후행 선택자인 li태그의 글자를 green */
li+li{
color:green
}
/* Case1) ID값을 부여해서 기준 선택자를 바꾸는 경우 */
/* #rule~li{
color:hotpink;
} */
/* Case 2): nth-child() */
li:nth-child(2) ~li{
color:hotpink;
}
/* 5. li태그를 기준으로 후행 선택자인 li태그의 글자를 yellowgreen */
li~li{
color:yellowgreen;
}
</style>
</head>
<body>
<div>
<strong>연수생 수칙</strong>
<ol>
<li>지각하지 않기</li>
<li id="rule">결석하지 않기</li>
<span>(불가피할 땐 꼭 담당연구원에게 미리 말하기)</span>
<li>복습하기</li>
</ol>
</div>
</body>
</html><ex04그룹선택자.html>
<!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">
<title>Document</title>
<style>
/* 그룹선택자=>,를 표시 */
h1,p{
color: blue !important;
}
/* 스타일 시트 가중치
전체선택자 0
태그선택자 1
클래스선택자 10
아이디선택자 100
=>무조건 가장 가중치를 높게 만드는 것
:!important
*/
#h1Title{
color: green;
}
/* 반응 선택자 */
#am:active{
color: pink;
}
#pm:hover{
color:lime;
}
</style>
</head>
<body>
<h1 id="h1Title">K강의장 수업</h1>
<p>녹화 꼭 해주세요!</p>
<ul>
<li id="am">오전 : 선영표</li>
<li id="pm">오후 : 강예진</li>
</ul>
</body>
</html>오후 Jacascript
<Ex13배열실습.html>
<!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">
<title>Document</title>
</head>
<body>
<script>
let subNum = Number(prompt("과목 수를 입력해주세요"));
let subName=[];
//subName에 입력한 과목명 추가(반복)
for(var i=1; i<=subNum; i++){
subName.push(prompt("점수를 입력할 과목명을 입력해주세요>>"));
}
let subScore = [];
let sum=0;//총합 저장 변수
//subScore에 입력한 과목점수 추가(반복)
for(var i=1; i<=subNum; i++){
var score= Number(prompt(subName[i-1]+"의 점수 입력>>"))
subScore.push(score);//입력한 값을 배열 추가
sum+=score;//총합
}
let avg= parseInt(sum/subNum);//평균
document.write("<table border='1px solid black'>")
document.write("<tr>")
for(var i=1; i<=subNum;i++){
document.write("<td>"+subName[i-1]+"</td>")
}
document.write("<td>총합</td>")
document.write("<td>평균</td>")
document.write("</tr>")
document.write("<tr>")
for(var i=1; i<=subNum;i++){
document.write("<td>"+subScore[i-1]+"</td>")
}
document.write("<td>"+sum+"</td>")
document.write("<td>"+avg+"</td>")
document.write("</tr>")
document.write("</table>")
</script>
</body>
</html><Ex14심볼>
<!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">
<title>Document</title>
</head>
<body>
<script>
//Symbol 생성
//:유일한 값(수정x, 값 자체가 유일)
// -> 객체(키-값)
//객체의 키값(문자열, 심볼)을 지정할 때 사용
Symbol('a');
console.log(Symbol('b')==Symbol('b'));
</script>
</body>
</html>
함수: 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 필요할 때마다 호출하여 해당 작업을 반복 수행 할 수 있음
자바스크립트 함수 -> 1급 객체(first class citizen)
자바스크립트 함수가 객체로 간주되는 이유?
- 객체를 값을 의미, 자바스크립트의 함수는 값과 동일하게 취급
- 값처럼 변수에 할당할 수 있으며 속성 값이 될 수 있으며 배열의 요소가 될 수도 있음
1급객체의 조건?
- 변수나 데이터 구조 안에 담을 수 있다
- 파라미터로 전달할 수 있다
- 리턴 값으로 사용할 수 있다
함수: 특정 작업을 수행하는 코드 조각
메소드: 객체의 속성 값으로 담겨진 함수를 부르는 명칭
클래스 및 객체와 연관되어 있는 함수
javascript함수 사용 목적
- 코드의 재사용 : 미리 정의된 함수를 필요할 때 마다 여러 번 호출할 수 있음
- 유지보수의 편의성: 코드 중복을 억제하고 재사용성을 높일 수 있음
- 코드의 신뢰성: 중복 코드를 줄여 개발자의 실수를 줄일 수 있음
- 코드의 가독성: 객체 타입의 값의 식별자 로서 함수의 역할 파악에 도움을 줌
<ex01함수선언.html>
<!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">
<title>Document</title>
</head>
<body>
<script>
var num1 = 3;
var num2 = "2"
console.log(addNum(num1,num2));
//일반함수 정의 : 호이스팅 지원 o
function addNum(a,b){
return a+b;
}
//익명 함수 선언 참조 :호이스팅 지원x
var minusNum = function(a,b){
return a-b;
}
//숫자와 문자열 마이너스,곱하기,나누기 연산 -> 문자열을 숫자로 자동 형변환
console.log(minusNum(num1,num2));
</script>
</body>
</html>
<ex02함수실습.html>
<!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">
<title>Document</title>
</head>
<body>
<script>
let emo=prompt("기호를 입력하시오");
let num=Number(prompt("몇 줄 출력할지 입력하시오"));
pyramid(emo, num);
function pyramid(emo,num){
for(let i =1; i<=num; i++){//몇줄
for(let j=1; j<=i ; j++){ //줄 별로 이모지를 출력할 개수
document.write(emo)
}
document.write("<br>")
}
}
</script>
</body>
</html>화살표 함수(arrow function)
ES6 문법으로 익명 함수 선언 참조 방식으로 표현
<EX03화살표함수.HTML>
<!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">
<title>Document</title>
</head>
<body>
<script>
var addNum = (num1,num2) => {
return num1+num2;
}
//매개변수 1개 일 경우에는 ()생략 가능
var print = num=> console.log(num);
print(3);
</script>
</body>
</html>'Full Stack 교육 회고록' 카테고리의 다른 글
| 9/19 css(flex) javascript(j.query) (2) | 2022.09.19 |
|---|---|
| 8/16-css(박스모델, 신호등 표현) javascript(DOM, htmlelement객체) (1) | 2022.09.16 |
| 9/14- html(회원가입화면, 테이블 실습)/ javascript(반복문, 조건문, 배열, 내부 외부 인라인 javascript) (0) | 2022.09.14 |
| 9/13- HTML(기초,태그)-정리완료 / javascript(연사자,자료형,입출력,변수) (1) | 2022.09.13 |
| 8/31 자바 멀티캐스킹, 채팅프로그램 (0) | 2022.08.31 |
