마크업이란
마크업 개발 / 마크업 언어
웹 페이지는 기본적으로 문서와 같다.
브라우저가 이해할 수 있도록 태그를 통해 웹 문서를 작성하는 것을 마크업 개발 이라고 한다.
태그 등을 이용해 웹 문서나 데이터의 구조를 명시하는 언어를 마크업 언어 라고 한다.
마크업 개발이 중요한 이유?
마크업 개발은 디자인과 개발의 오작교 역할을 한다.
웹 개발은 기본적으로 아래와 같이 진행된다.
기획 -> 디자인 -> 마크업 -> FE/BE 개발 -> QA -> 릴리즈
웹 서비스의 규모가 커지면 디자인 복잡도 와 마크업 복잡도 가 함께 증가한다.
디자인 시스템을 잘 유지-보수하기 위해서는 마크업의 역할이 중요하다.
HTML 이란
HTML 의 정의
HyperText Markup Language 의 약자를 의미한다.
- HyperText : 초월한 or 다른 페이지로 연결하는
- Markup : 데이터 구조
- Language : 언어
위 내용을 풀어서 정리하자면, 아래와 같다.
- 웹 문서를 구조화 하고, 그에 대한 의미를 나타낸다. (ex. 제목, 단락, 목록 ...)
- 구조적인 웹 문서를 만드는 방법을 제공한다. (ex. 링크, 인용 ...)
기본적으로 Markup Langauge 의 예로는 XML, HTML 등이 있다.
HTML 의 구조
html은 기본적으로 중첩 대칭구조로 이뤄져 있다.
** 하나의 Element는 아래와 같이 작성된다. **
<Tag attribute="value" ...> contents </Tag>아래와 같이 컨텐츠가 태그 자체에 포함이 되는 경우 닫는 태그를 작성하지 않아도 된다.
<img src="./" alt="">
<input type="text" placeholder="입력하세요.">HTML 공부 방법
모든 태그들을 외우는 것보다 직접 사용해보면서 자연스레 체득하는 것이 중요하다.
아래 사이트와 구글링을 통해 필요한 태그에 대한 정보를 찾을 수 있다.
HTML 예제 1
<input type="radio" id="female" name="gender">
<label for="female">여자</label>
<input type="radio" id="male" name="gender">
<label for="male">남자</label>input id 와 label for 를 연결하면 label 을 클릭해도 선택이 된다.
HTML 예제 2
<a href="www.naver.com" target="_blank">링크</a> 위와 같이 target 의 값을 _blank 로 설정해주면 새 창에서 링크를 열 수 있다.
Block 과 Inline Element
기본적으로 HTML Element 는 Block 과 Inline 으로 나뉜다.
먼저 Block 의 속성으로는
부모 Element의 전체 공간을 차지한다.- 브라우저는
block-level element의 앞과 뒤를 개행한다. - 좌우(가로)로 가능한 모든 너비를 차지한다.
<div>,<h1>,<p>,<ul>,<ol>태그 등이 있다.
Inline 의 속성으로는
- 컨텐츠의 흐름을 끊지 않고,
Element를 구성하는 태그에 할당된 공간만을 차지한다. <span>,<strong>,<img>,<input>,<a>,<button>태그 등이 있다.
HTML 은 Simantic Markup Language 이다.
Simantic 이란 '의미론적인' 이라는 의미를 가진다.
사람이 이해 가능한 의미이기도 하지만, 컴퓨터가 이해가능한 의미를 뜻하기도 한다.
HTML 은 문법에 그리 민감하지 않다.
실제로 위에서 말한 구조적인 규칙들을 엄격하게 지키지 않더라도 렌더링이 되는 경우가 많다.
그럼에도 불구하고 우리가 규칙들을 잘 지켜야되는 이유는
위에서 언급한 HTML 의 Simantic 한 특성들을 잘 이용하기 위해서이다.
사람도 코드를 봤을 때 의미를 쉽게 이해하고, 컴퓨터도 사람의 의도를 잘 이해해야
아래와 같은 일들을 잘 수행할 수 있다.
검색 엔진 최적화 (Searching Engine Optimization): 검색이 잘 되도록 하는 것.접근성 (Accessibility): 장애인과 같은 사람들에게 똑같은 웹 페이지 접근 환경을 제공하는 것.유지 보수 (Maintenance): 개발화면에서 코드만 봐도 전체 흐름이 쉽게 읽히도록 하는 것.
많이 사용하는 HTML Emmet
Emmet 이란 약어(Abbreviation)를 사용해 반복되는 코드나 구조를 가진 HTML, 또는 CSS, XML 코드를 빠르게 작성할 수 있도록 해주는 플러그인 을 의미한다.
쉽게 말해 단축키 정도로 생각하면 되겠다.
기본적으로 tag + tab키 를 통해 작동한다.
div <div></div>
div.class <div class="class"></div>
div#id <div id="id"></div>
div{안녕} <div>안녕</div>
div.item$*4
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
div>div
<div>
<div></div>
</div>
div>p+a
<div>
<p></p>
<a href=""></a>
</div>
div>p^a
<div>
<p></p>
</div>
<a href=""></a>
ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul>(li>a)*3
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>