HTML

람뽀·2024년 3월 21일

OZ 코딩스쿨

목록 보기

2/11

2024.03.21

~ 2024.04.09

오늘은 oz코딩스쿨 부트캠프 수업의 첫날이었다. 대학교 졸업 후로 처음.. 낯선 사람들과 같이 수업을 듣는다는게 온라인인데도 얼마나 떨리던지 오랜만에 새로운 긴장감을 느꼈다.
대표님의 특강으로 캠프의 첫 강의가 시작됐다. 개발자로서 점점 더 커리어를 쌓으며 하이테크기술을 다루는 회사의 개발자가 되려면, 어떠한 전략을 짜고 목표를 세워야 하는지에 대한 특강이었다. 교육과정부터 시작해서 목표하는 회사에 취업하기까지의 전략과 고려사항에 대한 교육은 처음 들었는데, 새롭기 때문에 신기했고 냉정하게 내가 저런 과정들을 차분히 해낼 수 있을까? 하는 자신에 대한 의심도 들었다.
오후에는 앞으로 캠프를 진행하면서 지켜야 할 사항들과 진행절차에 대한 설명을 듣고 첫 수업이 시작됐다.
어디서 어떻게 공부를 해도 늘 이것부터 시작하더라. HTML★★
내가 HTML을 완벽하게 아는 것은 절!대! 아니지만, 초심자를 위한 기초는 어느정도 이해 할 수 있어서 내가 오늘 수업을 들으면서 새로웠던 것 위주로 기록하보자.

학습내용

인터넷 !== 웹

