일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- typeof
- 화살표함수
- frontend
- if else
- 변수
- javascript
- align-content
- for in
- 프론트엔드
- ELSE
- 조건문
- 함수선언식
- 함수표현식
- justify-content
- 속성
- 논리연산자
- for
- Methods
- properties
- flex-wrap
- 기초
- 문자열
- boolean
- 타입
- for of
- flex
- 함수
- 반복문
- 비교연산자
- flex-direction
- Today
- Total
목록HTML (9)
하얀 코딩
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cXaSBt/btrVjMlubUH/nGMArgRD1Tu9LySDVOXnHk/img.png)
input 태그 말고도 입력에 대한 태그들도 있습니다. 자주 쓰이는 태그에 대해서 알아볼까 합니다! 1. select (선택 입력) 2. textarea (문장 입력) 3. button (button) 4. submit (전송 입력) 5. fieldset (필드셋) select (선택 입력) select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 옵션만을 입력받을 수 있습니다. option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시합니다. 사과 귤 딸기 복숭아 selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다. textarea (문장 입력) textarea 요소는 사용자로부터 여러..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/b0vI1y/btrU3ae7kSV/xr72USoFQysgRjRFAmdQT0/img.png)
속성 input 요소는 다양한 속성을 가질 수 있습니다. HTML에서 자주 사용되는 input 요소의 대표적인 속성은 다음과 같습니다. 1. value 2. readonly 3. disabled 4. maxlength 5. size value value 속성은 input 요소의 입력 필드(input field)에 나타나는 초깃값을 설정합니다. 이름 : 학번 : 학과 : readonly readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정합니다. disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점입니다. 이름 : 학번 : 학과 : disabled disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정합니다. ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/rT8FO/btrU2J2W3sf/1Y9IlYrz7UuK6kYNak8Eek/img.png)
input HTML에서는 input의 다양한 타입을 사용하여 사용자로부터 입력을 받을 수 있습니다. HTML에서 사용할 수 있는 대표적인 input 요소의 type 속성은 다음과 같습니다. 1. 텍스트 입력(text) 2. 비밀번호 입력(password) 3. 라디오 버튼(radio) 4. 체크박스(checkbox) 5. 파일 선택(file) type = "text" 태그의 type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있습니다. type = "password" 태그의 type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있습니다. 비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됩니다. ty..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bJij2t/btrUZX8HDW7/5QhdUvWfQjnbCb11h1EPQK/img.png)
form 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시합니다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다. method 속성 method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠집니다. GET 방식은 주..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bHQzLI/btrUYqJ6Enz/pT4G9lCeVtu5Xe9XJ6RXE1/img.png)
HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. block vs inline-block vs inline block inline-block inline 줄바꿈 여부 줄바꿈이 일어남 줄바꿈이 일어나지 않음 줄바꿈이 일어나지 않음 기본적으로 갖는 너비(width) 100% 글자가 차지하는 만큼 글자가 차지하는 만큼 width, height 사용 가능 여부 가능 가능 불가능 , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. , , 요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bY9GJ9/btrUXor0Jv9/3uD6LsYP738ZAeUCITmusK/img.png)
오늘날 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재합니다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현합니다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있습니다. 속성 href : 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시합니다. target : 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시합니다. target 속성값설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame)에서 오픈. (기본설정) _parent 링크로 연결된 문서를 부모 프레임(frame)에서 오픈. _top 링..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/mA9WZ/btrUWR19TwD/J259GG4ckJBJ6C7vDAp57k/img.png)
HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 엔티티 문자 엔티티 이름 16진수 설명 공백 줄 바꿈 없는 공백 > > 보다 큰 & & & AND 기호 " " " 큰따옴표 ' ' ' 작은따옴표 예시 태그는 단락을 나타내는 태그입니다. 심볼(Symbol) 특수문자 HTML 예약어 이외에도 키보드에 입력할 수..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cL94XT/btrURUlk0yW/s2xpCX0DKPEZQb6pK2kKxK/img.png)
... 제목 (Heading) 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있습니다. 이런 태그는 제목의 표현이라는 기능 외에도 또 다른 중요한 역할을 하고 있습니다. 여러 검색엔진은 각 웹 사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집하고, 그 내용을 파악합니다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있습니다. 단락 (Paragraph) 1. 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다. 2. 태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현됩니다. 3. 태그(break line)를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있습니다. 4...