: 여러 사람과의 협업, 작업 내역 기록
exclude에서 **/.git 파일 삭제하면 보임
git clone 깃허브주소
파일에서 한 단계 나갈 때는 cd ../ 해주면 됨
mkdir 파일명 -> make directory, 파일명으로 파일 생성됨
cd 파일명 -> 파일명의 파일로 이동함
git init -> 초기화 -> .git 이라는 숨은 폴더 생성됨 (여기서 내역 관리 생성)
(얼추 이런 느낌)
root directory에 파일 .gitignore 추가
여기에는 올라가서는 안 되는 파일이나 폴더 확장자를 넣는다git 세팅할 때 .gitignore 꼭 같이 세팅해야 한다
git config user.name jaychive -> user.name 뒤에는 깃허브의 아이디로 작성
git config user.email jaychive@email.com -> 이메일은 절대 중복되지 않으니까!!~여기까지 하면 사용자 등록 끝~
git branch -M main
// -M : Master(주인), 이 -M을 main이라고 부르자(C언어에서는 html의 index가 main임)
git remote add origin 깃허브주소
// remote는 원격 서버를 의미, origin 깃허브주소 -> 깃허브주소를 origin으로 부르자
<script>
$(document).ready(function(){
// 화면이 열리면
$("#allMenu").click(function(){
// 버튼을 클릭하면
$(this).toggleClass('show');
// '그' 버튼에 show라는 클래스를 토글(넣뺐) 처리 하라
});
});
</script>
<script src="https://kit.fontawesome.com/b3cd8aa7e6.js" crossorigin="anonymous"></script>
폰트 관련된 것은 무조건 위로!! 빨리 적용되기 위해
광고 js와 폰트 js만 이례적으로 css보다 위에 위치!!
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세팅마무리하기</title>
<script src="https://kit.fontawesome.com/b3cd8aa7e6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./css/layout02.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<header id="hd">
<button id="allMenu">
<label for="allMenu" class="sr-only">전체메뉴</label>
<i class="fa-solid fa-bars"></i>
<!-- 앞쪽에 공통클래스 뒤로 갈수록 디테일 -->
</button>
</header> -->
<script src="./js/common.js"></script>
</body>
</html>
i 태그는 검색이 안 된다 -> 그래서 font 넣어주는 거임
label은 기생하는 태그이므로 기생 태그의 id와 label 안 for의 내용이 맞아떨어져야 함
i 태그는 접근성 무시, 접근성 처리는 label에서 해주는 것화면에서는 안 보이지만 음성에서는 들리도록 처리 -> sr-only 사용
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
margin: -1px;
}
</style>
sr-only
screen reader
존재는 하되, 화면 상에서는 나타나지x -> 웹표준을 위해!!
display: none;해버리면 장애인분들에게는 안 들림
<style>
#allMenu {
outline: 0;
background-color: transparent;
border: none;
position: fixed;
right: 2rem;
top: 2rem;
font-size: 2.5rem;
line-height: 1;
cursor: pointer;
}
</style>
코딩에 font를 넣을 곳이 없으니 가상선택자의 content에 집어넣는다
가상선택자는 존재하지 않으므로 hover가 뒤에 못 들어간다!!button 안에 .fa-bars있으면 #allMenu.fa-bars 해야 하고 i 안에 .fa-bars 있으면 띄어쓰기 필수
<style>
/* hover 시 */
/* #allMenu .fa-bars:hover::before {
content: "\f00d";
} */
/* i 태그 있을 때 */
#allMenu.show i::before {
content: "\f00d";
}
</style>
i 태그 안에 폰트가 들어있기 때문에 (.fa-solid, .fa-bars)
i에 ::before을 집어넣어야 한다
<body>
<header id="hd">
<button id="allMenu" class="fa-solid fa-bars">
<span class="sr-only"></span>
</button>
</header>
<script src="./js/common.js"></script>
</body>
<style>
#allMenu.show::before{
content: "\f00d";
}
</style>
<script src="https://kit.fontawesome.com/b3cd8aa7e6.js" crossorigin="anonymous"></script>
<!-- 폰트 관련된 것은 무조건 위로!! 빨리 적용되기 위해 -->
<!-- 광고 js와 폰트 js만 이례적으로 css보다 위에 위치!! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./css/layout03.css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<header id="hd">
<button id="allMenu" class="fa-solid fa-heart">
<span class="sr-only">메뉴 보기</span>
</button>
<div id="category">
<ul>
<li><a href="#none">모바일용메뉴</a></li>
<li><a href="#none">모바일용메뉴</a></li>
<li><a href="#none">모바일용메뉴</a></li>
<li><a href="#none">모바일용메뉴</a></li>
</ul>
</div>
</header>
<script src="./js/common.js"></script>
</body>
위의 내용에서 추가됨
<style>
#category {
position: fixed;
left: 0; width: 50vw;
top: 0; bottom: 0;
background: rgba(0,0,0,.8);
display: flex;
/* column -> 세로축 기준 */
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.5s;
transform: translateX(-100%);
}
#category a {
text-decoration: none;
color: white;
font-size: 2rem;
line-height: 2;
}
.show + #category {
transform: translateX(0);
}
</style>
#allMenu에 .show 들어갔을 때 #allMenu의 형제(동생)인 #category 선택
+는 인접 형제 선택자니까 형제 태그끼리만 가능하다!
jquery식 그대로 사용하려고 해서 이렇게 나온 것이다+는 특정 위치 바로 밑 다음 하나 밖에 못 잡음
<style>
/* 1 */
.show + #category {
transform: translateX(0);
}
/* 2 */
#allMenu.show + #category {
transform: translateX(0);
}
/* 3 */
#allMenu.show + * {
transform: translateX(0);
}
</style>
col-숫자 화면 가로 기준 100%는 숫자 12 (col-12)
p-5에서 p = padding, 5 = 크기, 크기가 3 = 1rem
.p-3 = padding: 1rem;
.pt = padding-top
.pl = padding-left
<div class="container">
<!-- 화면 너비가 768 이상일 때 옆으로 -->
<ul class="d-md-flex">
<!-- p-1은 항상 존재, sm사이즈 이상일 때는 p-3, md사이즈 이상일 때는 p-5 -->
<li class="col-md-3 text-center p-1 p-sm-3 p-md-5 bg-dark text-white">글자</li>
<!-- 이 경우에는 sm < md이므로 md를 지워야 함 -->
<!-- <li class="col-md-3 text-center p-1 p-sm-5 p-md-5 bg-success">글자</li> -->
<li class="col-md-3 text-center p-1 p-sm-5 bg-success">글자</li>
<li class="col-md-3 text-center p-5 bg-success">글자</li>
<li class="col-md-3 text-center p-5 bg-success">글자</li>
<li class="col-md-3 text-center p-5 bg-success">글자</li>
</ul>
</div>
- Extra small <576px : 가장 작을 때, 기본
- Small ≥576px : sm, 576(540)px 이상
- Medium ≥768px : md, 768(720)px 이상
- Large ≥992px : lg, 992(960)px 이상
- Extra large ≥1200px : xl, 1200(1140)px 이상
fluid는 모든 사이즈에서 유동적인 듯
col에는 padding이 자동으로 들어가 있다...
요소 검사 해서 조금씩 들어가있는 padding과 margin을 없애주는 게 중요하다