2023-10-07, Today I Learned

1. LocalStorage를 이용하면 브라우저 자체에 저장해서 html 페이지간 정보를 전송할 수 있다

//메인페이지에 보이게 하기 위해 저장
            localStorage.setItem('content', content);
            localStorage.setItem('name', name);
            //메인페이지 저장 부분 끝

<script>
         $(document).ready(async function () {
        //방명록 불러와봄
        let contentvalue = localStorage.getItem('content');
        let namevalue = localStorage.getItem('name');
        let temp = `<p>${contentvalue} (${namevalue})</p>`
        
        $('#visit-comment').append(temp);
         });
    </script>

2. js파일을 html 의 <script>에서 분리하려면 

html에서 다음과 같이 연결해주면 된다.

<script src="../IntroTeam/js/visitcomments.js"></script>

3. css파일을 html의 <style>에서 분리하려면

html에 다음과 같이 연결해주면 된다.

<link href="./css/index.css" rel="stylesheet" type="text/css" />

4. flex: direction으로 2단으로 요소들을 쌓을 수 있다

2중으로  flex를 column, row로 지정하고

가로 flex 박스의 안에 flex:1인 요소들을 배치해서 해결했다

.photos {
    
    flex-direction: column;

}
.photorow{
    flex-direction: row;
    display: flex;
}
.photo {

    flex:1;

}

<div class='photos'>
                    <div class='photorow'>
                        <p class = "photo"><br>쉴 때는 침대에 누워서</p>
                        <img class="photo" , src="./image/minsun/book.jpg">
                        <p class = "photo"><br>책상에 앉아서</p>
                        <img class="photo" , src="./image/minsun/desk.jpg">
                    </div>
                    <div class='photorow'>
                        <img class="photo" , src="./image/minsun/cafe.jpg">
                        <p class = "photo">자주 가는 카페</p>
                        <img class="photo" , src="./image/minsun/walk.jpg">
                        <p class = "photo"><br>동네 공원</p>
                    </div>
                </div>