-------
개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 그대로 옮겼습니다.
https://blog.naver.com/0yeonjae2/222284994814
-------
<수업에서 배운 내용 정리 - 복습>
1. 경로
현재 하고 있는 작업 파일에서 다른 위치에 있는 파일을 사용해야 하는 경우가 있다. 이때 경로를 설정해서 프로그래밍을 한다.
1-1 루트 디렉토리 = 최상위 디렉토리
일반적으로는 c 드라이브의 루트 디렉토리는 c:/이다.
1-2 절대경로와 상대경로
절대경로는 PC의 C 드라이브를 기준으로 하는 파일의 고유한 경로이다.
상대경로는 지금 위치한 디렉토리를 기준으로 하는 파일의 상대적인 경로이다.
1-3 경로 설정하기
./는 현재 위치에서, ../는 현재 위치에서의 상위 디렉토리를 뜻한다.
2. Github Desktop
로컬 저장소에서의 작업들을 원격 저장소에 저장시키는 것
① 로컬 환경에서 작업하기
② 변화된 것들을 추가해서 commit to main 하기
(이 때 commit 멘트를 써 주는 것이 중요하다. 나중에 내가 무엇을 바꿨는지 알기 쉽게 간단하게 작성하면 된다.)
③ commit to main 한 뒤에 fetch origin 부분을 눌러서 원격 저장소에도 반영하기
로컬에서 원격 저장소로 변경사항을 반영시키는 것을 push라고 하고, 그 반대는 pull이라고 표현한다.
(디버깅 부분에서 이 장면들을 캡처해서 설명해뒀다!)
추가적으로 fetch orgin 칸 옆에 branch라고 적혀있는 것도 있다. 지금 나처럼 간단한 작업들을 하는 것이 아니라 큰 프로젝트를 할 때 사용한다. 이름대로 main에서 분기해서 작업을 새롭게 한 후 마지막에 merge 시켜 프로젝트를 완성한다고 한다.
3. 디버깅
프로그램이 내가 원한 대로 작동하지 않는 것을 버그라고 한다. 디버그는 이 버그를 해결하는 것이다.
오류는 주로 문법적 오류로 인해 발생한다. 오타 여부와 정해진 문법대로 코딩이 되었는지 확인해야 한다.
VS code를 사용할 때는 터미널을 열어서 중간중간 확인하면 작업하면 좋다. 터미널 예시를 위해 2주 차 시 작업물에서 일부러 오류를 만들어보았다.
일단 처음 상태! 오류가 없어서 터미널에서도 문제가 발견되지 않았다고 알려준다.
<body> 태그를 없애보았다. 그러니까 바로 문제가 있다고 알려준다. 이 문제에 대한 설명을 보고 디버깅을 하면 된다.
Commit to main을 하고 나면 fetch origin 버튼이 push origin으로 바뀐다. 이 버튼을 누르면 로컬에서의 변화를 원격 저장소에도 반영할 수 있다.
VS code뿐만 아니라 웹 페이지 내에서도 문제상황을 파악할 수 있다. 웹을 열고 F12 키를 눌러 개발자 도구를 열고 문제상황을 확인한다.
4. 이름 짓기
이름은 콘텐츠에 대해 명시적으로 드러내도록 한다. 소문자, 숫자, 밑줄(_)만 포함해야 한다.
첫 글자는 반드시 문자를 사용해야 한다. 아이디를 생성한다는 생각으로 이름을 지으면 편하다.
<수업에서 배운 내용 정리>
HTML 기본 용어 정리
●요소 생성하기
태그 : 요소를 생성한다.
내용을 가질 수 있는 요소를 생성할 때, 앞에 오는 태그를 시작 태그(여는 태그), 뒤에 오는 태그를 끝 태그(닫는 태그)라 한다.
내용을 가질 수 없는 이미지와 같은 요소를 생성할 때는 닫는 태그가 없다.
→ 하지만 이렇게 작성하면 헷갈릴 수 있기 때문에 XHTML 표기법을 사용하는 것을 추천한다.
요소 이름을 한 번 더 적고 한 번 띄어쓰기한 후 슬래시를 그으면 된다.
ex) <img /> , <br />
태그는 정말 많다.
우리가 VS code를 실행해 !를 치고 엔터를 누르면 기본 틀이 만들어지는데 여기 있는 <head>, <body> 도 태그다.
여기 있는 태그 중 section이라는 태그가 있는데 <section> 태그 내에 class나 id를 만들어 줄 수 있다.
class나 id 둘 다 부분에 이름을 만들어준다는 점은 같지만, class는 여러 번 사용 가능하지만, id 하나는 오직 한 곳에서만 쓰여야 한다!
https://developer.mozilla.org/en-US/docs/Web/HTML/Element 에 들어가면 무슨 태그가 있는지 볼 수 있다.
●속성
태그에 추가적인 정보를 넣어줄 때 사용한다.
<img> 태그를 사용할 때는 src 속성과 alt 속성을 사용해야 한다.
여기서 alt는 접근성을 위해 넣어주는데, 사진이 깨졌을 때 무슨 사진을 넣으려고 했는지 알려주는 역할을 해서 내가 넣은 사진이 무슨 사진인지 간단하게 적어주면 된다.
<a> 태그는 하이퍼링크를 생성하는데, href 속성을 이용해 이동할 웹 페이지의 위치를 지정한다.
●주석
프로그램 실행에 영향을 미치지 않고 설명을 위해 사용하는 코드이다.
설명을 적고 ctrl /를 누르면 자동으로 생긴다. 모양은 <!-- 내용 --> 이렇게 생겼다. 초반에는 코드의 길이가 길지 않지만 작업을 하다 보면 코드의 길이가 굉장히 길어지고 내가 무엇을 의도하고 코드를 작성했는지 헷갈려서 파악하기까지 오랜 시간이 걸리기 때문에 작업을 하면서 중간중간 주석을 작성해 내가 무엇을 하는지 적어주면 좋다. 남들과의 협업에서도 필요하기 때문에 습관을 들이면 좋다.
HTML5 태그에 대해 알아보자!
●문서 구조화
블록 형식 태그 : <div>, <h1> ~ <h6>, <p>
인라인 형식 태그 : <span>, <a>, <input>
블록형식 태그는 전체 영역을 차지하고, 인라인 형식 태그는 그 콘텐츠만큼 만의 영역을 차지한다.
위와 같은 이유로 span 태그에는 text-align 속성이 적용되지 않는다. 왜냐하면 블록 형식 태그와 다르게 글자들만 영역으로 포함되기 때문에 이동할 만한 영역이 없어서이다.
●글자 태그
▷제목과 본문 태그
<h1> ~ <h6> : 제목을 생성한다
<p> : 본문의 문단을 생성한다
<br> : 줄을 바꾼다
<hr> : 수평 줄을 삽입한다.
▷앵커 태그
<a> : 하이퍼링크를 생성한다
▷글자 모양 태그
<b> : 글자를 굵어지게 한다
<i> : 글자를 기울어지게 한다
<small> : 글자를 작게 한다
<sub> : 아래 첨자
<sup> : 위 첨자
<ins> : 글자에 밑줄을 쳐 준다.
<del> : 글자에 취고 선을 표시해 준다.
< 개발자 도구를 사용해 내가 클론 코딩할 사이트 훑어보기>
나는 지니 사이트를 클론 코딩하기로 했다. 평소에 자주 사용하는 사이트인 만큼 실제로 비슷하게 만들어보면 뿌듯할 것 같았다.
지니 홈페이지에 들어가 개발자 도구를 이용해 열어봤다.
<head> 부분에서는 <title> , <script>, <link> 등 한 번씩 본 적 있는 태그들로 이루어져 있다.
<body> 부분도 <div>, <script>를 주로 해서 구성되어 있었다. 그리고 각 줄마다 주석이 꼼꼼히 달려있어서 이 줄로 무엇을 구현했는지 파악하기 어렵지 않았다.
<느낀 점>
내가 클론 코딩할 사이트를 뜯어보니 굉장히 내용이 많아서 당황스러웠다. 태그 자체는 다행히 친숙했는데 내용들이 어려워서 좀 걱정이 된다. 원하는 퀄리티로 구현하려면 공부를 정말 많이 해야겠다고 느꼈다.
'전공과목 정리 > 웹프로그래밍기초' 카테고리의 다른 글
| [웹프로그래밍기초🎀] 7~8주차 개발일지 (0) | 2022.01.31 |
|---|---|
| [웹프로그래밍기초🎀] 6주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 5주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 4주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 2주차 개발일지 (0) | 2022.01.31 |