이 글의 범위 : 수업소개부터 ~ 부모 자식과 목록 까지
기획
'남의 문제를 통해서
코딩을 배우려는 학생이 아니라
나의 문제를
코딩으로 해결하려는
엔지니어라고 상상해라'
따라서 나는 내가 알바하는 학원에서 정말 너무너무 불편해서 미쳐버릴 뻔했던 작년 컨설팅 예약관련된 웹사이트를 만드는 것을 이번 독학의 목표로 잡았다.
HTML 코딩 실습 환경 준비
바탕화면에 web폴더 생성
visual studio code에 들어가서 open folder로 "web"폴더를 연다.
web폴더 옆의 new file을 클릭하여 1.html이라는 파일을 만든다. (웹페이지 생성)
hello world를 작성하고 저장한 후 웹브라우저에서
- 윈도우 : Ctrl + O(알파벳)
단축키를 입력하여 방금 만든 파일을 선택하면 웹브라우저로 웹페이지를 열 수 있다.
기본 문법 - 태그
- strong, u 등을 HTML에서는 태그(TAG)라고 부른다.
- 닫히는 태그는 태그명 앞에 /를 붙인다.
- 태그 중첩 가능하다.
- 단일?태그:무엇인가를 설명하지 않는 태그들은
감싸야하는 컨텐츠가 없기 때문에
태그를 닫지 않아도 된다. ex)</br>
<strong></strong> - 강조
<u></u> - 언더라인 밑줄
<h(n)></h(n)> - HTML제목정의
<h1> to <h6>tags are used to define HTML headings
<br> 줄바꿈 태그 , 닫히는 게 없음
<p> 문단 나누기 </p>
p 태그는 단점이 있습니다.
단락과 단락의 간격이 고정되어 있기 때문에
시각적으로 자유도가 떨어집니다.
해결:
<p style="margin-top:45px;">
CSS를 통해 더욱 정교하게 간격을 나눌 수 있다.
(HTML이 정보를 표현한다면,CSS는 정보를 꾸며줍니다.)
style="margin-top:45px"를 추가하면
p 태그의 위쪽에 45px 만큼의 여백(margin)이 생깁니다.
중요한 것은
<br> 보다 <p>가 좋은 이유를 이해하는 것입니다.
p 태그를 통해서 단락의 경계를 분명히 하면서
CSS를 통해서 p 태그의 디자인을 자유롭게 변경할 수 있기 때문에
br 태그 보다 p 태그가 더 좋은 선택입니다.
[before] css 활용 전 고정된 단락의 경계
[after] css 활용 후 자유로운 단락 경계 표현
<h1>[25민사대비반] 1:1 자소서 컨설팅 신청📚</h1>
1차 컨설팅 진행 기간: <strong>8/6(화)~8/18(일)</strong>
<p style="margin-top:45px"><📑컨설팅 준비물>
<br>
- 생기부
<br>
- 노트북 or 태블릿 </p>
<p><🚨안내 사항>
<br>
- 정확한 날짜는 강의실 및 컨설턴트 배치에 따라 정해진 후 공지 드립니다.
<br>
- 컨설턴트 일정에 따라 대면 컨설팅이 아닌 ZOOM(실시간 화상통화)으로 대체될 수도 있습니다.</p><img> 이미지 첨부 태그
<li>목차를 표현</li>
<ul>목록과 목록을 구분</ul>
- li의 부모 태그
- 목록은 다른 목록과 구분할 수 있도록
경계가 필요한데 이 때 사용하는 태그가<ul>태그 - unordered list의 약자
<ol>ul태그 + 순차</ol>
- li의 부모 태그
- 항목의 순서를 매기며 목록의 경계를 두는 태그
- ordered list의 약자
속성(attribute)
태그를 만든 사람들은
태그 이름만으로는 정보가 부족하다는 것을 알게 되었고 새로운 문법을 도입하게 되는데 그것이 바로
속성(attribute)이다.
속성 적용 예제)
<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png">
- 위의 코드에서 src가 속성
- 또 속성의 값인 주소는 이미지의 주소로 인터넷에 있는 이미지이다.
내 컴퓨터에 이미지가 없어도 표시할 수 있다. - 내 컴퓨터에 있는 이미지를 표시하고 싶다면 VSC에서 프로젝트 폴더에(현재 web이라는 폴더) 이미지를 위치시키고 src 속성의 값으로
이미지 파일의 이름만 적어주면 된다. - 이미지의 크기를 조절하고 싶으면 width 속성의 값으로
숫자나 %를 사용하면 원하는 크기로 조정한다.
<참고>https://advancedwebranking.com/html/ 전 세계에 있는 수많은 웹페이지를 분석하여 여러가지 통계자료 (자주쓰이는 태그 등)를 보여주는 사이트
