일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 자바스크립트
- 레이아웃
- 쉽게설치
- 코딩야학
- 리액트네이티브배포
- 동기
- 인스타그램만들기
- 프론트엔드
- 폼태그
- BOM
- 프로그래밍
- 반복문
- jQuery
- 하이퍼링크
- 두잇리액트네이티브
- JavaScript
- 리액트훅
- 코딩
- 웹코딩
- html
- vue.js설치법
- 비동기
- JS
- css
- 배열
- 뷰 설치법
- 주니어 개발자
- DOM
- node prompt
- form태그
- Today
- Total
목록HTML (20)
이진욱의코딩

이번시간에는 HTML에서 많은 옵션들과 태그들을 이용해서 로그인화면을 만들어 봅시다. 간단한예제로 한 번 보도록 하죠 아이디 : 비밀번호 : 주소 : 1.html의 form html에서 서버에 데이터를 보내기 위해서 태그를 사용한다. 태그는 text, checkbox,radio,submit, button등과 같은 요소를 포함하고, select, text area, fieldset, legend, label 태그들도 포함한다. 쉽게말해 정보를 입력하고 "submit"을 하면 넘어가는 서버라고 보시면 됩니다. 2.input 태그 아이디와 주소같은 경우는 일반적으로 text형식을 많이 사용하지만 사용자의 중요정보가 포함되어 있는 비밀번호같은 경우는 타입을 password로 지정해서 흔히보는 "******" 이..

이번 시간에는 table 태그를 정리하려고 합니다. table 태그는 문자열 또는 이미지를 [행]과 [열]로 표시하는 태그인데요. 웹화면의 구성 요소를 원하는 형태로 배치할 때, 데이터베이스에서 데이터를 가져와 출력할 때 많이 사용 됩니다. 그럼 태그 예제 형식에 대해 공부해봅시다. 태그는 테이블을 만드려면 선언해야 하는 태그에요. 태그 안에 이제 ,, 같은 행과 셀을 위한 태그가 있습니다. 은 한 행을 지배하는 태그로, 그 안에 나 를 가지고 있습니다. 는 한 셀을 지배하는 태그로, 문자가 자동으로 중앙 배치되고 글자가 두꺼워지는 특징이 있습니다. 도 한 셀을 지배하는 태그지만, 문자가 자동으로 왼쪽으로 배치되고 글자가 두껍지 않은 특징이 있습니다. 여기서 응용을 한 번 해봅시다. table을 선언할 ..

다음과 같이 와 이라는 두개의 태그가 있다고 봅시다. 그러면 이런식으로 표현할 수 있습니다. 여기서 태그를 이라고 생각하고, 태그를 라고 생각하고 바꿔봅시다. 그 전에 먼저 (목록/목차)라는 개념을 먼저 설명하겠습니다. (목록/목차)란 이런식으로 사이에 넣은 List라고 생각하면 된다. 아까 앞서 설명했던 것처럼 부모와 자식의 태그를 구분해서 사용해 보자 1,2,3등을 한 부모에 속하게 하고 나머지 4,5,6등을 다른 부모에 속하게 한 번 해보자. 훨씬 더 깔끔해진 모습을 볼 수 있다. 여기서 잠깐!!! 이런식으로 갯수가 얼마되지 않는 것들은 이런식으로 하면 되는데 만약 그 수가 수십,수백가지가 된다면? 이때 사용하는 태그가 태그이다. 이로써 우리는 부모와 자식태그까지 공부를 완료했음을 알 수 있다.

이전 시간까지는 태그를 배웠다면 이번 시간에는 심화버전인 속성에 대해 배워보도록 하자. 앞선 웹페이지를 만든 것들은 글씨만 있는게 답답하기도 한데, 여기서 사진을 한번 넣어봅시다. 이미지를 웹 페이지에 포함시킬 때 사용하는 태그의 이름은입니다. 1.태그에 src속성 추가 여기서 ""안에 원하는 이미지의 주소를 적으면 그곳에 위치한 이미지를 표시한다. 사이트에 들어가서 이미지파일을 하나 다운받아보자. 여기서 굉장히 좋은 서비스를 하나 소개시켜 준다면 언스플래시(https://unsplash.com/)라는 사이트인데 여기에 존재하는 모든 사진은 저작권에 구애받지 않는 공공재와 같은 역할을 합니다. 하지만 저는 구글에 있는 연예인의 사진을 사용해서 구현해 보겠습니다. 먼저 구글에 있는 사진을 찾은 뒤 마우스 ..

이번 시간에는 줄바꿈태그 에 대해 알아봅시다. 이것을 웹에서 한번 보도록 하자. 이 난잡한 문장을 보기 쉽게 만드는 것이 태그이다 태그는 처럼 세트로 쓰는 것이 아닌 말 그대로 독립적으로 하나만 존재해도 역할을 수행 할 수 있다. 이렇게 사용자가 필요로 하는 부분마다 태그를 삽입을 해서 줄바꿈을 할 수 있다. 결과를 한번 보도록 하자. 태그가 단순한 줄바꿈을 하는 태그라면 단락을 표현할 때 쓰는 태그가 HTML에 존재한다. 그것이 바로 paragraph 즉 단락이라는 의미가 있는 이다. 이번 포스팅 요약 1. 줄바꿈태그는 이며 닫는거 없이 혼자사용가능하다. 2. 단락을 표현하는 태그는이다.

제목이나 내용 중 강조하고 싶은 부분이 있다면 어떤 태그를 어떻게 사용하는지에 대해 알아보자. 우선, 태그란 무엇인가? 에 대한 대답을 먼저 해야겠죠. 웹 페이지를 만들 때 쉽게 사용할 수 있는 도구정도로만 생각하시면 될 것 같습니다. 이번 포스팅 내용은 과태그에 대해 설명하도록 하죠. 태그는 주로 제목을 적을때 많이 사용합니다. 위의 사진을 다시보면 h1, h2, h3, h4, h5등으로 되어 있는데 이 부분은 웹에서 볼 때 h뒤에 숫자가 붙고, 숫자가 올라갈수록 글씨가 작아지는 모습을 볼 수 있으며, 줄바꿈이 된다는 것을 볼 수 있다. 태그를 살펴보자면 태그는 문장에서 강조하고 싶은 부분을 나타낼때 사용 할 수 있다. 결과를 보자. 일반 태그 사이에 적은 문장은 강조되는 부분 없이 나오고 태그를 넣어..