20231005 TIL (id와class차이/ live server활용/ 사진 및 페이지 연결 등)

팀 소개 페이지를 만들며 팀명, 팀소개, 방명록 부분을 맡아서 진행하는데 팀명과 팀소개 부분은 위치 설정을 하는 것만 빼고 순식간에 끝났다. 방명록 부분은 전에 만들었던 스파르타 플릭스를 참고해서 만들었다.

입력창을 만들고 카드만들고 둘이 연결하고 파이어베이스랑 연결해서 데이터 남게 하는데 사실 똑같이 따라하는 거라 그리 오래 걸리지 않았다.

문제는 내가 방명록 창을 처음에 안뜨게 했다가 쓰고 싶은 사람만 버튼을 눌러서 볼수있게 하고 싶었다.

우선

<script>
        $("#savebtn").click(async function () {
            $('#postingbox').toggle();

        })
</script>

"이걸"누르면 "저게" 열렸다 닫혔다를 할 수 있는 기능인 toggle을 넣었는데 내가 원한 건 처음엔 박스가 안떠야하지만 토글로는 열려있는 걸 openclose를 자유롭게 하는 것 뿐이었다 .

그래서 구글에 'html 첫 페이지에 없애는 법' 이런 식으로 검색을 계속 했는데 뭔가 찾을 수 없었다.. 구글링을 어떻게하면 잘할 수 있을까.. 구글링에만 2시간을 쓰고 팀원분에게도 물어봤다가 결국 튜터님을 찾아갔다.

그리고 나에게 돌아온 건 "id와 class의 차이를 아세요?" 웹개발 강의에선 css를 할 땐 얘를 class라고 이름을 지정해주고 js를 할 땐 id로 지정해주어야한다고 해서 "아 class는 css에 쓰이고 id는 js에 쓰이는 구나" 라고 이해 했었다. 그렇게 답을 했고 깔끔하게 틀렸다.

id와class는 둘다 selector인데 차이가 있다. id는 오직 한 div만을 위한 selector이고 class는 공통된 특성을 가진 div를 모두 select하는 selector다 . 그래서 css를 할 때 동일한 디자인을 가지면 한div로 정리할 수 있기 때문에 class를 css에 더 많이 쓰는 건가 생각하게 되었다.

그리고 마침내 첫화면에 뜨지 않게 하는 방법을 알아냈는데 display : none 이었다. 머릿속에 한 번 경험했던 것 같은 느낌이 계속 들었는데 웹개발 종합반에서 한번 했던 것 같다. 그때 개발일지를 잘 썼더라면 이런일은 없었을텐데..

<live server 활용>

웹개발을 처음 들을 때 vs코드에 live server를 다운 받으래서 받았지만 무슨 기능인지는 모르고 있었는데 튜터님이 알려주셔서 참기능을 알았다. vs cord를 보면 오른 쪽 하단에 go live라는 버튼이 있는데 그거러 누르면 실제 사이트로 했을 때의 상태가 보인다.

그랬더니 사진들이 다 날라가버렸다. 그 이유는 내가 이미지를 그냥 따오기만 했는데 저장되어있어야 하는 것이여서다. 같은 폴더에 저장 후에 /사진이름.jpg 이런식으로 하면 된다.

난 이미지는 무조건 링크로 넣어야하는 줄 알았는데.. 본캠프에 참여하고 나니 내 웹개발 강의 들은 기간 전체를 부정당하는 기분이다._.

<이미지 밑 사이트 연결>

우리는 팀소개 페이지로 메인페이지, 개인 소개 페이지를 만들어야 했는데 메인페이지에서 개인 소개 페이지로 넘어가는 하이퍼링크기능이 필요했다.

대강 버튼에 하이퍼링크를 달면 되겠구나 했는데 근본적으로 다르달까..

우리는 부트스트랩을 통해 버튼을 만들어서 거기에 기능을 넣으려고 했는데 간단하게 연결하는 법은 부트스트랩으로 가져오면 class를 제외하나 부분을 바꿔준다.

<a href ="/파일경로/파일이름.html">글자</a>

이런 식으로 a태그를 이용해 주면된다.
""안에 들어가는 건 현재 파일에서 연결하는 파일을 가는 경로 작성하는데 같은 폴더에 있다면 "/파일이름.html"만 하면된다.

<의문>
margin을 사용할 땐 크기가 설정되어 있을때만 가능한 것인가?