2022-10-17 강의 내용
- 강의 수업자료 1~5 참고
- 웹이란 무엇인가
- HTML 기초
- HTML 글자태그
- HTML 이미지, 링크 태그
- HTML 시멘틱 태그
html의 기초
- html과 속성은 대소문자 구분이 없다. 하지만 통일성을 위해 소문자로 통일하는것이 좋다.
- 기본적으로 시작과 종료태그는 동일해야한다. 따옴표 포함
속성
- 속성은 여러개 사용이 가능하다.
- 불필요한 공백은 쓰지않는다 (예시 1-1)
예시 1-1
<img src ="heart.jpg" width=" 100"
width 앞에 공백이 있는것을 확인 할 수 있다
이러한 불필요한 공백은 html:5 표준에 어긋난다.- 속성값은 반드시 따옴표(" ")로 묶지않아도 된다. 단 빈칸이 있는 경우 반드시 사용 (예시 1-2)
예시 1-2
<div src =“images/video images/funny.jpg>
위와같이 속성값에 띄어쓰기가 있을경우 images/video 까지만 읽히고 그 뒤에 있는 코드는
읽히지 않으므로 속성값에 띄어쓰기가 있을경우 꼭 따옴표를 써주어야 한다.html의 기본구조
- 모든 html태그는 <html> 태그안쪽에 입력되어야한다.
- lang 속성: 해당 페이지가 어떤 언어로 작성되었는지 알려주는 속성 ko en ja zh
- head: 다양한 외부시트를 연결 시켜주고 다양한 속성을 넣을 수 있다.
- body : 실제 사용자에게 보이는 부분
html 글자 태그
- title속성은 마우스오버시 툴팁을 달아준다.
- p 태그는 단락으로 끊어지기 때문에 위아래 공백이 발생하게 된다.
- 줄바꿈을 하고싶다면 <br/> 태그를 사용하자 <br> 태그는 닫히는 태그가 없어도 되지만 습관적으로 닫아주어야한다.
태그나 특수문자를 "텍스트" 로 웹상에서 처리하고 싶을때는 엔터티, 코드값을 입력해주면 된다
- (한 칸 띄어쓰기 여러번 사용하면 사용한 만큼의 띄어쓰기가 된다.)
- < ( < ) > ( > ) 가 가장 흔하게 쓰이는 특수문자이다
<pre> 태그는 엔터, 스페이스를 포함하여 vs코드를 이용하여 입력한 값 그대로 출력하고 싶을떄 써준다.
html글자 태그중에는 텍스트 자체를 꾸며주는 태그와 웹 접근성을 위한 태그 두 가지가 존재한다
| <b> | 폰트를 굵게 쓴다. |
| <strong> | 폰트를 굵게 쓰고 강조의 의미로 읽힌다. |
| <i> | 폰트가 기울어 진다. |
| <em> | 폰드가 기울어지며 강조의 의미로 읽힌다. |
글자모양을 바꿔주는 태그 안쪽에 제목글자 태그와 본문 글자 태그는 넣을 수 없다.
<i>
<h1>웹 표준 위반</h1>
<p>웹 표준 위반</p>
</i>
<p>
<i>가능합니다</i>
</p>
<a href >의 기능
-눌렀을때 이동하는 태그
1. 파일명 지정
- 메인,소개,홈 등 각각의 .html 페이지로 이동하게된다. 이러한 기능을 이용하여 메뉴를 눌렀을때
해당페이지로 옮겨가게 해준다.
2. url 지정
- 지정한 url 로 이동하게 해준다.
- 이미지에 링크를 걸기 위해선 a > img 로 써준다.
3. id를 지정하여 해당 홈페이지 혹은 해당 스크롤로 이동
- 아주 긴 홈페이지가 있다고 가정해보자 최상단에서 중간에 있는 메뉴를 찾기란 어렵다.
이럴때 id값을 사용하여 최상단에 메뉴를 클릭하여 중간이나 하단에 있는 내용을 손쉽게 찾을 수 있다
대표적인 사이트로는 나무위키가 있다.
- id값은 페이지에서 유일해야한다. 중복되면 안된다.
고정되어 있는 메뉴단에는 #id명
가고자하는 제목단에는 id명을 써준다.
이때 ul의 자식에는 li가 있기때문에 ul>li>a 순서로 링크를 걸어주어야한다.
<ul>
<li><a href=""></a></li>
<li><a href="#what">What is Lorem Ipsum?</a></li>
<li><a href="#why"> Why do we use it?</a></li>
<li><a href="#where">Where does it come from?</a></li>
</ul>
<h2 id="what">What is Lorem Ipsum?</h2>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like
<p>
<h2 id="why">What is Lorem Ipsum?</h2>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like
<p>
<h2 id="where">What is Lorem Ipsum?</h2>
<p>
It is a long established fact that a reader will be distracted by the
readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
as opposed to using 'Content here, content here', making it look like
<p>
a태그 속성중엔 링크를 새 탭에서 열어주는 속성이 있다. target
오디오, 비디오 태그
오디오, 비디오 태그는 속성값을 똑같이 추가할 수 있는데
자동 재생기능 autoplay, 재생이나 일시정지 바를 사용할 수 있는 controls , 음소거인 muted가 가장 많이 사용된다.
오디오 삽입태그
<audio src="./EmbraceableYou.mp3"></audio>
비디오 삽입태그
<video src="./flight.mp4"></video>
시맨틱 태그
| 기존 태그 | 문서의 구조나 의미 전달이 어려움 |
| <p>, <div>, <h1> 등 단순 block요소로 이뤄진 태그 | |
| 시맨틱 태그 | 문서의 구조와 의미를 전달하는 태그 |
| <header>, <section>, <article> 등 block요소지만 class를 따로 주지않아도 의미가 있는 태그 |
새싹 DT 기업연계형 프론트엔드 실무 프로젝트 1주차 블로그 포스팅
'HTML' 카테고리의 다른 글
| 2022-10-25 [새싹 프론트엔드] form 태그 , button&form 차이점 (0) | 2022.10.25 |
|---|
