Skip to content

[강동우] sprint3 #136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
withyj-codeit merged 1 commit into from
Nov 13, 2024
Merged

[강동우] sprint3 #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 12 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,31 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 브라우저 탭에 표시하고 싶은 제목을 적어주세요. -->
<title>판다마켓</title>
<!--
웹사이트를 식별하기 위해 브라우저에 표시하는 작은 아이콘을 '파비콘(Favicon)'이라고 합니다.
일반적으로 16x16px의 .ico 확장자로 되어 있고, 온라인에서 favicon generator를 찾아 사용하면 편리하게 이미지를 파비콘으로 전환할 수 있습니다.
-->
<link rel="icon" href="images/logo/favicon.ico" />

<!-- 외부 폰트 Pretendard의 스타일시트를 링크해 주세요. -->
<link
rel="stylesheet"
as="style"
crossorigin
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
/>

<!-- 스타일시트를 링크해 주세요. styles라는 폴더를 만들어 웹사이트 전역에서 공통으로 사용되는 global 스타일링과 각 페이지 별로 특정적인 스타일링을 위한 파일을 나눠 작성하면 가독성을 개선할 수 있어요. -->
<link rel="stylesheet" href="styles/global.css" />
<link rel="stylesheet" href="styles/home.css" />
</head>
<!DOCTYPE html>
<html lang="en">
Copy link
Contributor

@withyj-codeit withyj-codeit Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lang은 언어 설정인데, ko가 맞을거에요.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<body>
<!--
<header>는 일반적으로 로고, 내비게이션 메뉴, 검색창 등의 요소로 구성됩니다.
내비게이션 메뉴 버튼이 여러 개라면 <nav> 시맨틱 태그로 감싸주어 레이아웃을 명확하게 해주면 좋습니다.

-->

<header>
<!--
- 로고 클릭 시 홈페이지로 이동. index.html로 이동할 때는 href='/'를 사용하면 됩니다.
- <button>과 <a> 태그 두 가지 모두 사용 가능하지만, 단순한 페이지 간 또는 페이지 내에서의 이동에는 <a> 태그를 사용하고, 클릭 시 특정 이벤트가 발생하는 경우에는 <button> 태그를 사용하는 것이 권장됩니다.
(<button>을 사용했다면 커서 유형을 pointer로 바꿔주는 것을 잊지 마세요!)
-->
<!--
- 이미지 또한 images 폴더를 만들어 카테고리별로 정리해 주면 좋습니다.
- 이미지 최적화: 각 이미지의 특징에 따라 알맞은 형식으로 저장하는 것도 웹사이트의 효율에 영향을 미칩니다.
(1) 벡터 기반의 SVG 파일로 저장하면 확대해도 이미지가 깨지지 않는다는 장점이 있습니다. 로고, 아이콘 등 단순한 그래픽의 경우에는 용량이 매우 작지만, 복잡한 그래픽의 경우 용량이 PNG보다 훨씬 커지는 경우가 있으니 주의하세요.
(2) JPG/JPEG는 PNG보다 압축률이 높지만 품질 저하가 발생할 수 있습니다. 복잡한 이미지에 적합하며, 배경 이미지 등에 많이 사용됩니다.
(3) 투명한 배경이 필요할 때는 PNG를 많이 사용합니다. 품질 저하 없이 저장이 가능하지만, 용량이 큰 경우가 많아 https://tinypng.com/ 같은 사이트를 이용해 이미지 압축을 한 번 하고 프로젝트에 추가하는 것이 권장됩니다.
- 사용자가 화면을 확대하거나 고해상도 화면을 사용할 가능성을 대비해 이미지를 실제 필요한 크기보다 2배수 또는 3배수로 저장하는 경우가 많습니다.
- 이미지 삽입할 때 잊지 말고 alt 속성에 이미지를 묘사하는 대체 텍스트를 넣어주세요!
-->
<div class="Tabletsize">
<a href="/"
><img
src="images/logo/panda-market-logo.png"
alt="판다마켓 홈"
width="153"
/></a>
</div>
<!--
id 이름은 camelCase(단어 연결 시 맨 처음 단어를 제외한 단어들의 첫 글자를 대문자로 표기)로,
class 이름은 kebab-case(단어를 하이픈(-)으로 구분)를 사용하는 것을 권장합니다.
하지만 팀마다 선호하는 스타일이 다르기 때문에 naming convention 등 정해진 규칙에 따라 통일성 있게 사용하는 것이 더 중요합니다.
-->
<!-- 클릭 시 로그인 페이지로 이동. login.html 파일을 생성해 임시 페이지를 만들어 주세요. -->
<div class="Tabletsize">
<a href="login.html" id="loginLinkButton" class="button">로그인</a>
</header>

</div>
<!--
웹페이지의 주요 콘텐츠는 <main> 시맨틱 태그에 넣어주세요.
페이지 내용을 기능 및 특징에 따라 <section>으로 나누어 직관적으로 레이아웃을 살펴볼 수 있도록 구성해 보세요.
Expand Down
46 changes: 23 additions & 23 deletions login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@



.container{

display: flex;
Expand Down Expand Up @@ -163,29 +161,31 @@ margin-top: 10px;
}


/** .login-text2{

@media (max-width:1200px) {
body .Pc-size{
display: flex;
justify-content: center;
align-items: center;
};




position: relative;
background-color: #e6f2ff;
margin-right: 700px;
margin-top: 400px;
margin-bottom: 300px;
width: 640px;
height: 49px;

@media (min-width:768px) and (max-width:1199px) {
.Tablet-size{
margin-left:24px;
}
/** .submit_button3, .submit_button5 {
display: flex;
justify-content: center;
align-items: center;
width: 30px; /* 버튼 컨테이너의 너비 */
/** height: 30px;
/** margin-right: 10px;/* 버튼 컨테이너의 높이 */
/** .submit_button3 img, .submit_button5 img
{ width: 30px; /* 이미지의 너비 */
/** margin-right: 100px;
/** height: 30px;}
};




@media (min-width:375px) and (max-width:767px) {
.Moblet-size{
margin-left:24px;
}
};



};
Loading