HTML | HTML 기초

SURI·2021년 11월 12일

1. 웹 개발 이해하기

웹페이지를 만드는 기초인 HTML과 CSS를 공부해보자.

웹 개발을 위한 3가지 언어

  1. HTML : 웹페이지 구조를 담당하는 마크업 언어
  2. CSS : 디자인 요소를 시각화하는 스타일 시트 언어
  3. JavaScript : 프로그램으로 만들어 사용자와 상호작용하게 하는 프로그래밍 언어

Web Dev === Building a Dog House

웹 개발을 강아지 집을 만들어주는 것이라고 상상해보자.

  • 강아지 집의 구조를 문서로 바꾼다. CSS 적용을 위한 클래스도 명시.
  • 벽면에 색을 칠하기 위해 선택자를 활용하고 속성에 값을 부여.
  • 밤이 되면 전구에 불이 들어오도록 조건문을 활용해 프로그래밍.

실제 웹 개발 과정도 비슷하다.

  • 기획자가 대략적인 와이어 프로그램을 그리고 HTML로 작성한다.
  • 디자이너가 만든 디자인을 구현하기 위해 CSS를 작성한다.
  • 기능 구현을 위해 자바스크립트를 작성한다.

2. Visual Studio Code

  • 코드 에디터다. 메모장과 같은 역할이다.
  • 전에 배웠던 강좌에서 다양한 extension 프로그램을 설치했던 걸 그대로 해보았다. (Material Theme, Prettier, WakaTime 등)

3. HTML 기초

3.1 Achievement Goals

HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다. (프로그래밍 언어는 아니다.) 구조를 잘 짜놓으면, 자바스크립트 개발을 할 때 더 좋은 코드를 쓸 수 있다. 또한, 의미있는 태그(Semantic)를 사용하면 다른 사람과 컴퓨터가 읽기 쉬운 HTML 문서를 작성할 수 있다.

  • HTML에 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다.
  • HTML이 Markup language라는 것을 이해할 수 있다.
  • "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다.
  • HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
  • Opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
  • 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
  • div, span 태그가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.
  • ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
  • input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
  • 동적인 웹 어플리케이션 개발을 위한 HTML 구조를 짤 수 있다.
  • 간단한 웹 페이지 기획안을 HTML 문서로 표현할 수 있다.
  • id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미있는(Sementic) HTML 문서를 작성할 수 있다.
  • HTML5 semantic tag를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시멘틱한 HTML 문서를 작성할 수 있다.

3.2 HTML 기본 구조와 문법

  • HTML 문서의 구조와 콘텐트를 다루는 언어다. 프로그래밍 언어인 자바스크립트와는 다르다. 문서의 틀을 만드는 거다. 우리가 보는 웹 페이지들은 모두 html로 구성이 되어 있다.

  • HTML은 Tag들의 집합이다.

  • Tag : 부등호로 묶인 HTML의 기본 구성 요소다.

  • 트리 구조 : 태그들이 부모-자식 관계의 트리 구조로 짜여진다.

  • self-closing tag : 여는 태그만 있고 닫는 태그가 없는 경우

  • 부가적인 속성이 필요한 태그들이 있다. 그런 경우에는 속성과 값을 추가해준다.

가장 많이 쓰이는 태그들

모든 태그들을 다 알 필요는 없다. 주요 태그들만 알면 웹페이지를 만드는데 문제 없다.

<div> vs <span>

  • div와 span의 차이는 차지하는 공간의 크기다.(크롬 개발자 도구에서 확인해볼 수 있다.)
    • div 태그는 한 줄을 차지하고, span 태그는 콘텐츠 크기만큼 공간을 차지한다.
    • 물론 css로 자유롭게 스타일링 할 수 있지만, 기본 디폴트 값은 그렇다고 생각하면 된다.

<img>

  • 이미지를 삽입하는 태그로 self-closing 태그다.
  • 키와 밸류 값을 가진다.

<a>

  • 눌러서 이동하는 게 HTML 문서의 가장 큰 특징 중 하나라고 볼 수 있다.
  • <a> 엘리먼트는 anchor(닻; 배의 위치를 고정)의 약자이다.
  • 다른 웹페이지로 연결되는 하이퍼링크를 HTML 문서에 표시할 때 사용하고, 주로 href 속성과 사용된다.
<a href="https://naver.com" target="_blank">Go to Naver</a>

<ul> & <li>

  • 둘 은 하나의 쌍이다.
  • ul과 li의 부모 자식 관계는 고정적이라고 생각했는데, 서로 바뀌는 때도 있겠구나. 하나의 li에서 또 ul-li가 있을 수 있으니까.
  • ol로 바꾸면 넘버링이 된다. 
