2021.12.21

공부하며 생각한 것들, 기억하고 싶은 것들 기록하기

 

그 전에 어제 개강일 넋두리를 잠시...

 

파이참에 안드로이드 스튜디오에 노드에 슬렉에 비쥬얼 스튜디오 코드에...

설치하라는 프로그램도 잔뜩이고, 회원 가입하라는 것도 잔뜩이고.

노션도 이름만 들어봤지 익숙하지 않은데 거기다 게더라는 것도 처음 써보고.

어제 개강일은 정말 정신이 하나도 없었다.

어버버 우왕좌왕 허둥지둥 (물론 실제 몸은 가만히 컴퓨터 앞에 앉아있었다. 난리 부르스를 친 건 오로지 뇌뿐이다.) 시키는 거 따라하는 데도 벅차하며 멍 때리다가 30분 전부터 기다리던 OT도 놓쳤다는 사실은 웃음 없는 웃긴 이야기...줌으로 한다고 문자를 그렇게나 많이 보내줬는데 그새 까먹고 게더에서 기웃대고 있었지 뭐야.

심지어 AWS는 캡챠 보안문자로 자꾸 날 거부하다가 급기야 회원 가입도 안 시켜줬다! 서러워서 그대로 넉다운.

하지만 하루 지나서 오늘 해보니까 멀쩡히 잘 되더라. 전세계의 보안 관련 종사자분들, 보안문자 너무 어렵게 만들지 말아주세요. 저처럼 평생 접해도 맨날 틀리는 인간이 있으니까...저 컴퓨터 아니고 사람입니다...ㅠㅠ

 

 

HTML과 CSS 공부 첫날.

 

(1) HTML

오래 전 홈페이지가 유행할 때 나만의 홈페이지 좀 만져본 덕후라면 너무나 익숙할 그것.

하지만 나는 지인이 만들어줬다! 그래서 그런 게 있다라는, 정말 딱 존재만 알고있는 무언가였다.

유일하게 사용해본 거라곤 이미지 태그 img src뿐!

 

그래서 약간 겁을 먹고 있었는데, 첫 강의라 그런지 의외로 재미가 있다!!!

 

title은 탭 이름을 표시하는 역할.

head는 아이콘과 타이틀과 링크 등등이 들어간다고 하는데 아직 잘 모르겠다. (앞으로 모르는 부분은 나중에 알게 되었을 때 수정하러 와야겠다.)

body가 페이지에 들어가는 모든 것.

 

로그인 페이지를 퀴즈로 만들어봤는데, 이 간단한 걸 만들면서도 여러 가지를 생각해보게 되더라.

문단 역할을 <p></p>가 한대서 나는 가로선 <hr>처럼 밑으로 내려보내는 곳마다 해당 태그를 써야하는 줄 알았다. 그래서

 

<h1>로그인 페이지</h1>
<p></p>

ID: <input type="text"/>

<p></p>

PW: <input type="text"/>

<p></p>
<button>로그인하기</button>

 

위와 같이 짰는데, 튜터님의 답안은 아래와 같았다.

 

<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>

 

<p> 부분에다가 구역을 나누는 태그인 <div>(division의 약자)도 넣어보고, 무슨 용도인지 모르겠는 <ul>도 넣어봤다.

ul은

<ul></ul>

ID: <input type="text"/> 로 썼을 때는 p와 동일하게 나오고

<ul>ID: <input type="text"/></ul> 로 쓰니까 tab키 누른 것처럼 들여쓰기가 됐다!

div는 두 가지 모두 p일 때와 동일한 결과로 나와서 아직 차이가 뭔지 모르겠다.

ㄴdiv는 말 그대로 구역 나누고 범위 지정하는 역할인 듯. ID와 PW를 각각 하나의 구역으로 나누게 된 건데 구역별로 스타일 차이가 없어서 실제 페이지에서는 p와 똑같이 보였던 것 같다. css 수업 들으면서 활용하니까 이해됐다!

각각 태그가 무엇의 약자이고 무슨 역할인지 알려주면 좋을 텐데, 아무래도 이론이 아닌 실전형 수업이라서 생략되는 듯하다. 사실 나 같은 초보들에게는 열 몇가지 태그들이 존재한다는 걸 알려주는 것까지가 적정 레벨이겠지...뭐가 뭔지 하나하나 외울 필요 없다고도 하셨으니까. 그러니 이런 궁금증은 스스로 책이나 유튜브를 찾아보며 알아가는 게 좋겠다!

 

(2) CSS

background-image: url 적고 tab 누르면 ("")이 자동 완성.

background-image, size, position은 세트로 같이 잘 다닌다.

스타일은 중첩해서 사용 가능. class="뫄뫄 솨솨" 이렇게 하면 뫄뫄와 솨솨가 같이 적용된다.

. 대신 *은 모든 태그에 적용되는 스타일.