웹 브라우저란?
웹 브라우저의 역할
사용자 - 브라우저 - 서버 형태로 이루어져 있다.
HTML 문서(파일)를 읽어서 화면으로 출력해주는 역할을 한다.
인터넷에 연결돼있지 않아도, HTML 파일이 있으면 브라우저가 웹을 출력해줄 수 있다.
즉, 일종의 viewer라고 생각해도 된다.
종류로는 크롬, 사파리, 엣지, 파이어폭스, 오페라 등이 있다. 모바일에서는 삼성인터넷, 구글브라우저, 키위브라우저 등이 있다.
프론트엔드 개발을 할 때, 어떤 브라우저를 사용하여도 동일한 화면이 출력될 수 있도록 해야한다.
(그렇다면, 왜 이렇게 여러개의 브라우저가 출현하게 됐을까? 이유는 각 회사들이 자신들의 서비스를 이용하도록 유도하기 위함이다. 이를 통해 사용자를 끌어들이고 수익창출을 하기 위함이다.)
크롬 브라우저가 가장 인기가 많은 이유는 Javascript를 실행함에 있어 가장 속도가 빠르기 때문이다.
초기의 브라우저는 HTML 문서를 불러와 출력하는 정도에 그쳤었다.
(ex. Mosaic Browser, Internet Exploler)
인터넷 익스플로러가 도태된 이유는 독자적인 언어를 사용하며 Javascript의 발전을 따라오지 못했기 때문이다. 이를 위해 Edge라는 브라우저를 새로 개발하기에 이르렀다.
로컬호스트에서 로컬이란 용어는 무엇을 의미할까?
자기 자신의 컴퓨터를 의미한다. 서버라는 것은 다른 컴퓨터에서 내 컴퓨터에 접근할 수 있다는 개념이다.
(ex. '로컬에서 테스트 해봤냐?' 라는 의미는 너의 컴퓨터에서 확인해보았냐는 의미이다.)
서버 컴퓨터의 특징으로는 CPU의 성능이 좋아야 한다. 많은 사용자가 접속했을 때, 원활한 서비스를 제공하려면 CPU의 성능에 신경 써야 한다. GPU가 필요하지 않고, 모니터를 사용하지 않는 경우도 있다.
(GPU는 단순계산이 매우 빠르다. CPU와는 다른 특성을 가지고 있다. GPU가 가진 연산 특성으로 인해 머신러닝, 마이닝, 3D 그래픽 연산 등에 주로 쓰인다.
HTML이란 무엇인가?
HTML이란 HyperText Markup Language을 의미한다.
HyperText란 다른 문서로 이동하게 해주는, 연결 해주는 것을 의미한다.
Markup Language란 구조를 나타내기 위한 언어라는 것을 의미한다.
Element란?
'<>'를 사용하여 시작하고 '</>'를 사용하여 끝나는 전체를 의미한다.
코드를 잘못 입력하여도, 뷰어(크롬)에서 오류를 스스로 수정하여 출력해주기도 한다.
VSC는 프로그래밍, 코딩을 할 때 사용하는 편집기의 한 종류이다. 여러가지 추가기능(extension)을 사용할 수 있기에 편리하다. VSC의 특징으로는 파일 기준이 아니라, 하나의 폴더를 기준으로 한다는 점이다. 한 개의 파일에 모든 정보를 담을 수 없기 때문이다.
(VSC는 마이크로소프트에서 개발하였다)
HTML 코드 작성
: 해당 문서가 어떠한 문서로 작성돼 있는지 선언하는 것 (html이라고 쓰면 html5를 의미하는 것이다)head : metadata를 담고 있는 태그이다. 웹 브라우저를 열 때 표시되지 않는다. head에는 title같은 페이지나, css의 링크, 파비콘, 여러 메타데이터(작성자, 키워드 등)를 포함한다.
title : 브라우저의 제목 표시줄이나, 페이지 탭에 보이는 문서의 '제목'을 정의하는 태그이다.
div : 영역을 나누는 엘리먼트이다. div를 이용해서 웹페이지 상에서 일종의 그림을 그리는 것이다. 실제로 복잡한 웹페이지를 보게되면 div를 많이 이용한다. 네이버 웹페이지를 예시로 보면, 어떻게 영역을 나누고 부모-자식 관계를 설정하느냐가 매우 중요하다. 어떻게 구조를 짜느냐에 따라서 입력값도 완전히 달라지게 된다. 프론트엔드 개발을 함에 있어서 이 부분은 매우 중요하다.
태그를 열었으면, 반드시 닫는 것 까지 신경써야 한다. 만약 열거나 닫는 것을 까먹게되면 브라우저에서 임의로 열거나 닫아버려서 의도치 않은 결과가 생기게 된다.
h1 ~ h6 : 외부여백(마진)이 생기고 글자의 크기가 커진다. 각 엘리먼트마다 가진 모양과 특징들이 있다. 우리는 이것을 속성(attribute)라고 부른다.
해당 셋팅을 통해서 preettier가 형식상의 오류를 수정해주고, 저장 시에도 검토를 해서 수정해서 저장해준다.
html은 특정한 엘리먼트들을 제외하고, 입력된 값에 대해서 한 줄로 인식된다.
br : 줄바꿈을 해주는 엘리먼트이다. 혼자서 열고 닫음을 다 하는 엘리먼트이다. self closing tag이다. 이런 엘리먼트의 특징은 '자식'(컨텐츠)가 없다는 것이다.
뒤에 띄어쓰기를 한 후 /(슬래쉬)를 써주는 것은 가독성을 위하여 사람들 사이의 약속이다.
실제 크롬 브라우저의 개발자 도구를 통해 보면, 슬래쉬 없이 그냥 br 로만 적혀있는 것을 확인할 수 있다.
span : vsc 상에서 두개의 span을 썼는데 브라우저에서는 한 줄로 나타나게 된다. 이를 인라인 속성이라고 한다.
반대로 h1 같은 것을 블록 속성이라고 한다.
pre : pre 태그는 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용한다. 요소 내의 텍스트를 말 그대로 '그대로' 보여주게 된다. VSC 내에서도 prettier의 영향을 안 받는다. 입력한 대로 자유롭게 브라우저 상에 나타내고 싶을 때 사용한다.
ul / ol 과 li : ul은 unordered list / ol은 ordered list / li는 list item의 약자이다.
table 및 관련 태그들 : 테이블은 가로(row)로 먼저 정의하고, 그 이후에 셀(세로로 자르기)을 정의한다.
인라인 속성 vs 블록 속성 (매우 중요)
html 요소는 크게 블록 요소와 인라인 요소로 나눌 수 있다. 헷갈리기 쉬운 개념이고, CSS를 활용할 경우 매우 중요하기 때문에 확실하게 짚고 넘어가야 한다.
-
블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있다. 반면에, 인라인요소는 내부에 블럭 요소를 포함할 수 없다.
-
블럭요소들 중에서도 인라인요소만 포함할 수 있는 것들이 있다. : h1~h6,p
-
인라인요소를 css로 블럭화하여 내부에 블럭요소를 포함시킬 수도 있다. 브라우저에 보여지는데는 아무런 문제가 없지만 유효성에 어긋나게 된다.
블록 요소(Block element)
- 사용 가능한 최대 가로 너비를 사용한다. (기본 너비값은 100%)
- 전체를 차지하기 때문에 각 요소들이 수직으로 쌓인다. (한 줄에 한개만 배치된다)
- 크기값을 가질 수 있다. (width, height 속성등으로 크기를 지정 가능하다)
- 상하좌우 마진 & 패딩을 가질 수 있다.
- 레이아웃을 작업하는 요소로 적합하다.
< 주요 블록 요소들은 다음 과 같다 >
div p ul ol li h1~h6 form header nav footer section article aside table th td figure figcaption caption blockquote
인라인 요소(Inline element)
- 사용 가능한 필요한 만큼의 영역만을 사용한다. (컨텐츠의 너비 만큼만 사용)
- 요소들이 수평으로 쌓인다. (한 줄에 여러개 배치)
- 크기 값을 가질 수 없다. (width, height 같은 사이즈를 지정 할 수 없다)
- 상하 마진 적용 불가능 (다만, 좌우 마진은 가능 / 상하좌우 패딩도 가능)
- 텍스트를 작업하는 요소로 적합하다.
만약에 인라인 요소에 사이즈를 지정하고 싶다면?!
해당 tag의 attribute를 지정하여 가능하다. display: block; 또는 display: inline-block을 통해 블록 요소로 바꾸면 된다. (반대의 경우도 마찬가지)
< 주요 인라인 요소들>
span a em b strong video audio 등
인라인-블록 요소(Inline-blcok element)
- 기본 특성은 인라인이라 요소가 수평으로 쌓이지만, 블록 요소처럼 사이즈를 적용할 수 있다.
- 크기값을 가질 수 있다. (가로 너비 & 세로 길이 지정 가능)
- 상하좌우 마진 & 패딩을 가질 수 있다.
- 사용 가능한 필요한 만큼의 영역을 사용한다. (컨텐츠의 너비 만큼만 영역을 사용할 수 있다)
- 요소들이 수평을 쌓임 (한 줄에 여러개 배치, 인라인 요소라고 볼 수 있다)
<주요 인라인 블록 요소들 >
img input button
만약 각 요소들을 가운데로 정렬하고 싶다면?
블록요소라면 margin: auto;
인라인/인라인 블록 요소라면 부모 요소에 text-align: center; 를 통해 할 수 있다.
elements vs tags
HTML 요소(Elements)
element는 HTML 문서의 개별적인 구성 요소들을 의미한다. 시작태그와 종료태그로 이루어진 모든 명령어들을 의미한다. 시작태그와 종료태그를 묶어서 매칭(matching) 태그라고 부른다. 일부 HTML 엘리먼트는 콘텐츠를 가지지 않을 수도 있다.(ex.
, img등)
즉, Element(요소) = 시작태그(Opening) + 내용(Contents) + 종료태그(Closing)
elements vs tags ?
엘리먼트와 태그라는 용어를 혼동하기 쉽다. 확실하게 알고 넘어가야 한다.
엘리먼트의 구분
배치 관련된 스타일로 웹 문서에 삽입되는 요소들은 크게 '블록 요소'와 '인라인 요소'로 나눠진다. block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능하다. block element와 inline element의 차이점을 확실하게 알고 있어야 CSS를 보다 잘 활용할 수 있다.
margin vs padding
요소(element)는 위 그림 처럼 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. 파란 부분이 content이고, 초록색 부분이 padding, 그 밖에가 border이다.
padding은 content와 border사이의 '여유 공간' 이다. border 까지가 element이고, margin은 element 주위의 여백입니다. 다른 element와의 사이 공간이라고 할 수 있습니다.
p {
padding: 위 오른쪽 아래 왼쪽;
}
css에서 패딩을 한 번에 주고 싶으면 위와 같이 쓰면 된다.
위에서 부터 시작해서 시계방향으로 생각하고 쓰면 된다.
<p> About css margin and padding. ex parameter. </p>
<style>
p {
border: 1px solid blue;
padding: 20px 60px 40px 120px;
}
</style>
