<!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>
전체 글
- 20230518 사진 슬라이드 기능 및 자막넣기 2023.05.18
- 20230517 html 태그들 iframe 오류 2023.05.17
- 20230516 터미널 명령어 정리 CIL 2023.05.16 2
- 230515 미니프로젝트 (팀소개페이지) 첫날 HTML 뼈대 만들기 2023.05.15
20230518 사진 슬라이드 기능 및 자막넣기
20230517 html 태그들 iframe 오류
<!-- 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> 짧은 코드 표현
20230516 터미널 명령어 정리 CIL
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를 눌러 빠져 나올 수 있다.
230515 미니프로젝트 (팀소개페이지) 첫날 HTML 뼈대 만들기
<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 |