프로그래머 도전기 69일차

by Choyee 2023. 11. 17. 00:20

오늘은

오늘은 개발자의 친구의 조언을 받아

동적 코딩에 대해 연습을 해보고

어제 작성했던 html 에 css를 입혀보았습니다

학원 수업

* Math( )함수

0.0 <= Math.random( ) < 1.0 : 실수형으로 랜덤 숫자 반환
(Math.floor( ) = 소수점 자리 버림)

백틱( ` )
터미널 열기 - ctrl + shift + `

<객체>

window.open( )
document.getElementById( )
document.write( )

배열 = [ ]
let winArray = [1, 2]
let name = ["길동", "대호"]

객체 = { key : value }, 자료형이 없는 변수 사용
let person = {
    name : "홍길동",
    age : 38,
    blood : 'A'
}

자바 - 클래스(필드, 생성자, 메서드) = 자바스크립트 - 생성자 함수
=> 요즘에는 자바스크립트도 클래스라고 하는 추세이다
자바 = Person p1 = new Person( );

생성자 함수
function ClassName(매개변수) {
    this.매개변수 = 매개변수;
}
자바스크립트 = let p1 = new Person( );

function Circle(radius){
    this.radius = radius;
}

자바스크립트 = 스타일, 태그 생성 가능

<노드 (node)>
= element(태그)와 비슷함

createElement("p")
createTextNode("웹표준")
=> <p>웹표준</p>

<윈도우 함수>
window.open() - 문서 열기(공지)
window.close() - 닫기
window.scrollY - 높이(y좌표)
window.scrollX - 너비(x좌표)

<텍스트 애니메이션>
=> window 스크롤

<<제이쿼리(jquery)>>
= 라이브러리
= 자바스크립트 웹에 최적화된 라이브러리

JavaScript 공부

<<JS 응용>>
Truthy & Falsy = 참 같은 값, 거짓 같은 값

자바스크립트에 조건식의 경우
불리언 값을 넣지 않아도
참이나 거짓으로 인식이 되는 속성들이 있다
=> 자바스크립트가 자신만의 특정한 기준으로 참이나 거짓을 판별

빈문자열, undefined, null, 숫자0, NaN = False로 인식 = Falsy
문자열, 빈배열, 빈 객체 리터럴, 숫자값, 문자0, 문자열false, Infinity => True로 인식 = Truthy

<<동적 코딩 연습>>

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>연습</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <ul id="list"></ul>
    </div>
</body>
    <script src="script.js"></script>
</html>

CSS

* {
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

body {
    width: 1000px;
}

li {
    display: inline-block;
    list-style: none;
}

img {
    width: 150px;
    height: 150px;
    margin: 10px;
}

JavaScript

let list = document.getElementById("list");

for(let i = 0; i < 5; i++) {
    let li = document.createElement("li");
    let img = document.createElement("img");
    li.appendChild(img);
    list.appendChild(li);
}

HTML에 직접 li > img 태그를 삽입하지 않아도

JS 코드를 통해 페이지에서 바로 생성된 모습

Pet_Shop 만들기

* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#container {
    width: 1300px;
    height: 100%;
    background-color: #fefeee;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}


/* #top */
#top {
    width: 100%;
    height: 250px;
}

/* .top-top */
.top-top {
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #ddd;
    padding: 0 40px;
    background-color: #000;
}

.mini-shortcut {
    float: left;
}

.ms-list li{
    float: left;
    padding: 5px;
    font-size: 0.8rem;
}

.ms-list li a{
    color: #fff;
}

.top-top-menu {
    float: right;
}

.ttm-list li {
    float: left;
    padding: 5px;
    font-size: 0.8rem;
}

.ttm-list li a{
    color: #fff;
}

/* .top-mid */
.top-mid {
    width: 100%;
    height: 180px;
}

.logo-pic {
    width: 100%;
    height: 180px;
}

/* .top-btm */
.top-btm {
    width: 100%;
    height: 40px;
    background-color: #ffa;
}

.top-btm-menu .tbm-list{
    text-align: center;
}

.tbm-list li {
    display: inline-block;
    padding: 9px 20px;
    height: 40px;
}




/* #mid */

/* .mid-top */
.main-prod-show {
    width: 100%;
}

.main-prod-pic {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    padding: 15px 150px;
    background-color: #fff;
}

.main-pic-button {
    position: absolute;
    bottom: 150px;
    left: 860px;
}

.main-pic-button button{
    display: none;
    width: 15px;
    height: 15px;
    border: 1px solid #999;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/* board */
.board {
    display: block;
    width: 100%;
    height: 300px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.board div {
    width: 30%;
    height: 250px;
    float: left;
    margin: 30px 20px 5px 23px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    background-color: #fff;
}

.board div h3 {
    margin-bottom: 20px;
    text-align: center;
}

.board div li {
    line-height: 2;
    border-bottom: 2px dotted #ddd;
}

.notice-board h3{
    color: #f99;
}

.review-board h3{
    color: #99f;
}

.QnA-board h3{
    color: #9f9;
}



/* .mid-mid */
.mid-mid {
    clear: both;
    padding: 15px;
    background-color: #fff;
}

.prod-board h2 {
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}

.sub-prod-show {
    padding: 20px;
    text-align: center;
}

.sub-prod-show .sub-prod-pic {
    width: 180px;
    height: 180px;
    margin: 20px 30px 60px 30px;
}



/* #bottom */
#bottom {
    width: 80%;
    height: 170px;
    border-top: 1px solid #ccc;
}

#bottom div {
    float: left;
}

#bottom div h3 {
    margin: 10px 0 15px 10px;
}

#bottom div p {
    font-size: 0.8rem;
    line-height: 2;
}

.cst-center {
    padding-right: 230px;
}

.bank-info {
    padding-right: 230px;
}

.btm-icon {
    padding-right: 0;
}

.btm-icon-list li{
    float: left;
    padding : 10px;
    margin: 30px 0px;
}


/* footer */
#footer {
    width: 100%;
    height: 120px;
    clear: both;
    margin-top: 30px;
    background-color: #000;
    color: #fff;
}

.footer-info {
    text-align: center;
    border-top: 2px solid #000;
}

.span-list {
    margin: 20px;
}

.span-list span {
    line-height: 2;
    font-size: 0.8rem;
}

2023. 11. 16 (목)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 71일차 (4)	2023.11.20
프로그래머 도전기 70일차 (0)	2023.11.18
프로그래머 도전기 68일차 (0)	2023.11.15
프로그래머 도전기 67일차 (1)	2023.11.13
프로그래머 도전기 66일차 (2)	2023.11.12