프로그래머 도전기 55일차

by Choyee 2023. 10. 26. 00:09

오늘은

평소와 다름없는 일상을 보내었습니다~

학원 수업

학원에서도 요즘에는 HTML과 CSS를 배우고있습니다

* 목록관련 태그 추가
사전처럼 목록 - <dl> = discription list
<dl>
<dt></dt>
<dd></dd>
</dl>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>dl 태그</title>
</head>
<body>
    <h2>웹 표준 기술</h2>
    <!-- dt = discription list, dt = discription title, dd = discription definition -->
    <dl>
        <dt>HTML</dt>
        <dd>하이퍼텍스트를 마크업 하는 언어이다</dd>
        <dt>CSS</dt>
        <dd>웹 문서의 디자인 요소를 담당하는 기능을 가진 웹 표준기술이다</dd>
        <dt>JavaScript</dt>
        <dd>객체 기반의 스크립트 언어로써 웹의 동작을 구현할 수 있다</dd>
    </dl>
    
</body>
</html>

엑셀 (Spread Sheets)
CSS (Cascading Style Sheets)
- 텍스트 색상, 글꼴, 줄간격, 이미지의 위치, 문서 레이아웃
1. 내부스타일 - <style></style> : head안에 위치 - 필수 .html
2. 외부스타일 - .css파일 - <link rel="">
3. 인라인스타일 = 해당 태그에 직접 스타일을 지정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text 스타일 예제</title>
    <!-- 내부 스타일 = <style> 태그 사용 -->
    <style>
        /* 글자색 - color, 글꼴 - font-famaily, 줄간격 - line-height
           굵기 - font-weight:bold, 기울기 - font-style:italic */
        h1 {color: #0000ff;}
        h2 {
            color: RGB(0,255,0);
            font-family: "궁서체";
        }
        p {
            line-height: 1.5;
            font-size: 18px;
        }
        span {
            color: #f00;
            font-weight:bold;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>세계 10대 슈퍼푸드</h1>
    <h2>마늘(Garlic)</h2>
    <p>일해백리(一害百利)는 마늘의 별명이다. 
        한가지 해가 있고 백가지 이로움이 있다는 뜻이다
        <br> 그 한가지 해란 아린 맛으로 위에 부담을 준다는 것이다
    </p>
    <p style="color:lightgray; font-weight:bold;">마늘 특유의 아린 맛은 <span>알리신</span>이라는 성분 때문으로 살균 및 항균작용을 하며
        <br>마늘에 들어있는 아연이 피로 회복에 도움을 준다
    </p>


</body>
</html>

- 색상을 지정하는 방법
1. 기본색상(16가지 ~ 216가지) : white, blue, red....
2. 16진수 사용하는 방법 : #00ff00 : RGB(혼합)
    00 - 각 색상이 섞이지 않음
    ff - 각 색상이 가득 섞였을 때
3. RGB함수 : (0, 255, 0)
   rgba = (0, 255, 0, 1) => 투명도까지 설정 가능

h1 {
    color: blue;
}

h2 {
    color: rgb(0,255,0);
    font-family: "궁서체";
}

span {
    color: #f00;
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
}

p {
    font-family: "고딕체";
    line-height: 2;
}

a {
    font-size: 20px;
    text-decoration: none;
    color: #000000;
}

<span> 태그
- 특정 위치를 선택해서 (style을 줄 때) 사용하는 태그
어떤 행(줄) 영역에서 사용
<div> 태그

* 멀티미디어
<audio>, <video>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>비디오 태그</title>
</head>
<body>
    <video src="./medias/salad.mp4" controls width="70%"></video>
    <video src="./medias/salad.mp4" autoplay muted width="70%" loop></video>
    <!-- 소리없이 반복 재생 autoplay, muted, loop -->
    <!-- 영상 재생이 되지 않을 때 - poster 속성사용 -->
    <video src="./medias/salaad.mp4" autoplay mute width="70%" poster="./medias/images/salad.PNG"></video>

</body>
</html>

할일 목록 만들기

오늘은 할일 목록 항목의 삭제 기능과

완료했을 때의 체크표시 기능을 구현하였습니다

const updateElem = document.createElement('button');
updateElem.classList.add('update');
updateElem.addEventListener('click', (event) => updateInput(event, todo.id));
updateElem.innerHTML = '✏️';

const delElem = document.createElement('button');
delElem.classList.add('del');
delElem.addEventListener('click', () => delTodo(todo.id));
delElem.innerHTML = '❌';

itemElem.appendChild(delElem);

const doneTodo = (todoId) => {
    const newTodo = getAllTodo().map(todo => todo.id === todoId ? 
    				{...todo, isChecked:!todo.isChecked} : todo);
    setTodo(newTodo);
    setCountItems();
    fillTodo();
}

if(todo.isChecked) {
    itemElem.classList.add('checked');
    checkElem.innerText = '✔️';
}

itemElem.appendChild(checkElem);

.item.checked .check{
    border: 2px;
    border-style: solid;
    border-color: darkgray;
    color: green;
}

.item.checked .todo{
 font-style: italic;
 text-decoration: line-through;
 color: lightgray;
}

2023. 10. 25 (수)

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

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

프로그래머 도전기 57일차 (1)	2023.10.28
프로그래머 도전기 56일차 (1)	2023.10.26
프로그래머 도전기 54일차 (2)	2023.10.24
프로그래머 도전기 53일차 (4)	2023.10.23
프로그래머 도전기 52일차 (0)	2023.10.22