5일차 (HTML, CSS 기초) - HTML
5일차가 되는 오늘은 드디어 html에 대해서 배우기 시작했고, 한 주간 배웠던 것들을 되돌아보는 시간을 가졌다. html은 javascript기초에서 배웠던 것과 다르게 이는 웹페이지를 어떻게 구성하는지에 대한 언어로 여태까지 한 것과는 많이 달랐다. 그나마 위안이라면 학교 수업에서 잠시 접했던거라면 작은 위안거리가 됐다. 이제 배운 것들을 토대로 다시 정리를 해보겠다.
HTML
웹 페이지의 기본구성
- 기본적으로
html,css,javascript로 구성돼있다. html: HyperText Markup Language의 약자로, 웹 페이지 구조를 담당하는 Markup 언어이다. (구조)css: 디자인 요소를 시각화하는 스타일시트 언어이다. (스타일)javascript: 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있도록 해주는 프로그래밍 언어이다. (상호작용)
html은 웹페이지를 구성하는 뼈대가 되는 언어이다. (구조를 표현하는 언어)
HTML의 기본구조와 문법
html은 tag의 집합이다.html은 TreeStructure(트리구조) 다. 예를 들면, 트리에 자기 자신과 자식 노드가 있듯이 부모노드와 자식노드의 형식이다.- tag 는 부등호(<>)로 묶인
html의 기본 구성요소이다. .html의 확장자를 사용한다.- 직접 visual studio code를 통해 작성해본 html이다.
스크린샷 1)
스크린샷 2)
위의 사진과 같이 실습을 수행했는데, 기본적인 것을 정리하겠다.
- 보통 <~>으로 블록이 시작하고 </~>의 형태로 블록이 끝난다.
<!DOCTYPE html>: 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정한다.html의 선언이라고도 할 것이다. 이에 대해 더 알고 싶으면 이 링크로 들어가서 확인해보자.- <
html></html> : html의 시작태그이다. 문서 전체의 틀을 구성한다. - <
head></head> : 문서의 메타데이터를 선언한다. - <
title></title> : 문서의 제목을 나타내며, 브라우저의 탭에 보여진다. - <
body></body> : 문서의 내용을 담는 곳이다. - <
h1></h1> : heading을 의미하며, 크기에 따라 h1~h6까지 존재한다. - 태그 내부에 내용이 없다면(<
tag></tag>와 같이..),<tag/>와 같이 표현할 수 있는데 여기에서 /는 생략할 수 있다 (위 스크린샷 1) 에서 18번째 라인과 같이 사용한다.).
자주 사용하는 html의 tag 들이 있다. MDN의 html 요소 참고서 활용. 위의 코드를 실행한 결과를 가지고 정리해보겠다.
-
<div>(Division)와<span>(Span)
<div>는 한 줄 전체를 차지하며,<span>컨텐츠 크기만큼만 차지한다. 이 차이가 이 둘의 가장 큰 차이다. 코드와 그림을 비교해서 보길 바란다. (line 11 ~ 16)<div>div 태그는 한 줄을 차지합니다</div> <div>division 2</div> <span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다</span> <span>span 2</span> <span>span 3</span> <div>division 3</div> -
<img>는 바로 이해할 수 있듯이 이미지 삽입이다. 아래와 같이 사용한다. (line 18)<img src = "https://i.imgur.com/JAVj4t0.jpg"> -
<a>: Link로 링크를 삽입한다.<a href="https://naver.com" target="_blank">네이버</a>href는 사이트 주소이며,target은 옵션에 blank를 주어 빈 탭에서 열리도록 한다.
-
<ul>&<li>&<ol>:ul과ol은 각각unordered list,ordered list의 약자다.ul을 사용하면 검은색 점과 같이 리스트를 나타내며,ol을 사용하면 숫자로 리스트를 나타낸다.<li>는 그 해당 리스트의 item을 나타낸다.<ol> <li>Item 1</li>: 오그래오 <li>Item 2</li> <li>Item 3 has nested List <ol> <li>Item 3-1</li> </ol> </li> </ol> -
<input>과<textarea>는 html에서 다양한 입력폼을 제공한다.
radio는input중 하나이며,name옵션으로 그룹을 지어준다. 그리고checkbox는 여러 개가 선택가능하다.
<textarea>는<input>과 다르게 멀티라인(줄바꿈)이 되는 입력폼이다.<div> ID : <input type="text" placeholder="여기에 입력하세요"> </div> <div> Password : <input type="password"> </div> <div> <input type="checkbox">아이디 기억하기 </div> <div> a <input type="radio" name="choice" value="a" > b <input type="radio" name="choice" value="b" > </div> <textarea></textarea> <div> <input type="checkbox" checked> checked <input type="checkbox"> unchecked </div> -
button: 버튼이 있어야 전송같은 작업을 할 수 있다. 예를 들면, 웹페이지에서의 과제제출 누르기 같은 것이 있겠다.<button>제출하기</button>많은 태그들은 아니었지만, 막상 이것들만 사용해도, 아직은 보완해야 할 것이 많지만, 웹 페이지의 구성을 실습을 통해 해볼 수 있었던 것 같다.
아래 결과는 위의 과정들을 실행하고나서의 결과다.
-
<pre>: 미리 서식을 지정한 텍스트를 나타낸다. 예를 들면<pre> dd dd lll --> lll 을 보여준다. </pre> -
<nav>는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. 자주 쓰이는 예제는 메뉴, 목차, 색인이다.
HTML 문제를 풀며 정리한 것
html element의 tag는 보통 opening tag와 closing tag로 구성되어, 두 tag 사이에 컨텐츠를 넣어서 구조를 표현한다.html의 속성(attribute)는 두 가지로 구성된다(attribute name, attribute value)<script> element는 자바스크립트 실행을 위해 사용된다.
ex)<script src = "ppp.js"></script><p> element는 paragraph의 약자로, 하나의 문단을 표현하기 위해 사용한다.<section>은 웹페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용된다.
이는 의미있는 엘리먼트인데 이를 시맨틱 엘리먼트라고 한다- 블로그의 제목같은 경우는
<h1>을 사용하는게 적절하다고 한다.
마치며, 그리고 1주일
오늘은 html의 기초에 대해서 공부를 해봤다. 학교 다닐 때 정말 잠시 사용해본 것 말고는 접해본 적이 없어서, 적응하는데에는 꽤 시간이 걸릴 것 같다. 하지만 오늘 실습을 해보면서 이제야 모르는 것을 배우면서 터득할 수 있고 고생길이 시작될 것 같은 예감이다. 그리고 부트캠프를 시작한지 이제 1주일이 됐다. 처음에는 비교적 쉬운 개념을 익혔지만, 해보지 않은 것들을 접하니 꽤 어려움이 있었던 것 같다. 하지만 여기에서 제공해주는 페어와 함께 과제를 진행하는 PairProgramming은 나와 페어에게 많이 도움이 되는 것을 느꼈다. 거의 모든 과제가 페어와 함께 진행하는 것인데 커뮤니케이션 능력을 잘 늘려나가야 할 것 같다. 역시 이 모두를 잘 수행해서 당당히 개발자로 나아갈 것이다. 앞으로도 더 열심히 해보자!! 레츠기릿~!
Reference
- 코드스테이츠(CodeStates) 강의자료