(참조 : https://seunghyun90.tistory.com/40)

인터넷 : 전 세계의 컴퓨터를 하나로 연결하는 거대한 통신망
그 자체이다. 도시 사이를 연결하는 도로 같은 느낌. 연결만 되어 있어서는 아무런 의미가 없다. 인터넷은 정보 교환을 위한 유저들의 니즈를 충족시키기 위해 개발된 것으로 이를 통해 웹, 전자메일과 같은 서비스가 사용된다. 인터넷을 사용하는 서비스중 웹이 많은 부분을 차지해서 혼용해서 많이 쓰인다.
웹 : 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간 = 얽혀있는 무형의 정보 네트워크로 웹을 통해서 교환되는 정보는 글, 이미지, 동영상 등등이 있다. 이것들을 효과적으로 제공하기 위해 사용되는 방식이 웹 사이트이다. 즉 웹개발자는 인터넷과 웹을 통해 공유될 웹 사이트를 만들고 또 그것을 서비스하기 위한 환경을 구축하는 사람을 말한다. 이것에 필수적인 언어가 HTML이다. HTML과 CSS를 통해 웹 사이트에 표현될 화면을 웹 페이지라고 하고, 완성된 웹 페이지는 다른 웹 페이지와 그룹으로 묶여 하나의 웹 사이트가 된다.
렌더링 : 누군가 작성한 HTML을 웹 브라우저에게 전달하면 웹 브라우저는 그 코드를 해석하고 결과에 의거한 컨텐츠를 화면에 표시하는데, 이것을 렌더링 과정이라고 한다.

태그 < >

태그명은 소문자다! (의식한적 없는데 의식하니까 정말 그렇더라 뭔가 신기했다)
<html lang="ko"> : 웹 페이지의 언어가 한국어임을 표시한다. (기본적으로 vscode에서 ! 를써서 자동으로 세팅을 하면 lang='en'으로 설정된다. 영어라는 뜻. 이때 페이지를 열어보면 크롬이 이녀석 한국에서 접속했는데 영어사이트에 들어왔네? 하고 번역해줄까?! 하는 창을 알아써 띄워준다. 근데 ko로 해놓으면 그게 안뜬다. 신기하다~)
<hr>은 수평선을 표시하는 태그인데 처음봤다.
HTML은 공백을 한칸만 허용하기 때문에 인위적을 공백을 넣으려면 Entity code를 사용해야한다. 공백은  
이러한 방식이 있다는 것은 알았는데 entity code라는 정식 명칭은 처음들어봐서 뭔가 신기했다.
(그렇다면 HTML은 사용자에게 공백을 여러번 입력 받아도 하나의 공백만 인정할까? 만약 그렇다면 공백을 여러번 받았을 때 그것을 전환하기 위한 작업을 별도로 해주는것일까? 하고 궁금증이 일었다.)
<img>태그 : src속성의 속성값으로 url을 입력할 때 해당 이미지가
-> 하위폴더에 있을 때 : 하위폴더명/파일명
-> 상위폴더에 있을 때 : ../파일명 으로 기입하면 된다.
/ 는 ~에 있는으로 해석하고, ..는 상위폴더라는 뜻으로 해석하면 된다.
또 width 속성만 기입하면 height는 원본의 이미지 비율에 따라 자동으로 조정된다.
<table>태그 : 표를 만들 때 쓰는 태그로, <tr>,<td>,<th>,<caption> 등의 태그와 colspan, rowspan(셀병합) 속성을 이용하여 나타낸다. css가 발전하면서 더 자유롭게 표를 만들 수 있어지면서 요즘은 많이 사용하지는 않는다고 한다.
<input>태그 : 기본은 type="text"이다. 속성값으로 autocomplete="off"을 입력하면, 주소, 이메일, 이름 등의 자동완성 기능을 없앨 수 있다.
- type="data" : min / max로 날짜 범위 지정
- type="radio"와 type="checkbox"는 모양이 동그랗고 네모난것외에도 radio는 하나의 값만 선택 할 수있다.( 같은 radio 항목끼리 같은 name을 지정해줘야 한다.)
<select>태그 : 다수의 선택지를 <option>태그로 값을 넣어 줄 수 있는 드롭다운 옵션선택 메뉴. 각각의 option에 value를 지정해주어야 컴퓨터가 다른 각기 다른 값으로 인지함. mutiple / disabled 속성으로 조정 가능
<textarea>태그 : 한줄의 텍스트만 기입 가능한 <input type="text">와 달리 여러줄의 텍스트를 입력 받을 수 있다. 마우스로 resizing 가능하다. html에서 크기조정은 cols, rows속성으로 가능한데 이것은 행, 열당 몇개의 글자수를 배치할것인가로 박스크기를 정하는 상대적수치로, CSS를 통해 크기를 지정하는 것이 좋고, resize : none 속성으로 resizing을 방지할 수 있다.
<form>태그 : form태그 안에 포함되는 input태그에는 name속성을 반드시 적어줘야한다(name 속성은 서버뿐 아니라 js에서도 참조값으로 사용 할 수 있다). 서버가 전송받은 데이터를 받았을 때 각기 항목을 구별하기 위함이다. 하위 태그의 속성값으로 required를 사용하면 해당 사항은 반드시 입력해야 한다는 의미로 비어있으면 제출되지 않음.
- GET(서버로부터 정보를 받아오는 통신 방식. ex.네이버에서 뉴스를 보고 싶어서 클릭하는것)
- POST(서버에 요청을 보내어 작업을 수행하는 통신 방식. ex. 닉네임 변경)
container tag : 컨텐츠나 레이아웃에 영향을 주지 않는 태그. 여러 요소를 묶어 관리하기 위해 사용하는 태그로 컨텐츠 내용 구분이나 공통 스타일을 적용하기 위해 사용하는 태그. <div>, <span>가 대표적이다.
sementic tag : 컨테이너 태그와 비슷한 역할을 하지만 하위태그의 역할을 강조하는 의미로 사용되는 태그로 웹사이트의 구조를 담당하고 개발자와 브라우저에 정보를 제공하여 SEO에 좋다.
<meta>태그 : 문서에 관한 메타데이터를 기입하는 태그이다.(메타데이터란, 데이터에 대한 데이터를 의미한다. 즉 현재 내가 보고 있는 사이트에 대한 정보가 기입되어 있는 태그라고 보면 된다.)
- charset : 문자세트라는 뜻으로, 컴퓨터가 문자를 표현할 때 외부 전자회로에 흐르는 내용을 토대로 표시하는 것을 인코딩이라고 하는데 전자의 값이 어떨 때 무슨 방식으로 문자를 표현해야 한다는 약속이 있다. charset=’utf-8’은 문서가 렌더링 되기 전에 브라우저가 문서를 해석하는 단계에서 문서의 인코딩 방식을 확인한다. 우리가 사용하는 PC에 따라 달라질 수 있는 인코딩 방식을 통일하여 화면이 깨지는 현상을 방지한다.
- name : content 속성과 함께 하여 문서의 정보를 이름+값 쌍의 형태로 제공할 수 있다. 주로 쓰이는 값은 아래에 있는 것들로 keyword의 경우 콤마로 여러가지를 기입 할 수 있다.
  
  <meta name="author" content="김보람" />
  <meta name="description" content="연습용 페이지" />
  <meta name="keyword" content="공부, HTML, 실습" />
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta http-equiv="refresh" content="10">
- http-equiv : edge를 기준으로 IE브라우저를 호환하라 / 10초마다 페이지를 새로고침하라 라는 뜻인것은 알겠는데, 왜 저렇게 사용해야 하는지는 잘 모르겠음. 추가 공부 필요.

💡편리한 VScode 단축키

command + d : 현재 선택중인 요소를 드래그함. 반복하면 같은 이름의 요소를 추가로 선택함.
shift + option + 방향키 : 현재 선택중인 요소를 누른 방향으로 복제함.
option + 방향키 : 현재 선택중인 요소의 위치를 누른 방향으로 이동시킴.

강의를 들으면서 강사님의 말씀 중에 인상깊었던 것이 두 개가 있다.

백문이 불여일타! 백번 보고 듣는것보다 한번 타이핑 하는게 더 좋다!
개발은 학문적인 영역보다는 실습의 영역이 더 크다. 이론 공부하듯이 모르는것을 파고들려고 하기보다 주로 사용되는 기술을 익히고 공부하는것에 집중해라.
(예를 들어서 entity code를 내가 오늘 처음 듣고 귀엽고 재밌었는데 실제로 그중에서 많이 사용되는 것은 50%도 되지 않으니 그것을 달달 외우려고 애쓰지말고, 많이 사용되는 것 위주로 공부하라는 말이었다.)

백문이 불여일타!

이전에 혼자 독학 할 때 나의 문제점이기도 했다. 사전교육에서 강사님께서도 해주셨던 말인데, 문과출신 비전공자들의 문제점 중 하나가 달달 외우는건 잘하는데 문제 해결에는 약하다는 것이었다.

나는 혼자 공부할 때도 그렇게 공부했다. 뭔가 이론을 제대로 모르는거 같으면 불안하고.. 그래서 따라쓰고 활용하기보다 오늘 배운 내용 정리하고, 메모하고 하는 것에 더 집중했다.

당연하게도 혼자서 글만 줄줄 읽으니 공부는 금방 질리고 재미가 없고, 실력도 늘지 않았다. 어디 수학, 과학처럼 개발에도 시험이 있어서 100점을 맞아야 누가 개발자를 시켜주는 것도 아닌데 난 왜 그렇게 이론을 공부하고 정리하는 것에 집착했는지..

그래서 이번 교육에서는 새로웠던 것 위주로 메모하고, 되도록 선생님을 따라하면서 타이핑하고 조금 다르게 입력해보기도 했다. 또 앞으로 포스팅하면서 밑줄로 긋는 것들은 이해가 안 된 것이니 추후에 공부하면서 포스팅 하기로 정했다.

내일도 힘내자!

3.27 라이브강의 중에 강사님께서 div를 남발해서는 안된다는 말을 하신적이 있다. 그냥 그 말만 들었을 때는 어떤 의미인지 잘 알수가 없어서 단순히 코드가 더러워지고 성능 문제가 생기나? 라고 생각했다. 이에 관해 어떤 의미인지 질문을 남겼는데, 어제 답을 받을 수 있었다. h1과 같은 sementic tag는 <div>에 style을 적용하여도 겉으로 보기에 똑같이 구현 할 수 있다.
하지만 이렇게 만들어낸 div를 사용한 코드는 사람(같은개발자나 코드를 본 사람)이 보기에도, 기계가 알아보기에도 그것이 제목인지 그냥 코드 조각인지 알 수가 없다. HTML 문서에 div, span 등 semantic하지 않은 요소가 많으면 많을수록, 이런 혼란은 더욱 커지고, SEO와 유지보수에 불리해진다. 그래서 무분별한 div 사용을 자제하고 의미론적으로 명확하다면 sementic tag를 사용하라는 의미였던 것이다.
4.9 스스로 한페이지의 html을 작성하는것은 진짜 어렵다.. 틀을 어떻게 잡아야할지 시멘틱태그는 어떻게 써야할지 div를 써야하는지 span을 써야하는지 아니면 둘 다 필요없이 그냥 작성해도 되는지.. 진짜 헤롱헤롱=͟͟͞͞(๑º ﾛ º๑) 그래서 오늘 스스로 간단한 회원가입폼 만들어보기 과제를 했는데 html 작성하는거만 30분은 걸린것같다! 대부분 공부 커리큘럼을 보면 html과 css는 기본기라고 빠르게 넘어가던데 정말 그렇게 작성해도 되는걸까? ~~html태그는 좀 더럽더라도 화면 랜더링 속도라던가 그런거에 영향이 없는걸까?~~ 나~중에 좀 고수가 되면 이런것도 공부해봐야겠다

람뽀

기록의 힘. 가보자고 😎

이전 포스트

사전 강의

다음 포스트