코린이

.slideshow-image {
            border-radius: 3%;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mySlides {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            pointer-events: none;
        }

        .mySlides.show {
            opacity: 1;
            pointer-events: auto;
        }

        .slideshow-container {
            position: relative;
            margin: 150px auto auto auto;
            width: 300px;
            height: 400px;
            overflow: hidden;
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
        }

        .intro {
            color: white;
            overflow: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

<div>
        <div class="slideshow-container">
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 1"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 2"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 3"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 4"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 5"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 6"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 7"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 8"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 9"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 10"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 11"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 12"
                    class="slideshow-image">
            </div>
        </div>
        <br>
        <div style="text-align:center">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="intro" id="intro-text">
            <p id="changing-text">첫번째 자막.</p>
            <br>
            <br>
            <br>
        </div>
    </div>

    <script>
        var slideIndex = 0;
        showSlides();
        changeText();

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.opacity = 0;
                slides[i].style.pointerEvents = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1
            }
            slides[slideIndex - 1].style.opacity = 1;
            slides[slideIndex - 1].style.pointerEvents = "auto";
            setTimeout(showSlides, 2000); // 2초마다 이미지 전환
        }

        function changeText() {
            var changingText = document.getElementById('changing-text');
            var texts = [
                '불꽃놀이 같이 짧은 순간을 촬영하는걸 좋아하고',
                '풍경 사진을 주로 찍습니다.',
                '가끔은 꽃이나 음식사진도 촬영해요, 잘 부탁드립니다 :)',
            ]; // 변경할 텍스트들

            var index = 0; // 텍스트 배열의 인덱스

            setInterval(function () {
                changingText.textContent = texts[index]; // 텍스트 변경

                index++; // 다음 텍스트로 인덱스 증가
                if (index >= texts.length) {
                    index = 0; // 인덱스가 배열 범위를 넘어갈 경우 처음으로 초기화
                }
            }, 6000); // 6초마다 실행
        }
        
    </script>

<!doctype html>
<html lang="en">
<head>
    <title>상세 페이지</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <title></title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
    <style>
        .title {
            text-align: center;
            padding: 20px;
        }
        html,
        body {
            height: 100%;
            margin: 0;
        }
        .container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            /* 이미지 및 설명을 가로로 중앙에 위치시키는 방법 추가 */
        }
        .image {
            max-width: 30%;
            margin-left: 10px;
            /* 좌측 마진을 조정합니다. */
            margin-right: 10px;
            /* 우측 마진을 조정합니다. */
        }
        .image img {
            max-width: 100%;
            height: auto;
        }
        .description {
            max-width: 70%;
            padding-left: 20px;
        }
        .pr1 {
            background-color: green;
        }
        
        .hide {
            display: none;
        }
        .mytext {
            border-color: black;
            background-color: white;
            border-radius: 10px;
            font-size: 20px;
            transition: all 0.4s;
        }
    </style>
    <script>
        $(document).ready(function(){
            setting();
        })
        function setting(){
            let a = $('#name').text();
            console.log(a);
        }
        
        
        function edit_box() {
            popupWindow = window.open("/edit.html", "title", "resizeable");
            popupWindow.resizeTo(430, 1050);
            popupWindow.onresize = (_ => {
                popupWindow.resizeTo(430, 1050);
            })
        }
    </script>
</head>
<body>
    
    <div class="title">
        <a href="/"><img src="https://blog.kakaocdn.net/dn/C9tc8/btsgfqWbd5E/JHJCNdq1kiBtlM7MgxwfT0/img.png" width="120"
                height="150"></a> <a href="/"><img
                src="https://blog.kakaocdn.net/dn/rGKiN/btsf6FOokeB/yn0up2kIAvfC7E0TGkDlxK/img.jpg" width="360"
                height="80"></a>
    </div>
    <div class="container">
        <div class="image">
            <img src="{{myself['photo']}}" class="card-img-top" style="max-width: 300px; height: auto;">
        </div>
        <div class="description">
            <h1 class="mytitle" >이름 : {{ myself['name'] }}</h1>
            <textarea id="name" class="hide">{{ myself['name'] }}</textarea>
            <p class="mytime">MBTI : {{ myself['mbti'] }}</p>
            <p class="mytime">자기 소개: {{myself['introduce']}}</p>
            <p class="mytime">장점 : {{ myself['merits_demerits'] }}</p>
            <p class="mytime">협업 스타일 : {{ myself['style'] }}</p>
            <p class="mytime">blog_url : {{ myself['blog'] }}</p></a>
            <p class="mytime">github_url : {{ myself['github'] }}</p>
            <button class="mytext" type="button" onclick=edit_box()>수정하기</button>
            <button class="mytext" type="button" onclick="location.href='/'">목록</button>
        </div>
        <div></div>
        
    </div>
    
</body>
</html>

<!-- test@example.com으로 이메일 보내기 -->

<a href="mailto:test@example.com">메일 보내기</a>

<!-- 한국의 010-1234-0123으로 전화걸기 -->

<a href="tel:+821012340123">전화 걸기</a>

 URI 프래그먼트(URI Fragment)

페이지의 특정 부분을 가리키는 주소입니다. 원하는 곳에 id 속성을 지정해 두고, 링크 주소로 사용할 때는 맨 끝에 #으로 시작하는 #아이디-이름 을 쓰면 됩니다.

팀 버너스리는 "인터넷 사용 자체가 인권"<a href="#note-1">[1]</a>이라고 말했다. ... <p id="note-1">[1] 서울디지털포럼 2013 기조연설</p>

