💡 이번에 배운 내용
- Section1.
웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.- Unit4. HTML: 마크업 언어인 HTML의 기초를 학습한다.
느낀점
HTML, CSS는 예전에 학원을 다니면서 배웠고 관련 업무를 2년 넘께 했었다.
마크업시 항상 시멘틱 마크업과 구조에 신경쓰며 작업했던 기억이 있다. 그 때는 열심이었지만 지금은 추억이 되버렸다.
그래서인지 지난 시간 각종 자바스크립트의 개념과 각종 알고리즘을 풀며 고생했던 것에 비하면 이번 시간에는 그것보다는 좀 더 수월하게 공부할 수 있었다.
하지만 그 어느 것도 대충하지 넘어가지 않겠다!
키워드
마크업, HTML, 구조, 시맨틱(semantic)
학습내용
Ch1. 웹 개발 이해하기
HTML, CSS 작업시 필요한 VS Code를 설치하고 새 폴더, 새 파일을 작성해보았다.
Ch2. HTML 기초
HTML은 태그들(tags)로 구성된 요소들(elements)의 집합으로, 각 요소는 <html></html>처럼 여는 태그와 닫는 태그로 구성되어 있다. (<img/>, <br/>, <input>처럼 태그가 하나만 있는 경우도 있다. 이 때 '/'는 생략가능하다.)
HTML은 한 요소 안에 다른 요소를 삽입할 수 있으며, 이 때는 감싸는 요소는 부모 노드(node. 여기서는 요소와 노드가 비슷한 개념이다.), 감싸진 요소는 자식 요소가 된다.
부모와 자식간의 관계처럼 이를 가계도처럼 표현할 수 있는데 이를 트리구조라고 한다.
즉 HTML의 요소.노드들은 트리구조로 구성되어 있다.
가장 많이 사용하는 태그
HTML 태그에는 많은 종류가 있지만 아래의 태그들을 주로 사용한다.
| 태그 | 설명 |
|---|---|
| div | Division. 영역을 구분하는 태그(의미x) |
| h1~h5 | heading. 제목태그. 숫자가 높을수록 상위수준 |
| span | 콘텐츠의 일부분을 감쌀 수 있는 부분태그.(의미x) |
| a | anchor. 하이퍼링크 등을 나타낼 수 있는 태그 |
| img | 이미지 태그 |
| ul, li | Unordersed list, List item. 전체 리스트 목록과 개별 리스트를 표현하는 태그 |
| input | 사용자로부터 데이터를 입력받을 수 있는 태그. 종류가 많다. |
| button | 버튼 역할을 하는 태그 |
웹 앱을 만들기 위해서는 input태그가 중요하다.
<div>
<input type="text" placeholder="이름을 입력하세요">
<!-- 라디오는 다중선택 불가(name값이 같으면 같은 그룹) -->
<div>
<input type="radio" name="성별" value="male"> 남
<input type="radio" name="성별" value="female"> 여
</div>
<!-- 체크박스는 다중선택 가능 -->
<div>
<input type="checkbox" checked> 체크됨
<input type="checkbox"> 체크안됨
</div>
<div>
<label>내용을 입력하세요</label>
<textarea></textarea>
</div>
</div>시멘틱 태그(Semantic Tag)
검색 엔진에서 검색할 때를 대비해, 협업을 위해서 등 여러 이유로 의미가 있는 태그를 사용할 태그가 있다. 예를들어 제목요소에는 h태그를, 사이트의 헤더 영역에는 header를 사용하는 것 등등.
아래는 이러한 용도로 사용하는 시멘틱 태그들이다.
| 태그 | 설명 |
|---|---|
| header | 사이트의 제목을 비롯한 머리 부분. 보통 페이지, 섹션의 가장 윗부분으로 로고, 상단바, 검색창 등을 포함한 영역 |
| footer | 사이트의 아래 부분. 보통 페이지, 섹션의 가장 아랫부분으로 라이선스, 주소, 연락처 등을 포함한 영역 |
| nav | 내비게이션(navigation). 사이트를 안내하는 내용을 포함. 보통안에 <ul>,<li>을 사용해 메뉴 등을 목록 형태로 사용 |
| section | 콘텐츠를 기준으로 영역을 구분하는 태그. div와 달리 시멘틱한 요소이다. |
| main | 문서의 주된 콘텐츠를 표시 |
| article | 기사글. 주요한 내용을 가진 독립적인 개별 콘텐츠를 포함한 태그 |
| aside | 주요 부분을 제외한 부수적인 부분의 콘텐츠를 담은 태그. 사이드바,광고창 등 |
Ch3. HTML 심화
각 태그에는 id, class 등의 속성을 부여할 수 있다.
id와 class는 선택자(selector)로 표현이 가능하다.
선택자에 대해서는 나중에 CSS파트에서 좀 더 자세히 공부할 예정이다.
- id(선택자 #): 고유한 이름을 붙이는 속성이다.(id는 HTML문서 내에서 중복되면 안된다.)
- class(선택자 .): 중복이 가능한 이름을 붙이는 속성이다. 같은 이름의 class속성을 가진 태그들에는 일괄 작업이 가능하다.
질문해보기
1. HTML 내의 <script>의 위치
script태그는 HTML 내에서 자바스크립트 등의 코드를 작성할 때 사용하는 태그로 마지막 body의 닫는 태그 이전에 위치하는 것이 좋다.
왜냐하면 브라우저가 웹페이지를 렌더링 할 때 작성된 순서대로 불러오기 때문이다.
- 만약 자바스크립트에서 HTML요소들을 참고하는 경우 그 전에 HTML요소들을 불러오지 못하면 코드가 제대로 작동하지 않을 수 있다.(물론 해결책이 아예 없는 것은 아니지만......)
- 대부분 속도에 큰 차이가 없겠지만, 사용자 입장에서 보이지 않는 자바스크립트 코드보다 HTML, CSS 화면부터 먼저 보이는 게 좋다.
참고: <script> 요소를 HTML 파일의 맨 아래쪽 근처에 둔 이유는 HTML은 파일 내에 나타나는 순서대로 브라우저에 로드(load)되기 때문입니다. 만약 자바스크립트가 먼저 로드되고 자신의 아래 쪽에 있는 HTML에 영향을 준다고 하면, 영향을 줄 HTML 보다 먼저 자바스크립트가 로드되기 때문에 작동하지 않을 것입니다. 따라서, HTML 페이지의 맨 아래쪽 근처에 자바스크립트를 두는 것이 최고의 전략입니다.
출처: javascript MDN - javascript 기본
2. 블록(block) 요소 VS 인라인(inline) 요소
- 블록(block) 요소
블록 요소는 항상 줄바꿈되며, 브라우저는 자동적으로 요소의 앞 뒤에 공간을 할당한다.
블록 요소는 항상 좌우로 브라우저만큼 최대 넓이를 가진다.
(기본적으로 css상 width, height, padding, margin 을 부여할 수 있다.) - 인라인(inline) 요소
대표적인 블록 요소로 p와 div가 있다.
인라인 요소는 줄바꿈 되지 않으며 필요한 만큼의 너비를 차지한다. 대표적으로 span요소가 있다.
(기본적으로 css상 width, height, padding, margin을 부여할 수 없다. 물론 방법이 없지는 않다.)
3. HTML에 대한 기초적인 내용부터 상세한 내용까지
아래의 사이트에 들어가면 기초부터 상세한 내용까지 직접 해보며 공부할 수 있다.
사이트 : w3Schools-HTML Tutorial
4. 간단한 HTML 구조와 웹 사이트 코드 엿보기
마찬가지로 w3SChools에서 비교적 간단한 구조의 웹사이트의 HTML, CSS, Javascript 코드를 볼 수 있으며 데모와 실제로 직접 수정하거나 만들어 볼 수 있는 환경도 제공한다.
사이트 : w3Schools-We.CSS Templates
