아무런 기초가 없는사람도 할수있는 HTML
비쥬얼스튜디오코드라는 에디터를 사용
폴더를 생성한다. 이제 그 파일내에서 모든 HTML 작업을 진행할수있다. 다음, 속하는 파일을 만든다.
!+tab 을 누르면 기본 HTML 구조 탬플릿이 나온다.(비쥬얼스튜디오에서 제공하는 기능)
참조는 헤더태그, 보이는 내용은 바디태그
초보자는 바디태그안에서의 내용만 신경쓰면된다
태그를<h> 시작하고, 태그를</h> 닫는다. 중간에는 바디태그
H태그
주로 제목을 작성할때 사용.
숫자가 작을수록 큰 글자가 나온다.
H1~H6
P태그
긴 텍스트를 넣을때 사용
INPUT태그
텍스트를 집어넣을수있는공간을 만듦
그래서 닫는 태그가 불필요하다.
<input type="text">코드의 타입이 텍스트라는 의미를 갖는다. (참고)
위처럼 창의크기뿐만아니라 폰트사이즈도 조정가능하다. 하지만 이런 스타일링부분은 대부분 css에서 하는것이다.
그치만 이런 간단한건 여기서 할수있긴하다!
버튼태그
이것은 말그대로 버튼을 만들어내는거다.
버튼을 두개 추가하고싶다면? 하나더 만들면 가로로 만들어진다. 세로로 만들고싶다면 구역을 나눠야한다.
div태그
그때사용하는것이 div태그다.
br 태그
html에서는 줄바꿈을 하려면 br태그를 사용해야한다.
strong 태그
문장을 볼드체로 바꾸는것
a 태그
주소를 불러올수있다. "구글로 이동"링크가 생성되는 밑의 예시
img 태그
이미지를 불러온다. alt 속성은 이미지 불러오기를 실패했을때 원하는 텍스트로 대체해준다(""안에다가 적으면됨 )
ul 태그 & ol 태그
둘다 리스팅을 돕는태그다.
ul은 핀이 생기는 리스트를 만들수있고,
ol태그는 앞에 자동으로 1,2,3번 등 숫자리스트를 만들수있다.
table 태그
보통 표를 만들때 사용된다. th는 테이블 헤더, td는 테이블 내용이다. tr은 테이블의 한행을 의미한다.
여기서 caption태그는 테이블의 이름을 정의한다.
form 태그
로그인이나 회원가입등 특정정보를 받아야할때 사용한다.
여기서 type은 어떤종류의 데이터타입을 받을지 설정할수있다.
패스워드를 입력하면 해당입력값이 우리가아는 패스워드 ***모양으로 보이게된다. (참고)
구역을 나눠서 제출 버튼을 만들어준다. submit을 누르면 폼이 제출되게 된다.
어디로 제출될지는 자바스크립트에서 하게된다!
제출을 해보면 만약 이메일에다가 일반 텍스트를 입력했을시에는 오류메세지가 뜨는것을 확인할수있다 (참고)
데이터타입에는 텍스트, 이메일, 패스워드만 있는게 아니라 date, checkbox 도 있다는것을 알아두자!
select태그
무언가 선택을 해야할때 많이 사용한다.
두번째 사진처럼 각각종류를 입력하면 원하는 커피를 선택할수있게만들어진다!
'(before) 네덜란드 > 혹시몰라하는 코딩' 카테고리의 다른 글
| # python_18 두근두근 고난이도 2일챌린지? (1) | 2022.12.09 |
|---|---|
| # python_17 아 챌린지 정말 도움되는구나 (3) | 2022.12.09 |
| # python_16 에러가 아니라 값이 떴다. 이건 기적이야 (0) | 2022.12.09 |
| # python_15 PyPI, request (1) | 2022.12.09 |
| # python_3 (정식챌린지 기간 시작) (0) | 2022.09.24 |