프로그래머 도전기 56일차

프로그래머가 될거야!

by Choyee 2023. 10. 26. 23:59

오늘은

할일 목록 만들기를 하루라도 빨리 끝내고 싶은데

간단하게 생각했던 기능이 오히려 제일 어려운것같습니다

집중을 해서 이렇게 저렇게 해보는데도 잘 안되네요

잠시 내려놓고 색다른 방법을 찾아봐야겠습니다

학원 수업

집계함수 : sum(), count(), avg(), max(), min()
그룹함수 : group by rollup(), cube(), grouping sets()
윈도우함수 - .순위함수 : rank() over(정렬)
                 .행순서함수 : lead(), lag()
                 .등급분류 : ntile() = 주어진 수만큼 행들을 n등분한 후
                                           현재 행에 해당하는 등급을 구하는 함수

CSS
텍스트, 목록 스타일
1. 내부 스타일 - <style>
2. 외부 스타일 - .css -> <link>
3. 인라인 스타일

문단(왼쪽, 오른쪽, 가운데)
수평정렬 = text-aligan: left. rigth, center
수직정렬 = vertical-align: top, bottom, middle

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테이블 - 수직 정렬</title>
    <style>
        table {
            border: 1px solid #ccc;
        }
        td {
            border: 1px solid #ccc;
            width: 150px;
            height: 100px;
            text-align: center;
        }
        /* 셀의 수직 정렬 */
        .va1{
            vertical-align: top;
        }
        .va2 {
            vertical-align: middle;
        }
        .va3 {
            vertical-align: bottom;
        }
        /* 선태가 id는 #을 붙여 호출 */
        #cap_top{
            /* 바깥 여백(아래쪽) */
            margin-bottom: 10px;
            /* 캡션 위치(위쪽) */
            caption-side: top;
        }
        #cap_bottom {
            /* 바깥 여백(위쪽) */
            margin-top: 10px;
            /* 캡션 위치(아래쪽) */
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <!-- 캡션<caption> : 표의 설명 -->
    <table>
        <!-- 선택자 id = 유일한 것을 선택할 때 사용 -->
        <caption id="cap_top">수직 정렬 (vertical-align)</caption>
        <tr>
            <td class="va1">alinement</td>
            <td class="va2">alinement</td>
            <td class="va3">alinement</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <td class="va1">alinement</td>
            <td class="va2">alinement</td>
            <td class="va3">alinement</td>
        </tr>
        <caption id="cap_bottom">수직 정렬 (vertical-align)</caption>

    </table>
</body>
</html>

표 태그 - <table>
<table>
    <tr>
       <td></td> = 열
    </tr> = 행
</table>

도형, 객체의 속성
사각형, 테이블, 원
박스(Box Model)
- width(너비), height(높이)
- margin(바깥여백), padding(안쪽여백)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>너비와 높이</title>
    
    <style>
        /* 브라우저에는 기본 margin이 8px이 적용되어 있다(top, right, bottom, left) */
        body {
            margin: 0;
        }

        .box1{
            width: 150px;
            background-color: orange;
            margin-bottom: 10px;
            font-size: 32px;
            text-align: center;
        }

        .box2{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">BOX1</div>
    <div class="box2">BOX2</div>
</body>
</html>

<div>태그
개체나 섹션(영역)을 구분하는 태그, css 스타일 적용을 위해 필요

선택자
1. 태그 선택자
2. class 선택자(여럿) - 접두어(prefix)로 점(.)으로 시작
3. id 선택자(유일) - 접두어(prefix)로 샾(#)으로 시작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rgba 사용</title>
    <style>
        body {
            background-color: black;  /* 배경색 */
            color: white;  /* 글자색 */
        }

        /* rgba(red, green, blue, 알파값) a = 1 => 불투명, a = 0 => 투명 */
        #text1 {
            color: rgba(255, 255, 255, 1);
        }

        #text2 {
            color: rgba(255, 255, 255, 0.7);
        }

        #text3 {
            color: rgba(255, 255, 255, 0.5);
        }

        #text4 {
            color: rgba(255, 255, 255, 0.3);
        }

    </style>
</head>
<body>
    <h1 id="text1">html5+CSS3</h1>
    <h1 id="text2">html5+CSS3</h1>
    <h1 id="text3">html5+CSS3</h1>
    <h1 id="text4">html5+CSS3</h1>
</body>
</html>

할일 목록 만들기

수정 기능을 넣는 시도를 하는 중인데

생각보다 부가적인 부분에서 디테일하게 기능 구현이 되질 않아

많이 답답해졌습니다

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

✏️ 모양의 버튼을 눌러 수정 가능 텍스트를 쓸 수 있는 input 이벤트 발생

const updateInput = (e, todoId) => {
    const todoElem = e.target.parentNode.querySelector('.todo');
    const inputText = todoElem.innerText;
    const inputElem = document.createElement('input');
    inputElem.value = inputText;
    inputElem.classList.add('update_input');

    inputElem.addEventListener('keypress', (e)=>{
        if(e.key === 'Enter') {
            updateTodo(e.target.value, todoId);
        }
    })

    todoElem.replaceWith(inputElem);
}

텍스트를 입력하고 Enter키를 눌렀을 때 updateTodo 함수 실행

const updateTodo = (newText, todoId) => {
    const newTodo = getAllTodo().map(todo => todo.id === todoId ? { ...todo, content: newText } : todo);
    setTodo(newTodo);
    setCountItems();
    fillTodo();
}

기존의 항목에 있던 text 내용을 새로 입력된 text로 교체 수정

2023. 10. 26 (목)

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

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

프로그래머 도전기 58일차 (0)	2023.10.29
프로그래머 도전기 57일차 (1)	2023.10.28
프로그래머 도전기 55일차 (2)	2023.10.26
프로그래머 도전기 54일차 (2)	2023.10.24
프로그래머 도전기 53일차 (4)	2023.10.23