1. INTRO
프론트엔드 개발 언어로는 HTML, CSS, JavaScript 가 있습니다. 오늘은 HTML과 CSS 의 기본 문법에 대해 학습한 내용을 정리해보았습니다.
2. HTML
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어입니다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하는 것입니다. HTML의 문법을 이해하기 위해 태그, 요소, 내용, 속성이란 무엇인지 알아보겠습니다.
- 태그
HTML 에서 사용하는 태그는 종류가 다양합니다. 공간을 구성하는 div 태그, 문단을 나타내는 p 태그, 수평선을 나타내는 hr 태그, 이미지를 나타내는 img 태그 등이 있으며 종료 표기 방법에 따라 다르게 표현할 수 있습니다. 프로젝트 시 필요한 태그를 검색해서 사용법을 알아두면 좋겠습니다.
<div>
<!-- 종료 태그가 없는 경우 ⇐ 빈 요소(empty element) -->
<hr>
<input type="text" name="age" id="age">
<br>
<img src="http://test.com/myimg.gif">
<!-- 종료 태그를 사용하는 경우 -->
<input></input>
<img src="http://test.com/myimg.gif"></img>
<!-- 자기 종료(self-closing) 태그 형태로 사용 -->
<input />
<hr />
<br />
<img />
</div>- 요소, 내용, 속성
요소(element)는 시작 태그 + 종료 태그 + 내용으로 구성되며, 내용(contents)은 다른 태그 또는 텍스트를 뜻합니다. 속성(attribute)은 태그를 처리할 때 필요한 내용, 모양, 동작, 식별을 위한 값들로 구성됩니다.
<div> 시작 태그와 종료 태그 사이에는 다른 또는 텍스트가 들어갈 수 있음 </div>
<img src="http://www.test.com/myimage.gif" ⇐ 이미 처리를 위해서 필요한 값
width="100" height="100" ⇐ 모양
style="border: 1px solid red; cursor: hand;" ⇐ 모양 ⇐ inline style
onclick="alert('clicked')" ⇐ 이벤트가 발생했을 때 동작을 정의
id="myimage" ⇐ 해당 문서에서 유일한 값
class="ourimage" ⇐ 해당 문서에 여러 개 존재하는 값
/>
<form action="요청을 전달할 주소"
method="요청을 처리할 방식을 지정"
enctype="인코딩 방식">
<input type="다양한 타입" />
<textarea></textarea>
<button></button>
</form>
3. CSS
CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어입니다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 정의하여 화면(Screen) 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어라고 볼 수 있습니다.
- 선택자 (SELECTOR)
CSS에서는 선택자의 개념을 알아두는 것이 중요합니다. CSS는 HTML 요소의 style(design, layout etc)을 정의하는데 사용됩니다. 이를 위해서 선행되어야하는 것은 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 합니다. 셀렉터는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단입니다. 선택자의 개념을 이해하기 위해 https://flukeout.github.io/ 에서 게임을 통해 학습할 수 있습니다.
- 반응형 웹 디자인 (Responsive Web Design)
웹 사이트 구성 시 layout은 방문자의 화면 해상도를 고려하여야 합니다. 하나의 웹사이트를 구축하여 다양한 디바이스의 화면 해상도에 최적화된 웹사이트를 제공하는 방법을 반응형 웹 디자인이라고 합니다. 화면 배율 설정은 viewport meta tag를 활용할 수 있습니다.
이 외에도 @media 선택자를 활용해 미디어 타입에 따라 스타일을 지정할 수 있습니다.
4. OUTRO
프론트엔드 개발 시작을 위한 HTML과 CSS의 기본적인 이론에 대해 학습할 수 있었습니다. 프로젝트를 진행할 때엔 화면 구성을 위해 필요한 태그, 선택자를 적절히 활용하는 것이 중요해보입니다.
[참고 문헌]
https://poiemaweb.com/
https://thebook.io/080203/
https://developer.mozilla.org/ko/
https://www.tcpschool.com/html/intro
