HTMI 공부
- HTML 기초 3요소 HTML 구조 CSS 스타일 JavaScript 기능
HTML 수정하는 사이트 추천
https://codepen.io/
https://replit.com/
HTML 기초 코드
<!DOCTYPE html> <!-- HTML 사용 버젼을 알려준다-->
<html>
<body>
<1>Hello World</1>
</body>
</html>
- H1 태크
- 제목을 정해준다.
- h2 ,h3 나누면서 작은 제목을 의미하낟.
여기서 tag 먹는지 확인
- p 태그
- 단락의 의미
-
주석 처리 <!– – >
- main 태그 html 읽을 수 있게 싫게 해준다.
메인 태그 확인
- 이미지 태크 <img>
- 닫은 태그가 없음
- html 속성 src = “ 주소위치 확인”
- 태그 속성으로 alt 이용하여 그림 설명 추가 할수 있다.
- 링크테크
- 하이퍼링크 테크
- 주로 사용하는것은 href 이용하여 주소값 알려준다
- 새창으로 안 열기 위해서는 target =”_blank” 추가하면된다.
- 태그에서 #을 이용시 링크는 유지되지만 어디에도 연결되지 않는다 -> 자바 스크립트에서 링크 동작 변경할떄 자주 사용됨
- img 에도 링크 널수 있다.
- 리스트 <ul> <ol>
순서가 없이 리스트 만들고 싶은 경우
<ul>
<li> 순서없음 </li>
<li> </li>
</ul>
순서가 표시하고 싶은경우
<ol>
<li> 순서표시됨</li>
<li> </li>
<ol>
- 강조테크 <strong>
- 글자 강조
- 이탈리아체 테크 <en>
가장 중요한것 FORM
매번 프로그램에서 자주 사용하는 폼태그 사실상 이것때문에 html 공부하기로 맘먹게된 태크
- 폼 테크 -required 테크 한 경우 필수 기능인지 지정해주는 속성이다 9-1 라디오 버튼인 겨우 name 테크를 줘서 같은경우로 만들어야한다. 구분해주기위해서 name 을 사용해서 구분해준다 나중에 CSS에서 디자인 변경시 사용됨
- for 속성을 통해 “for에 들어가는 value와 id”를 연결해준다. (label 태그 내부의 영역을 선택하면, for 속성이 지정된 “box-itme”인 id값을 찾는다.)
=> 클릭 영역이 넓어지는 이유
<form action ="/submit-cat-photo">
<label>
<input type="radio" id = "indoor" name="indoor-outdoor"> indoor
</label>
<label>
<input type="radio" id = "outdoor" name="indoor-outdoor"> outdoor
</label>
<input type="text" placeholder= "미리 보여주는 화면" required>
<button type ="submit"> Submit </button>
</form>
-
줄바꿈 <br>
-
div div 요소를 이용해서 CSS 꾸미는데 많이 사용된다.
- class 안의 스타일이 안에 디자인이 정해진다. ```html
```
- 바닥글 <footer> 웹페이지에서 바닥글 쓰는 영역
참조
- HTML https://www.youtube.com/watch?v=916GWv2Qs08&list=PLWKjhJtqVAbmMuZ3saqRIBimAKIMYkt0E&index=2&ab_channel=freeCodeCamp.org
댓글남기기