TIL

 

 

4.17

3일차 개발일기

 

오늘 추가한 코드

-상세보기 틀안에 팀원 소개 이미지 넣기

-블로그 버튼 위치 수정

-페이지 리스트 아이콘 추가

-블로그 이동 아이콘 추가

-방명록 삭제 만들기

(새로고침해도 삭제 된게 유지가 안됨)

 

 <div id="list-example" class="list-group">

                    <a class="list-group-item list-group-item-action list-group-item-warning" href="#teamname_id"

                        style="color: black">팀 소개</a>

                    <a class="list-group-item list-group-item-action list-group-item-warning" href="#mycards_id"

                        style="color: black">개인 프로필</a>

                    <a class="list-group-item list-group-item-action list-group-item-warning" href="#namebox"

                        style="color: black">오늘의 TMI</a>

                </div>

페이지 리스트 작성코드

<div class="blog" role="group" aria-label="Vertical button group">

                        <button onclick="window.open('https://blog.naver.com/gil_h')" type="button"

                            class="list-group-item list-group-item-action list-group-item-warning" style="color: black">

                            길현님 블로그 구경하기

                        </button>

                        <button onclick="window.open('https://psy8937.tistory.com')" type="button"

                            class="list-group-item list-group-item-action list-group-item-warning" style="color: black">

                            승엽님 블로그 구경하기

                        </button>

                        <button onclick="window.open('https://blog.naver.com/budubu_')" type="button"

                            class="list-group-item list-group-item-action list-group-item-warning" style="color: black">

                            규민님 블로그 구경하기

                        </button>

                        <button onclick="window.open('https://benefrihw.tistory.com')" type="button"

                            class="list-group-item list-group-item-action list-group-item-warning" style="color: black">

                            현우님 블로그 구경하기

                        </button>

                        <button onclick="window.open('https://blog.naver.com/kcart2')" type="button"

                            class="list-group-item list-group-item-action list-group-item-warning" style="color: black">

                            남웅님 블로그 구경하기

                        </button>

                    </div>

 

블로그 버튼 클릭시 해당 블로그 페이지 열리게 하는 코드

 

.myprofilbox_1 {

            width: 1080px;

            height: 606px;

            align-content: center;

            margin: 100px auto 0px auto;

            border-radius: 10px;

            border-style: solid;

            border-color: green;

            background-image: url(https://github.com/leegilhyeon/miniproject/blob/main/%EC%9D%B4%EA%B8%B8%ED%98%84%20%EC%83%81%EC%84%B8%EC%86%8C%EA%B0%9C.png?raw=true);

        }

 

각 카드 별 상세보기 버튼 누를시에 myprofilbox 가 뜨는데 (_1,_2,_3,_4,_5 로 구분되어 있음)

box크기를 width와 height로 설정해주고 크기가 같은 소개 이미지로 채워줬음 (각각 숫자1만 다르고 동일)

 

*방명록 삭제시 글이 사라지고 새로고침해도 유지되게 하고 싶은데 아직 구현하지 못함. 

 내일은 오전에 삭제 구현하고 전체적인 스타일 다듬어서 완성할 계획.

 오후엔 발표대본 짜고 녹화까지! 파이팅!