TIL

2024년 8월 5일 TIL(게임 서버 개발 본 캠프 시작)

kagan-draca 2024. 8. 5. 21:04

오늘은 게임 서버 개발 본 캠프 시작일이다.

그래서 아침에 앞으로의 일정을 설명 들었고

튜터님들, 팀원분들과 많은 이야기를 나눴다.

 

10시 30분 ~ 6시 까지 

1주차 조별 과제인 "팀 소개 페이지"의

와이어프레임과 ERD DIAGRAME을 간략하게 설계해봤다.

 

팀원 분이 와이어 프레임을 제작할 수 있는 도구인 "Figma"를 다루실 줄 알아서

사용하는 모습을 보고 따라하면서 사용법을 익혔다.

 

(간단한 기획이었지만 많은 시간을 소비하게 될 줄은 몰랐습니다...)

 

이후, 기존까지 미뤄뒀던... HTML + CSS + JavaScript 2주차 동영상을 모두 학습했다.

 

https://kagan-draca.tistory.com/84

 

2주차 강의 (Web 개발 강의)

오늘은 부트 스트랩을 이용해서 넷플릭스의 킹덤 페이지를 유사하게 따라 만들어 봤다.  전체 소스 코드 :  DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-w

kagan-draca.tistory.com

 

 

JavaScript를 이용해 HTML에서 메시지 박스를 띄워보고,

<head>

    <script>
        function hey()
        {
            alert("안녕하세요")
        }
    </script>

</head>

 

<body>

                <button type="button" class="btn btn-outline-light" onclick=hey()>영화 기록하기</button>

</body>

 

JQuery를 사용해 Text도 변경해보고,

($('#사용할 id').text('변경내용'))

 

(중요)HTML의 테그를 조작해봤다.

 

방법으로는,

 

let temp_html = `(1번 옆 키)<사용할 테그> 내용 </사용할 테그>`(1번 옆 키)로

$('#사용할 id').append(temp_html);

 

로 내용을 추가할 수 있었고,

 

 

`<사용할 테그> ${ 변경되는 변수 } </사용할테그>'

로 변경되는 변수도 HTML로 출력할 수 있었다.

<script>
    function checkResult()
    {
        $('#q1').empty();
       
        let fruits = ['사과','배','감','귤','수박']
        for(let index in fruits)
        {
            let temp_html = `<p>${fruits[index]}</P>`;
            $('#q1').append(temp_html);
        };


        $('#q2').empty();
        let people =
        [
            {'name':'서영','age':24},
            {'name':'현아','age':30},
            {'name':'영환','age':12},
            {'name':'서연','age':15},
            {'name':'지용','age':18},
            {'name':'예지','age':36}
        ];
        people.forEach(dict=>
        {
            let name = dict['name'];
            let age = dict['age'];
            let temp_html = `<p>${name}는 ${age}입니다</P>`;
            $('#q2').append(temp_html);
        })
    }
</script>

 

 

내일은 꼭 자습 시간에 3주차 동영상을 다 봐서

조원들에게 도움이 될 수 있는 사람이 되고 싶다!!

'TIL' 카테고리의 다른 글

2024 8월 7일 TIL  (0) 2024.08.07
2024년 8월 6일 TIL  (0) 2024.08.06
2024년 8월 2일 TIL  (0) 2024.08.02
2024년 8월 1일 TIL  (0) 2024.08.01
2024년 7월 31일 TIL  (0) 2024.07.31

'TIL'의 다른글

  • 현재글2024년 8월 5일 TIL(게임 서버 개발 본 캠프 시작)

관련글

티스토리툴바