<!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<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 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>

 

 

저작자표시 비영리 변경금지

'코린이의 TIL' 카테고리의 다른 글

HTTP 오류코드  (0) 2023.06.22
20230601 fatal: invalid refspec 오류  (0) 2023.06.02
Exception in thread "main" java.util.InputMismatchException 입력값과 형식의 불일치  (0) 2023.05.29
20230529 File is read only 파일 수정 불가 해제  (0) 2023.05.29
20230523 Cannot resolve symbol 오류 해결방법  (0) 2023.05.23

+ Recent posts

티스토리툴바