<ul>
  <li>커피마시기</li>
  <li>노래부르기</li>
  	<ul>
      <li>k-pop부르기</li>
      <li>샹송부르기</li>
    </ul>
  <li>맥주마시기</li>
</ul>

<input> <textarea>

  • radio type에서 주의할 점은 옵션들을 하나의 그룹으로 묶어줘야 한다는 것(name을 같은 이름으로 설정)
  • checkbox type은 원하는 만큼 복수로 체크할 수 있다는 점이 위와 구별된다.
  • textarea는 줄바꿈이 되고 여러줄을 입력할 수 있는 폼이다.

<button>

<div>
  ID<input type="text" placeholder="type here">
</div>  
<div>  
  PASSWORD<input type="password" placeholder="password">
</div>
<input type="radio" name="firstgroup" value="a">a
<input type="radio" name="firstgroup" value="b">b
<input type="checkbox">love
<input type="checkbox">friendship
<textarea></textarea>
<button>submit</button>

3.3 HTML 퀴즈

  • 태그는 opening/closing tag로 구성되고, 두 태그 사이에 콘텐츠를 넣는다.

    • opening 태그 안에 속성(attribute)를 넣을 수도 있다.
    • 이 모든 걸 아우러 HTML Element(요소)라고 할 수 있다.

  • HTML 속성(attribute)는 두 가지로 구성된다.

    • attribute name(속성의 이름)
    • attribute value(속성의 값)

  • JavaScript는 본래 브라우저에 웹 문서를 표현하기 위한 스크립팅 언어였다.

    • 자바스크립트 실행을 위해 <script> 앨리먼트가 사용된다. <script src="javascript.js"></script>
    • 현재는 node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱 / 프로그램을 만들 수 있는 범용적인 프로그래밍 언어로 사용된다.

  • 웹 문서 표준을 서술하는 언어는 없고, HTML Living Standard 에서 상세한 웹 표준을 제시한다. 다만, 개발을 위해 모든 내용을 숙지할 필요는 없고 MDN이 가장 신뢰성 있는 공식 문서로 참고하기 좋다.

  • <p> 엘리먼트

    • paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용된다.
    • HTML 문서 작성 시, 가능하면 이 엘리먼트의 본래 목적에 맞게 사용한다.

  • <section> 엘리먼트

    • 웹페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용된다.
    • HTML5 표준 탄생으로 생겨난 시맨틱 엘리먼트(프로그래밍에서 의미론은 코드 조각의 의미를 나타낸다)의 일부이다.
    • <div>는 HTML5 이전에는 구역을 나타내기 위해 사용했지만, 지금은 큰 구역의 구분을 위해 사용되는 것은 지양된다. 작은 구역에서 불가피하게 사용하는 최악으론 괜찮다. 참조해준 스택오버플로우 링크를 보니 view it as an element of last resort, for when no other element is suitable이라고 하고 있다.

4. 아고라 스테이츠 피드백

일 잘하는 법

  1. 업무 매뉴얼을 잘 숙지한다.
  2. 매뉴얼에 없다면? 선임/경험자에게 물어본다.

질문하는 것은 일의 대부분을 차지한다.

일 못하는 법

  • 자기가 하고 싶은 말, 자기 말만 한다.

업무 현장에서의 소통은 담소가 아니다. 필요한 말을 구체적이고 명료하게 전달하는게 포인트다.

개발 현장에서 질문 잘하는 법

  • 일을 잘하기 위해서는?
    • 이전에 작성된 코드를 본다.
    • 코드 인벤션을 읽어본다.
  • 완전 새로운 코드를 작성해야 한다면?
    • 선임/경험자에게 물어보고, 선조 개발자를 찾는다. 이 말은 StackOverFlow의 답변을 찾아보아라.
    • 이미 답변된 질문을 또 물어볼 필요는 없다. 검색을 먼저!
  • 검색이 어렵다면?
    • Stackoverflow discussions vs Github discussions
    • 구글링을 하더라도 공신력 있는 사이트를 먼저 참고한다.
      • 1순위 : Urclass, Javascript.info(참고서), MDN
      • 2순위 : 두꺼운 개발책, Spec(EcmaScript, HTML Spec), github => 영어사전이나 교수님 영어사전 격
      • 자바스크립트는 해외에서 더 많이 사용되기 때문에 영어 자료가 정확한 것이 더 많다.
    • 위 사이트 이후에 좋은 답변을 찾으려면?
      • 영어 질문 검색 시 how to를 붙여서 검색한다. 단순 키워드보다는 동사를 붙여서 구체적으로.
      • 그래도 모르겠다면 아고라 스테이츠를 활용하면 된다.

