생활코딩님 강의는 직관적이고 너무 도움이 많이 된다. 어떻게 하면 더 빠르게 내 코딩 실력을 올릴 수 있는지, 또 어떻게 하면 흥미를 잃지 않고 코딩 공부를 계속할 수 있는지 그 방향을 잘 안내해 주시는 것 같다o((>ω< ))o
아래 내용들은 내가 강의를 듣고 기억에 남았던 부분/ 중요하다고 생각했던 부분을 정리한 것이다.
- 2024.07.24 -
6강 ~ 9강
7강
h1이 무엇인지를 알기 위해서 어떤 식으로 공부하는게 좋은지 생코님이 설명해주셨다.
1) 구글링해서 예제를 따라 친다.
2) 결과를 보고 추론해본다.
- h1의 경우, h 뒤에 1~6까지의 숫자가 올 수 있고 숫자가 커지면 커질 수록 글씨는 작아진다. 그리고 자동 줄바꿈이 되고, 일반 글짜보다는 크기가 크다...
이런 식으로 우리는 경험을 통해 알 수 있는 것이다.
3) 정의를 읽어본다.
- heading의 h를 따온 거구나! 이건 제목을 나타내는 코드구나! 💡
8강
8강에서는 통계를 기반으로 하는 학습에 대해 말씀해주셨다. 평균적으로 25개 정도의 태그를 사용한다고 하는데 찾아보면 태그 사용 빈도수를 정리해 놓은 게시물들이 있다. 그 게시물을 참고하여 자주 쓰이는 태그를 추려서 공부하면 훨씬 빨리실력이 늘 것 같다!
생코님께서 통계를 기반으로 무엇을 공부해야 하는지 파악하자!라는 아주 좋은 공부 방향을 제시해 주셨다.
9강
9강에서는 인기있는 두 태그 br과 p를 사용해 보았다. 둘의 차이점이 뭘까!
-
<br>은 어디서부터 어디까지라는 범위가 필요하지 않다. 따라서 열리는 태그- 닫히는 태그의 쌍이 아닌 하나의 태그로만 구성된다.
=> 단지 줄바꿈이라는 시각적인 의미만을 갖는다. -
<p></p>는 하나의 단락으로 묶는 코드로 어디서부터 어디까지가 한 단락인지 범위를 지정해줘야 한다. 따라서 여는 태그 닫는 태그 두 개가 하나의 쌍을 이룬다.
- 2024.07.25 -
10강 ~ 13강
11강
11강에서는 속성이라는 심화된 문법을 배웠다. 예시로 <img>라는 태그를 살펴 보았다.
<img>태그의 경우 이름만으로는 정보가 부족하다.
어떤 이미지인지를 알려주는 속성- src에 원하는 이미지의 주소를 알려주면 사진을 띄울 수 있다.
<img src = "coding.jpg" width = "100%">위의 코드에서
src = "coding.jpg" 과 width = "100%"을 속성, 영어로 attribute라고 한다. 이 때, 위치는 상관이 없다!
우린 이제 속성을 통해 더 많은 의미를 부여하는게 가능해졌다.
12강
12강에서는 부모와 자식관계인 태그들에 대해 배웠다. 두 개의 태그가 포함관계로 연관되어 있을 때, 포함하고 있는 태그를 부모 태그, 포함된 태그를 자식 태그라고 한다.
<parent>
<child>
</child>
</parent>태그들의 부모-자식 관계는 계속 바뀌지만, 어떤 태그는 그 역할이 정해져 있다.
이걸 살펴보기 위해서 목차 만들기를 살펴본다.
목록은 영어로 list이다. 여기서 앞의 두 글자를 갖고 오면 <li>이다.
<li>를 포함하는 항목들 중 어디부터 어디까지가 서로 연관된 목록인지를 경계 짓기 위한 부모 태그에는 <ol>과 <ul>이 있다. <ol>은 자동으로 번호를 매겨주고 <ul>은 점을 찍어준다.
부모태그는 반드시 자식 태그를 가져야 하고, 자식태그는 반드시 부모태그를 갖는다.
13강
13강에서는 정보가 많아짐에 따라 정보를 정리 정돈하기 위해 사용되는 체계/구조를 만드는 법에 대해 공부했다.
1) title: 책표지와 같은 것이다. →본문의 제목이 무엇인가?
2) meta: 책표지와 같은 것이다. →본문이 어떤 방식으로 저장돼 있는가?
위의 두 태그는 앞서 배웠던 코드와 달리 본문을 설명하는 코드이다. 우리가 이전에 배웠던 내용은 본문 그 자체였다. 여기서 또 알고가야할 내용은 본문은 <body>로 묶고 본문에 대한 설명은 <head>로 묶는다는 것이다. 또한 최고위층 <html>은 위의 head와 body를 모두 감싸는 태그이다.
마지막으로 html 파일 위에는 관용적으로 이 문서가 html문서임을 알리기 위해 <!doctype html>을 추가해 준다.
