VScode 에 필요한 Extention
(스타 확장팩 브루드워 같은 느낌임)
-
Korean Language Pack for Visual Studio Code : 한국어 패치!
-
Material Icon Theme : 폴더, 파일 아이콘을 보기 좋게
-
jQuery Code Snippets : jq 입력 이후 코드 자동완성
-
Highlight Matching Tag : 태그 매치 기능
-
open in browser : HTML 파일을 브라우저에서 열어보기 (주의: 퍼블리셔가 TechER입니다!)
-
Bracket Pair Colorizer : 중괄호({, }) 짝 색깔 맞춰주기
HTML의 기초
- HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.
- 코드는 에디터에 입력시 정렬을 잘 해줘야 다른 사람이 봐도 코드의 생김새를 파악하기 좋다. VScode 에서는 shift + alt(맥은 option) + f 를 눌러 자동정렬 시킨다. (Prettier 를 설치하면 자동으로 정렬이 되는데 충돌을 일으키는 거 같기도 함..)
CSS 기초
- 선택자(selector)의 개념: class, id 값으로 태그를 가리켜서 꾸미기
선택자 이름은 자유롭게 지을 수 있지만 이후에 관리를 하기 위해 어떤 역할을 하기 위한 선택자인지 잘 알 수 있게 이름을 정하는 것이 중요하다. - 과 _ 를 잘 사용한다는 걸 어디서 봤는데..
- 전체 선택자
- {
margin: 0;
text-decoration: none;
}
- 태그 선택자
p {
background: yellowgreen;
color: darkgreen;
}
< p >태그 선택자(Type Selector)< /p >
- 클래스 선택자
.class1 {
background: yellowgreen;
color: darkgreen;
}
div.class2 {
background: darkgreen;
color: yellowgreen;
} < p class="class1">케이스1< /p >
< p class="class2">케이스2< /p >
< div class="class2">케이스3< /div >
클래스는 여럿, id는 유일한 것.
id는 css 에서 거의 쓰지 않고, javascript 에서 가리킬 때 주로 쓰인다.
자주 사용되는 CSS 속성 관련 정리 사이트.
자주 사용되는 스타일 시트 속성
HTML의 부모 자식 구조
- 박스 div 가 있고 그 안에 여러 div 박스가 있다. 누가 누구 안에 있느냐 를 이해하는 것이 가장 중요하다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받게 된다.
자주 쓰이는 CSS
display:flex 사용법 ( → 넘나 유용한 것!)
- div 안의 내용물들을 쉽게 정리하기 위한 방법
- 아래 세 속성이 항상 따라다닌다. (display:flex; 까지 총 네 줄이 붙어다님)
flex-direction: column / row
align-items: center / flex-start / flex-end
justify-content: center / space-around / space-between
margin과 padding ( → 헷갈리지 말기!)
- margin은 바깥 여백을, padding은 내 안쪽 여백을
- div에 색깔을 넣고, 직접 사용해서 차이를 비교해보3.
자식선택자 사용하기 ( → 깔끔한 CSS를 위하여!)
-
.mytitle > h1 : mytitle 클래스 바로 안의 h1을 가리킨다.
-
만약 mytitle 안의 div 안의 h1을 가리킨다면?
-
.mytitle > div > h1 으로 표현 가능하다.
CSS 파일분리
<link rel = "stylesheet" type = "text/css" href = "(css파일이름).css">만들어 놓은 페이지에 구글 웹폰트 입히기
- 구글 웹폰트 사이트 : 클릭!
- html 파일 내 < head > 태그 안에다 웹폰트 사이트에서 긁어온 코드를 복사해 주고,
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
- {
font-family: 'Nanum Myeongjo', serif;
}
/ css에 이 부분을 추가 해 주면 전체적으로 폰트가 입혀진다. 폰트 이름이 저렇게 띄어쓰기 되어 있으면 ' '로 표기해 주어야 한다./
Bootstrap 기초 & 응용
- 부트스트랩 참고 : 부트스트랩 기본 페이지
- 예쁜 CSS 를 갖다 쓰기 편하게 미리 모아둔 것
- 부트스트랩을 사용하겠다는 코드를 기본적으로 끌어와서 < head > 태그 내에 붙여 넣어 주고, "부트스트랩 컴퍼넌트 페이지" 링크텍스트 에서 마음에 드는 컴퍼넌트들을 활용해 볼 수 있다.
- 나홀로 링크 메모장 만들기 실습
- 부트스트랩에서 컴퍼넌트 가져다 쓰고 적당히 맞게 CSS로 조절해주면 된다.
완전 쌩초보 (나) 를 위한 깃허브
- 안보면 손해 : 완전 초보를 위한 깃허브 자료
Commit / Pull / Push
-
내 컴퓨터 내 로컬저장소에 세이브를 하고, 원격저장소에 세이브한 것을 업데이트하는 것
-
내 컴퓨터 내 로컬저장소에 세이브를 하고 → Commit
- 충돌 날 일이 별로 없다. 나 혼자 작업한 거니까
-
원격저장소에 세이브한 것을 업데이트하는 것 → Push
- 충돌 날 수도 있다. 보통 알아서 합쳐주고, 같은 부분이면 사용자에게 직접 수정하라고 알려줌
-
원격저장소에 세이브된 것을 로컬저장소로 가져오는 것 → Pull
- Commit을 한 다음 Pull 할 수 있음(그래야 충돌을 잡을 수 있으니까. Commit을 안하면 git이 코드가 수정된 것만 알지 정확히 어디가 수정됐는지를 모른다.)
- 충돌 날 수도 있다. 보통 알아서 합쳐주고, 같은 부분이면 사용자에게 직접 수정하라고 알려줌
-
Branch? ( commit push 만 해봄.. )
과제 - 부트스트랩을 이용한 원페이지 쇼핑몰 메인 페이지 만들어 깃허브에 올리기
- ( 전 직장에서 실제 직접 개발한 소스 ㅎㅎ; )
- ( 아직 깃허브 주소로 하는 방법을 모름..ㅠ )