QnA

  • 공부할 때 구현과 학습에 대한 조화 비율을 잘 맞춰나가야 한다.

  • Front vs Back

    • 하다 보면 알게 된다. 신입을 준비할 때는 가능하면 하나를 선택해서 가는 게 좋다. 이건 취향의 차이다.
      • 프론트는 변화가 많다. 경력을 쌓았는데도 불구하고 갑자기 새로운 게 나와서 다시 공부해야 하는 경우도 생긴다. 프론트는 꾸미는 게 많고 눈에 보이는 게 많다. 흥미가 있으면 프론트를 더 잘하게 된다. 꼭 있어야 되는 건 아니지만 감각도 있으면 좋다.
      • 프론트엔드가 신입개발자로 잡이 더 많은 것도 특징이다.
      • 백엔드는 컴퓨터 공학적인 지식을 많이 알아야 하고, 엄밀하고 분명한 거 좋아하시는 분들이 어울린다.

  • 삽질하는 시간도 중요한 경험이 될 것이다. 시간 투자하는 만큼 늘고, 계단식으로 늘 것이다.

  • 문제를 풀기 위해 수도 코드를 짜보려는데... 아무 생각도 안 나고 하면?

    • 개발자는 머리를 써야 하는 지식 노동자다. 그러므로 문제가 안 풀리면? 주무세요/걷다 오세요/밥 먹고 쉬세요/다음 문제 푸세요.

  • 컴퓨터 사이언스를 공부하면서 이해가 안 되면, 이해한 만큼만 공부하고 넘어가고 다시 공부해도 괜찮은가?

    • 정답이다. 개발자들이 컴퓨터 공학에 대한 걸 완전히 이해하고 일을 하진 않다. 원리를 모두 알아야만 하는 건 아니다. 우선은 대략적인 부분을 많이 아는 게 중요하다. 0 - 70까지 공부를 하는데 1이라는 시간이 걸린다면, 70-90까지는 2가 걸린다. 그 다음에 3이 걸린다. 이 경지가 장인이 되는 순서가 인 것 같다.

  • 코드 스테이츠 수강생 출신으로, 평일에는 숨 쉬는 것 빼고 코딩만 했던 것 같다.

5. 동기부여 세션

  • 오늘의 목적 : 스스로에게 동기를 부여한다.

  • 구직활동 : 자신의 부정적인 감정을 다스리고 구체적 계획을 세우고 그것을 실행하도록 하는 힘을 갖는 것.

  • 언어는 정신과 육체를 움직이는 힘을 가지고 있다.

  • 부정을 기억하기 더 쉽다. 앞으로 나에게 무슨 말을 해주고 싶은가?

  • 패러다임 쉬프트 : 정답이 있는 것은 아니고, 무엇을 바라보고 싶은가?

  • 나만의 취업 목표 만들어보기

다짐 : 결과는 신에게 맡기고, 과정을 즐기자. 나는 완벽하지 않다. 실수와 실패에서 성장한다.

1. 희망 취업 기업
  - 콘텐츠 기업(왓챠)
  - 좋은 에너지, 좋은 실력을 가진 팀원들이 있는 회사. 나의 직감대로.  
2. 희망 연봉 : 3천만원
3. 희망 직무 : 웹 프론트 엔드 개발자

  • 연구 결과에 따르면 성공한 사람들의 진로 선택 이유의 80%가 우연적인 사건에서 비롯되었다고 한다.

  • 계획된 우연

    • 우연한 일들을 기회로 인식하고 진로에 유익한 행동을 촉진하는 것이다.
    • 우연 기회를 만드는 탐색과 우연 기회를 잡는 기술이 필요하다.

  • 5가지 우연 기술 : 호기심, 인내심, 유연성, 낙관성, 위험감수

  • 최근 동기생 취업률은 85%. 평균 연봉 3240만원.

  • 네카라쿠배, 좋은 스타트업 보다는 현실적인 커리어 전환을 목표로. 계단식으로 성장하고 이직을 목표로.

  • 걱정보다는 기대를 갖자.

  • 개발자가 되기로 결심한 이유를 블로그에 정리해봐라. 비전공자 출신이라면 면접 가서 질문 많이 받는다.

profile
SURI
Every step to become a better version of me 🚶‍♂️ 블로그 이사중
이전 포스트

JavaScript | 반복문

다음 포스트

CSS | CSS 기초

0개의 댓글