[HTML] 필기2

 

​

인라인태그

• 태그 안 내용만큼만 자기 내용
• 옆으로 쌓임
• 자리가 있어야됨 아니면 밑으로감
• 너비, 높이 지정 안됨 → a, 텍스트 태그, 이미지태그

​

 

블럭태그

• 한 행을 다 씀.
• 밑으로 이어짐
• 아래로만 쌓임
• 옆으로 못옴 → h, p , ul, ol, li, dl, dt, dd 등

​

 

div, span 태그

• 해당 항목을 그룹핑 해주는 태그

 

• div : 블럭태그를 묶어줌

1. 여러개의 태그를 이동시키기에 유리
2. 자식요소는 부모요소를 벗어날 수 없음
3. 문서정리하는데 폴더가 없는 것

​

• span : 인라인태그를 묶어줌

ㄴ 그린 <span>컴퓨터</span> 아카데미

​

---

​

비쥬얼스튜디오코드

• ! + enter : 자동으로 만들어짐
• ctrl + (/)슬러쉬 : 주석 (나만 봄)
• ( * 숫자 ) : 곱하기
• ul>li : 같이 만들기

 

모바일 기기

: 사이즈 / meta name, content

 

---

 

▼ ul>li{리스트$}

​

<ul>

     <li>리스트1</li>

</ul>

​

 

▼ ul>li#list$*4

​

<ul>

     <li id="list1"></li>

     <li id="list2"></li>

     <li id="list3"></li>

     <li id="list4"></li>

</ul>

​

 

▼ ul>(li>a{menu$})*4

​

<ul>

     <li><a href="">menu1</a></li>

     <li><a href="">menu2</a></li>

     <li><a href="">menu3</a></li>

     <li><a href="">menu4</a></li>

</ul>

​

 

▼ ul>(li>a{하단munu$})*4

​

<li><a href="">하단munu1</a></li>

<li><a href="">하단munu2</a></li>

<li><a href="">하단munu3</a></li>

<li><a href="">하단munu4</a></li>

​

---

 

필기

 

• ID, CLASS 속성

div#idname : id값이 idname인 div태그

div.classname : class값이 classname인 div태그

ㄴ 같은 ID명은 한 페이지에서 한 번만

ㄴ CLASS : 동일하게 적용될 여러개를 선택

​

• 요소 복제

li*3 : <li></li><li></li><li></li>

​

• 넘버링 - $ 위치에 값이 1부터 1씩 증가(1, 2, 3, ...)

li.list$*3

​

• 텍스트 { }

p{text} : <p>text</p>

​

• 그룹핑

div>(div>h1+ul)+h2 → 자식요소 묶어줌

​

• 커스텀 속성

a[href="http:naver.com"]

​

---

 

폼 태그 (form)

• 사용자가 원하는걸 요청가능 → 검색기능

** input - 입력받을수있는, 빈요소, 닫기태그 안만들어짐

** submit - 실행시킴

​

get 전송 방식

• 조회, 검색할때만 사용, 보안 취약
• 도메인 : ? 이후 주소, 맨끝 검색항목

<form method="get"(전송방법) action(경로)="주소">

<input type="text" name="userID">

<input type="password" name="userPASS">

<input type="submit" value="전송">

<input type="reset" value="취소">

​

POST 방식

회원정보, 게시글 수정시

​

---

 

Label 태그

• 웹 접근성을 지키기 위해
• 시각 장애인분들 위해
• css로 나중에 감춰줘야됨 → display none
• 양식 입력 창의 요소들을 위한 캡션을 명시함

​

1. 명시적 작성방법

• label의 for속성과 input의 id속성을 명시함으로써 연결해주는 방식

ex)

<label for="userName">이름</label>

<input type="text" id="userName" name="userName">

ㄴ for, id : 속성 동일하게 해주기

​

​

2. 암시적 작성방법

• label태그 안에 input태그를 넣음으로써 for속성을 명시하지 않더라도 암묵적으로 연결하는 방식

ex)

<label>

     이름

     <input type="text" name="userName" id="userName">

</label>

​

---

 

변수의 네이밍

 

1) 카멜표기법

- my first variable

→ myFirstVariabel

​

2) 파스칼표기법

- MyFirstVariabel

​

3) 팟홀표기법

- 움푹패인곳

- my_first_variabel