target 속성

새 창(새 탭)으로 열거나 현재 창 또는 내가 원하는 창으로 열 수 있습니다.

새 창으로 열기 --> 네이버 영화  현재 창 --> 네이버 영화 내가 원하는 창 --> 네이버 영화 내가 원하는 창 --> 다음 영화 내가 원하는 창 --> imbd </a>

 중요 <strong>

중요한 내용을 강조해서 표시할 때 사용하는 태그입니다. 위 첨자, 아래 첨자

약간 작은 크기의 글자를 위나 아래에 붙여서 쓰는 걸 위 첨자, 아래 첨자라고 합니다. 아래 예시에서는 원소의 개수를 나타내는 화학 기호에 아래 첨자를, 제곱 연산을 나타낸 수학 기호에는 위 첨자를 써 주었습니다.

<p> 물의 화학식은 H₂O이고, 3의 제곱(3²)은 9이다. </p> 

<hr> 주제전환 선을 그어준다

<pre>

  body {

background-color: #000000;

color: #ffffff;

}

</pre>

띄어쓰기등을 그대로 표현해준다. 보통 코드를 표현할때 많이 쓴다. 

<code> </code> 짧은 코드 표현

CIL (Command Line Interface)

• ls : list의 약자로 현재 위치의 폴더/파일 목록을 보여준다.
• pwd : print working directory의 약자로 현재 어떤 경로의 디렉토리에 있는지 알려준다
• cd : change directory의 약자로 뒤에 경로를 입력하면 해당 경로로 이동시켜 준다 ex) cd desktop 
• touch : 파일을 생성하는 명령어 ex)touch a.txt
• mkdit : make directory의 약자로 폴더를 생성한다.
• cat : concatenate의 약자로 파일의 내용을 보여준다. ex) cat a.txt
• rm : remove의 약자로 파일을 삭제시킨다. ex) rm a.txt
• rmdir : remove directory의 약자로 '빈' 폴더를 삭제한다.
• rm -r : - 는 옵션 r은 recursive라는 뜻으로 파일을 갖고있는 폴더를 삭제하는 명령어
• cp : copy의 약자로 파일/폴더를 복사한다.
• mv : move의 약자로 파일을 이동시키거나 이름을 변경한다.
• clear : 터미널을 빈창으로 만든다.
• history : 이전에 사용한 명령어 기록을 보여준다.
• man : manual의 약자로 해당 명령어의 사용법을 알려준다 p를 눌러 빠져 나올 수 있다.

<style>
      * {
        font-family: "Gowun Dodum", sans-serif;
      }

      .mytitle {
        width: 100%;
        height: 100px;
        color: #1f4e5f;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        
        margin-top: 30px;
        margin-left: 20px;
        border-bottom: 2px solid #1f4e5f;
      }
      
      .empty-box {
        width: 100%; /* 원하는 가로 크기 */
        height: 200px; /* 원하는 세로 크기 */
        border-bottom: 2px solid #1f4e5f;
        margin: 20px 20px 20px 20px;
      }

      .mypost {
        width: 95%;
        max-width: 500px;
        margin: 20px auto 0px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px gray;
        display: none;
        color: rgb(15, 43, 77);
      }
      
      .mycards {
        margin: 20px auto 0px auto;
        width: 95%;
        max-width:2000px;
      }

      .mybtn > button {

        display: flex;
        width: 100px;
        height: 30px;

        background-color: transparent;
        color: #1f4e5f;

        border-radius: 10px;
        border: 1px solid #1f4e5f;

        margin-left: auto;
      }

      .form-floating {
        margin-top: 20px;
      }

      .mybtns {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        margin-top: 20px;
      }

</style>

<script>

      function open_box() {
        $("#post-box").show();
      }

      function close_box() {
        $("#post-box").hide();
      }

</script>

ss="form-control"
          placeholder="Leave a name here"
        ></textarea>
        <label for="floatingTextarea2">블로그</label>
      </div>
      <div class="mybtns">
        <button onclick="posting()" type="button" class="btn btn-primary">
          등록하기
        </button>
        <button
          onclick="close_box()"
          type="button"
          class="btn btn-outline-primary"
        >
          닫기
        </button>
      </div>
    </div>
    <div class="mycards">
      <div class="row row-cols-1 row-cols-md-5 g-5" id="cards-box">
        <div class="col">
          <div class="card h-100">
            <a href="#" class="btn_open" onClick="javascript:popOpen();">
              <img
                src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA0MTFfNzgg%2FMDAxNjgxMTg3NjQzNDgy.P2Ttr9KcWbmjjVFSARY9hHrqg1vsK2TWUgbrdBczzF4g.GswHWWmT8jMbub11p6OSWgPsHySmk4rumKeMXLQGWL0g.JPEG.seahcorp%2F20230405_182430.jpg&type=sc960_832"
                class="card-img-top"
              />
            </a>
            <div class="card-body">
              <p class="card-text">이름</p>
              <p class="card-text">mbti</p>
              <p class="card-text">설명</p>
              <p class="card-text">장점</p>
              <p class="card-text">협업스타일</p>
              <p class="card-text">블로그주소</p>
            </div>
            <div>
              <button 
                type="button" 
                class="btn btn-outline-secondary"
              >
                자세히
              </button>
              <button 
              type="button" 
              class="btn btn-outline-secondary"
              >
                삭제
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mybtn">
        <button onclick="open_box()">기록하기</button>s
    </div>
  </body>