2일차. HTML 다루기

수업을 집에서 듣지 못할 때 갈 만한 집 앞 도서관을 찾았다. 다만 도서관이다보니 소리내어 말하는 페어 프로그래밍 같은 건 어려울 것 같아서, 근처의 카페도 봐두는 중이다. 잠깐씩 옮겨가면 될 것 같은데...

 

 

오늘의 학습

오늘은 자기소개 홈페이지를 작게 만들어보고(css가 없으니 보기엔 별로다.) 전반적인 구조를 짜는 마크업 언어 html 위주로 배웠다. 물론 배운 적이 있다보니 복습이나 다름 없었다. 그런데 생각보다 까먹어버린 부분이 많아서 스스로 충격....... 물론 몇번 꾸준히 하다보면 바로 손이 익을 것 같긴 하다. 사실 좀 어려웠던 건 JS부터니까......... 

못한다고 스스로 자괴감 느끼지 않기! 잊어버려도 검색해서 찾으면 되고, 어쨌거나 해본 것과 안 해본 것엔 큰 차이가 있다고 생각한다. '그런 게 있었지'라는 생각만으로도 시도해볼 수 있으니까. 

 

하루에 배운 걸 응용 복습하는 스터디에 가입할 것 같은데, 음, 남들에게 영양가 있는 정보를 많이 찾아서 알리는 사람이 되고 싶다. 다른 사람들에게서도 모르는 걸 많이 배우고 싶다. 

 

 

스스로 묻는 하루치 Question.

- label 태그는 언제 쓰는가?

input 태그를 쓸 때에 주로 감싸는 태그다. 이 태그를 쓰면 체크박스의 체크를 정확히 클릭하지 않아도 표시가 된다.  label태그를 사용하는 방법은 다음 두 가지가 있다. 

1) 명시적 방법(for로 연결, label 태그와 input 태그를 따로 쓴다.)
<label for ="name">이름</label>
<input type ="text" id="name">

2) 암시적 방법
<label>
이름
<input type="text" id="name">
</label>

오래된 브라우저는 명시적 방법을 지원하기 때문에 주로 전자를 많이 쓴다고 한다. 강의 자료엔 후자로 적혀 있었는데 나중에 실시간 세션에서 전자로 보여주셔서 두가지 다 쓴다는 걸 깨달았다. 

 

- form 태그는 무엇에 쓰는가?

form태그는 주로 input를 감싸서 정보를 다른 곳으로 전송할 때 쓰는 태그다. 예전에 JS로 회원가입 같은 DB 다룰 때도 form태그로 묶어서 value를 보냈던 기억이... 

 

https://html-css-js.com/html/character-codes/icons/
여기선 아이콘을 그대로 복사해서 쓸 수 있구나. 구글폰트에서 아이콘으로 갖다 쓰다가 사람들이 다들 유색 아이콘으로 넣길래 나도 찾아서 넣었다... font awesome에서 아이콘 쓸 때는 고유코드링크 받아서 같이 넣어야했던 것 같은데 구글 폰트는 그런 게 없었나? 이 부분 체크 필요. 


HTML 요소는 속성(attributes)들을 가질 수 있다. 속성들은 요소에 대한 추가적인 정보를 제공한다. 속성들은 시작 태그에 명시되고 이름(name)/값(value) 쌍으로 주어진다! ex) class="main" 에서 class가 attribute name이다. 

이게 퀴즈에 나왔는데 좀 어버버 하면서 서치해야 했다. 

ol li 에서 start="5"하면 5부터 되네... 신기하네...
a는 앵커 의미. target="_blank" 하면 새 탭에서 열기.
src는 소스의 약자.
select 안에 option으로 드롭다운. 
form은 어디다가 정보를 보내는 용도다. 그래서 option은 value로 정보를 실어 보냄.

from 태그 내부에 있으면 textarea와 버튼이 자동으로 묶임.
button type="reset" 은 form 내부가 다 리셋됨.
button type="submit"은 새로고침됨. 

 

앞으로 해야하는 것

• 노트북 zoom연결은 확인했는데 음성이 제대로 되는지 잘 모르겠다. 확인할 수 있으면 좋겠는데...
• input type정도는 자유자재로 넣을 수 있게. 
• aside나 section같은 태그를 사용하여 시맨틱하게 만드는 법을 연구해보자.