요즘 내일배움카드를 이용해 스파르타 코딩클럽에서 코딩을 배우고 있음!!!
일명 "내일배움단!" ٩(*•̀ᴗ•́*)و
내일배움단....! SOS단! 로켓단! 세상을 오지게 떠들썩하게 할 - 아름다운 미래와 밝은 내일이 기다리는 내일배움단
사실 원래대로라면 3주차를 공부하고 있어야 하지만 내가 강의를 촉박하게 듣는 바람에 수박 겉핥기식으로만 넘어가서(ㅎㅎ.....😇😇)
오늘(7/20 화) 밤부터 강의 처음부터 다시 코딩공부를 시작하기로 했다!
이번에는 차근차근 이해하고 넘어가자 ଘ(੭*ˊᵕˋ)੭
근데 내일(지금 글 쓰는 시점에선 이미 오늘이 되어버렸지만 어쨌든!)부터는 미드나잇 코딩보다 *애프터눈 코딩*을 하려 한다....
지난 일주일 동안 코딩공부를 오후 10시에 시작했더니 강의도 시간에 쫓겨서 들어야 하고 2시간만에 공부용 인스타에 인증까지 하려니 너무 촉박했음!!ㅠㅠㅠ 내일은 반드시 여유있게 코딩을 공부하는 걸로!! 여유있는 애프터눈 코딩 이케
어쨌든 지금 공부하는 내용을 현재진행형으로 적어 보도록 한다.
(개발일지 처음 쓰는 거라 사담도 길고 시간도 되게 많이걸리네.....😂 계속 쓰다보면 익숙해지려나)
이렇게 노션을 이용해 나만의 코딩 공부 계획표도 만들었다! ଘ(੭*ˊᵕˋ)੭ 오늘 밤 10시쯤에 완성함ㅎㅎ
테마 바꾸기
본격적인 코딩 이야기로 들어가자면,
1주차 코딩은 "파이챰(pycharm)" (python charming 매력적인 파이썬) 이라는, 파이썬에 특화된 코딩 프로그램으로 코딩하고 있다ㅎㅎ
비주얼 스튜디오를 사용할 줄 알았는데 생소한 프로그램인 파이챰을 써서 조금 의외였지만,
그래도 뭔가 멋있고 있어보였다😎(?)! 3주차에 본격적으로 파이썬을 배울 땐 과연 얼마나 편리할지 벌써 기대가 된다.
사실 파이챰을 처음 깔자마자 바로 setting으로 들어가서 테마부터 바꿨다!!!ㅋㅋㅋㅋㅋ
Dracula랑 nightfall이라는 두 가지 테마를 다운받았음ㅎㅎ
Dracula는 뭔가 레헬른st같으면서도 색감이 유니콘🦄(?)같아서 발랄한 게 넘 마음에 들고,
nightfall은 차분한 딥블루 색상의 배경에 폰트와 폰트색이 포인트가 되어서 잔잔한 게 예쁘다! nightfall은 심야 코딩을 즐기고 싶을 때 쓰면 기분 날 듯? (~˘▾˘)~
(이번 개발일지 스크린샷의 파이챰에는 전부 Dracula 테마가 적용되어 있다.)
테마 바꾸는 내용에 관해선 나중에 다른 개발일지에 더 쓰도록 한다.
<html>은 속성의 <head>와 본문의 <body>로 구성된다.
처음 공부할 때 그냥 html 태그만 훑고 넘어갔더니 다음 차시에서 "이 태그가 뭐하는 태그였지??"하고 자꾸 뒤적거렸다😂
코딩은 외우는 것보다 가져다 쓰는 거라고는 하지만 이건 기초적이고 꽤 자주 쓸 태그들인 것 같아, 이것만큼은 익히고 넘어가고 싶어 시간을 내어 태그를 복습했다.
태그를 복습할 땐 위와 같이 파이챰 창을 이분할하여 학습하였다.
((** 이분할 방법 : 항목을 꾹 누른 다음 파이챰 맨 오른쪽 가장자리에 드래그-드롭 하면 이분할된다!! 나도 어쩌다가 알았는데 포토샵이나 클립스튜디오에서 창을 두 개로 나눌 때 하는 방법이랑 똑같다^.^))
왼쪽 창은 스파르타에서 제공한 html 태그를 복붙한 것이고, 오른쪽 창은 왼쪽 창을 보고 내가 직접 수기로 타이핑하며 학습한 것이다. 확실히 내가 직접 마음대로 가지고 놀면서 배우는 게 제일 이해가 잘 되는 것 같다.
<head>, <body> 태그
head = 머리(뇌), 속성부여 기능들(안보임), 본문 빼고 전부.
<head></head>
<head>
<meta>메타 태그. 얘는 뭐 하는 애인진 잘 모르겠으나 짝이 없다. 솔로이다.열림교회 열림태그
<title>타이틀 태그. 타이틀 태그 사이에 글을 쓰면 그게 곧 브라우저의 제목이 된다. </title>
<style> 꾸미기 태그. -> 얘가 CSS. </style>
javascript 움직임 부여. -> 얘가 자바스크립트(애칭 "자바")
</head>
head는 제목들(웹페이지 제목 등), 각종 속성을 부여하는 기능들(꾸미기(css), 움직이기(자바))을 포함한다.
사람을 겉으로 봤을 때 저 사람 머릿속이 어떤 구조고 머릿속에서 어떤 일이 일어나는지 전혀 모르는 것처럼 <head>도 똑같다ㅇㅇ
하지만 머리가 없으면 사람은 껍데기에 불과하다. 머리에 이미 선행된 지식(명령 태그들)이 있기 때문에 사람마다 차별화가 되는 거겠지? 그래서 <head>라는 이름이 붙은 게 아닐까 싶다.
body = 몸통, 본문(보임).
body는 웹페이지에 실제로 드러나는 부분이다.
요약하면 head는 본문에 부여되는 속성들, body는 본문.
(head가 body보다 더 먼저 있는 이유는 해부학적으로 머리가 몸보다 더 위에 있어서가 아닐까??)
구역을 나누는 태그들에는 <div>와 <p>가 있다.
div = divide의 div! = 컨테이너 = 그룹화, 그룹으로 묶기. 구역나누기.
<div> 태그는 divide의 div로, 그룹으로 묶는 태그이다. (그룹화 = 구역나누기)
아직 잘은 모르겠는데 활용사례가 있으면 더 추가하는 걸로.
p = paragraph의 p! = 단일의 문단 블록(block)
<p> 태그는 "문단"을 의미하는 영단어인 paragraph의 p로, [<p></p>] 자체가 한 문단으로서 한 블록(block)으로 취급된다.
이렇게 노션에서 한 묶음으로 묶이는 게 <p></p> 태그가 아닐까 싶긴 하다.
리스트 만드는 태그 : 패티 <ol>, <ul>랑 재료 <li>
ul = Unordered List의 약자. 순서 없는 리스트. 모두가 같은 총알.
ol = Ordered List의 약자. 순서 있는 리스트. 1,2,3,4,...
li = LIst의 약자. ul, ol의 하위항목. ul, ol을 구성하는 리스트 항목은 모두 li로 표시한다.
<li>태그에서, 첫 문장이 시작하기 전의 띄어쓰기는 무시된다.
<실험1> Ordered List, <ol> 태그
- <ol></ol> 사이에 있는 <li>들은 모두 1.2.3....의 순서를 갖는다.
- 코딩에서 tab 키를 이용해 수준을 달리한 것은 실제 html 출력결과에 영향을 미치지 않는다. (전부 동일한 수준으로 표시됨.)
<실험2> Unordered List, <ul> 태그
- <ul></ul> 사이에 있는 <li>들은 모두 같은 총알을 갖는다.
- 코딩에서 tab 키를 이용해 수준을 달리한 것은 실제 html 출력결과에 영향을 미치지 않는다. (전부 동일한 수준으로 표시됨.) (** <ol> 태그와 마찬가지)
<실험3> <ol>, <ul> 태그 혼합형
- <ol></ol> 태그 안의 순서(1,2,3...)는 태그 안에서만 한정된다.
즉, <ol></ol> 과 다른 <ol></ol>은 서로 영향받지 않으며, 각 태그 안 순서는 독립적으로 유지된다. - 각각 닫힌 태그 <태그></태그>는 서로 독립적이다.
- 리스트 태그 안의 리스트 태그 안의 리스트 태그 ...... 를 만들 수 있다. (무한종속가능)
하지만, 3번 반복되면 파이챰에선 에러로 표기된다. (너무 많은 하위항목을 만들면 오류나기 쉬운 듯)
