국비 8일차

JAY·2022년 10월 4일
0

국비 공부

목록 보기
8/86

git

: 여러 사람과의 협업, 작업 내역 기록


vscode에서 git 숨긴 폴더 해제하기

exclude에서 **/.git 파일 삭제하면 보임


(CLI 환경) 터미널에서 불러올 때

git clone 깃허브주소

파일에서 한 단계 나갈 때는 cd ../ 해주면 됨
mkdir 파일명 -> make directory, 파일명으로 파일 생성됨
cd 파일명 -> 파일명의 파일로 이동함



시작!

사용자 등록

git init -> 초기화 -> .git 이라는 숨은 폴더 생성됨 (여기서 내역 관리 생성)


초기화 후 바로! ☆.gitignore 파일★ 세팅


(얼추 이런 느낌)

root directory에 파일 .gitignore 추가
여기에는 올라가서는 안 되는 파일이나 폴더 확장자를 넣는다

git 세팅할 때 .gitignore 꼭 같이 세팅해야 한다


git config user.name jaychive -> user.name 뒤에는 깃허브의 아이디로 작성
git config user.email jaychive@email.com -> 이메일은 절대 중복되지 않으니까!!

~여기까지 하면 사용자 등록 끝~


브런치 설정 (branch -> 협업, 팀장과 서포터가 존재)

git branch -M main
// -M : Master(주인), 이 -M을 main이라고 부르자(C언어에서는 html의 index가 main임)


깃허브 연결

git remote add origin 깃허브주소
// remote는 원격 서버를 의미, origin 깃허브주소 -> 깃허브주소를 origin으로 부르자




햄버거 버튼 (font awesome 사용)


공통 js (jQuery)

<script>
$(document).ready(function(){
  // 화면이 열리면
  $("#allMenu").click(function(){
    // 버튼을 클릭하면
    $(this).toggleClass('show');
    // '그' 버튼에 show라는 클래스를 토글(넣뺐) 처리 하라
  });
});
</script>

button, label, i 사용


<script src="https://kit.fontawesome.com/b3cd8aa7e6.js" crossorigin="anonymous"></script>

폰트 관련된 것은 무조건 위로!! 빨리 적용되기 위해
광고 js와 폰트 js만 이례적으로 css보다 위에 위치!!

html

<!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 사용


css

<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을 집어넣어야 한다



button, span 사용


html

<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>

css

<style>
#allMenu.show::before{
  content: "\f00d";
}
</style>

햄버거 버튼 + 네비게이션 메뉴


html

    <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>

css

위의 내용에서 추가됨

<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>

Bootstrap 기초

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이 자동으로 들어가 있다...
요소 검사 해서 조금씩 들어가있는 paddingmargin을 없애주는 게 중요하다

0개의 댓글