'WEB(html,css,js)' 카테고리의 글 목록

WEB(html,css,js)

html & css 기초 개념 정리 2023.04.23 2
[WEB] html,css 이용한 페이지 구현 - 2 2023.04.08
[WEB] html,css 이용한 페이지 구현 - 1 2023.03.30

html & css 기초 개념 정리

sehaan 2023. 4. 23. 19:35

2023. 4. 23. 19:35

HTML 기초 개념

HTML5 페이지의 필수 태그

<!DOCTYPE html>

- html 태그 정의 이전에 선언

- html 문서임을 브라우저에게 알려준다.

- html 의 필수 태그들

- 시작 태그와 종료 태그가 모두 있어야한다.

반면 시작 태그만 있는 태그들도 있다.

ex) <br> , <hr>

*태그와 속성은 대소문자 구분이 없다!

*불필요한 공백을 넣지 말자

블록 태그와 인라인 태그

블록 태그란, 항상 새 라인에서 시작하는 태그를 의미한다.

ex) <p>,<hn>,<div>,<ul>

인라인 태그란 , 앞 뒤 태그의 내용을 같은 라인에 출력한다.

ex)<span>,<a>,<img>,<strong>

* <p> 와 <div> 는 똑같이 블록 태그이지만 사용 목적이 다르다.

<p> 태그는 문자 단락을 구분하는 용도이고 , div는 레이아웃 계층 나누기 용도이다.

메타데이터

메타데이터란 , 데이터를 설명하는 데이터이다.

ex)

<base> - 웹 페이지들의 기본url과 페이지가 출력될 수 있도록 윈도우 지정

- 메타 태그는 브라우저가 웹을 더 잘 이해할 수 있도록 해준다. -> 웹 노출 용이

이미지 삽입

- img 태그의 src 속성에 이미지 파일의 주소를 넣을 수 있다.

리스트

리스트에는 3가지 종류가 있다.

1. ol(order list) - 순서 있는 리스트

2. ul(unordered list) - 순서 없는 리스트

3. dl(definition list) - 정의 리스트

* 각 리스트의 값은 <li></li> 로 표시하지만 끝에 </li>는 생략할 수 있다.

테이블

테이블을 만드는 데 사용되는 태그들

<table> - 테이블 처음 시작에 선언해준다.

- 표 전체를 담는 컨테이너

<caption> - 표의 제목을 지정

<thead> - 헤딩 셀 그룹 지정

<tfoot> - 바닥 셀 그룹 지정

<tbody> - 데이터 셀 그룹 지정

<tr> - table row 의 줄임말로 표의 행 지정

<th> - table head 의 줄임말로 표의 헤딩 셀 열 지정

<td> - table data 의 줄임말로 표의 데이터 추가

CSS 기초 개념

시맨틱 웹

- 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방식으로, 시맨틱 태그를 이용한다.

시맨틱 웹을 사용하는 이유

- 웹 문서 구조를 표현함으로써 검색 엔진 탐색 용이

시맨틱 태그의 종류

<header> - 페이지나 섹션의 머릿말 표현

- 웹 페이지의 전체 제목과 소개 담당

<nav> - 페이지 내 목차를 생성

- 링크나 메뉴를 포함

<section> - 장 혹은 절을 구성

- 본문을 구성

<article> - 본문과 연관 있지만, 독립적인 컨텐츠를 담음

- 본문 내 각 절이나 영역을 포함

<aside> - 노트나 팁

<footer> - 꼬릿말 , 예를 들어 저작권

CSS3 스타일 시트

- CSS 로 작성된 코드

CSS

- html 문서의 색이나 모양 등의 외관을 꾸민다.

셀렉터 - 특정 요소를 선택하여 스타일을 적용한다.

프로퍼티 - 스타일 속성 이름

값 - 프로퍼티의 값

* 대소문자 구분이 없다

HTML에 CSS 스타일 시트 만들기

1. <style></style> 태그에 작성

- <style> 태그는 <head> 태그 내에서만 사용한다.

- 웹 페이지 전체에 적용

2. style 속성에 작성

3. 스타일 시트를 별도 파일로 작성하고 불러오기

- <link> 와 @import 가 있지만 <link>를 사용하는 것이 바람직

CSS 규칙

CSS 스타일 상속

- CSS 스타일은 부모 태그(자신을 둘러싸는 태그)로부터 상속받는다.

스타일 합치기와 오버라이딩

- 태그에 적용되는 모든 스타일이 합쳐지고 , 동일한 스타일은 순위가 높은 스타일이 우선 적용

- 보통 범위가 좁아질수록 우선 순위가 높음

셀렉터

3가지의 셀렉터가 있다.

1. 태그 셀렉터 - 태그 이름이 셀렉터로 사용

2. 클래스 셀렉터 - "."으로 시작되는 셀렉터

- 여러 태그를 하나의 그룹으로 묶어서 동일한 스타일을 적용하려고 할 때 적합

3. id 셀렉터 - # 으로 시작되는 셀렉터

- 여러 태그 중 특정 태그에만 스타일을 적용하려고 할 경우 적합

셀렉터 조합하기

자식 셀렉터

- 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합

자손 셀렉터

- 자손 관계인 2개 이상의 태그 나열

셀렉터의 종류

전체 셀렉터

- 와일드 문자를 사용하여 모든 태그에 스타일을 적용시킨다.

속성 셀렉터

- 속성값이 일치하는 경우에 스타일을 적용시킨다.

가상 셀렉터

- 특정 조건이나 경우에 스타일을 적용시킨다 ex) 첫글자 , 마우스를 올릴때

CSS 박스 모델의 구성

콘텐츠 -> 패딩 -> 테두리 -> 여백으로 이루어져 있다.

기억하자 !!

저작자표시

'WEB(html,css,js)' 카테고리의 다른 글

[WEB] html,css 이용한 페이지 구현 - 2 (0)	2023.04.08
[WEB] html,css 이용한 페이지 구현 - 1 (0)	2023.03.30

[WEB] html,css 이용한 페이지 구현 - 2

sehaan 2023. 4. 8. 21:17

2023. 4. 8. 21:17

임베디드 IOT 수업 중 진행 된 실습 내용을 기반으로 제작하였습니다.

(참고자료 : 명품 HTML5+CSS3+Javascript 웹 프로그래밍, 생능출판사)

1.CSS 를 이용한 리스트 페이지 제작

- CSS 의 hover 속성과 first-letter 속성을 이용하여 리스트 페이지를 제작

hover : 마우스를 올렸을 때의 속성을 설정. (CSS 리스트에 마우스를 올렸을 경우 초록색으로 변함)

first-letter : 첫 번째 글자만 속성을 적용.

코드

<!DOCTYPE x`html>
<!--
HTML선언
-->
<html>
<!--
HTML 구문 시작
-->
<head>
 <style>
 h3::first-letter{color:red}
 /* h3 태그의 첫 글자만 빨간색으로 한다. */
 li:hover{background: yellowgreen;}
 /* 리스트에 마우스를 올렸을 때 yellowgreen 색상으로 변경 */
 </style>
<meta charset="utf-8">
<!--
메타 데이터 형식 설정
-->
<title>셀렉터 만들기</title>
<!--
페이지 타이틀 작성
-->
</head>
<body>
<h3>Web Programming</h3>
<hr>
2학기 학습내용
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<!-- 
strong 태그를 이용해 굵은체로 표기한다.
-->
<li>JAVASCRIPT</li>
</ul>
60점 이하는 F!
</body>
</html>
<!--
HTML 구문 끝
-->

2.텍스트와 박스에 shadow 속성 적용

- text - shadow

ex) text-shadow2px 2px 10px black

box - shadow

ex) box-shadow2px 2px 2px black

*왼쪽부터 v-shadaw, h-shadow , blur-radius 이다.

코드

<!DOCTYPE html>
<html>
<head>
 <title>text-shadow와 box-shadow</title>
 <style>
 h2
{
 text-align: center;
 /* 가운데 정렬 */
 coloryellow;
 /* 색상 설정 */
 text-shadow2px 2px 10px black,
 0 0 25px blue,
 0 0 5px darkblue;
}
 /* 
black 컬러는 2px, 2px ,2px
blue 컬러는 0 , 0, 25px
darkblue 컬러는 0 , 0, 5px 로 설정한다.
(왼쪽부터 v-shadaw, h-shadow , blur-radius)
*/
 img:hover
{
 box-shadow2px 2px 2px black,
 0 0 25px blue,
 0 0 5px darkblue
}
 /* 
black 컬러는 2px, 2px ,2px
blue 컬러는 0 , 0, 25px
darkblue 컬러는 0 , 0, 5px 로 설정한다.
(왼쪽부터 v-shadaw, h-shadow , blur-radius)
*/
 </style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
 <tr>
 <td><a href="http://www.naver.com">
 <img src="media/naver.png" width="200" height="150">
 </a></td>
 <td><a href="http://www.chosun.com">
 <img src="media/chosun.png" width="200" height="150">
 </a></td>
 <td><a href="http://www.amazon.com">
 <img src="media/amazon.png" width="200" height="150">
 </a>
 </td>
 </tr>
</table>
</body>
</html>

3.박스 모델 적용

- div태그에 padding , margin 속성을 적용해서 박스 내 이미지 배치

코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>박스 모델</title>
<style>
div{
backgroundyellow;
padding20px;
border5px dotted red;
margin30px;
}
/* 
배경색 노란색으로 설정,
padiing 값 20px로 설정
테두리는 5px 빨간색 점선으로 설정,
maring 속성은 30px로 설정한다.
*/
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의
빨간색 점선</p>
<hr>
<div>
<img src="media/img.avif" alt="고양이눈">
</div>
</body>
</html>

4. 상대위치를 적용한 페이지 제작

- 상대위치 : 같은 자손 요소와의 위치를 정함.

절대위치 : 부모 요소를 기준으로 위치를 정함.

코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>relative 배치</title>
<style>
div{
 displayinline-block;
 /* 
내부적으로 inline 규칙을 따르고, 
외부적으론 block 규직을 따른다. 
*/
 height50px;
 width50px;
 border1px solid lightgray;
 text-aligncenter;
 colorwhite;
 backgroundred;
}
/*
div 태그의 css 속성을 설정한다.
*/
#down:hover{
 positionrelative;
 left20px;
 top20px;
 backgroundgreen;
}
/*
"down" 아이디를 가진 클래스의 hover 속성을 설정한다.
position 속성을 상대 위치로 설정
*/
#up:hover{
 positionrelative;
 right20px;
 bottom20px;
 backgroundgreen;
}
/*
"up" 아이디를 가진 클래스의 hover 속성을 설정한다.
position 속성을 상대 위치로 설정
*/
</style>
</head>
<body>
<h3>상대 배치, relative</h3>
h와 k 글자에 마우스를 올려 보세요
<hr>
 <div>T</div>
 <div id="down">h</div>
 <!-- id값을 "down"으로 설정 -->
 <div >a</div>
 <div>n</div>
 <div id="up">k</div>
 <!-- id값을 "up"으로 설정 -->
 <div>s</div>
</body>
</html>

5. 짝수 번째에만 CSS 속성 적용

- nth-child(even) 선택자를 통해 짝수 번째에만 속성을 적용할 수 있다.

코드

<!DOCTYPE html>
<html><head><title>표 응용 1</title>
<style>
table
border-collapsecollapse;
}
/* 
표의 테두리와 셀의 테두리 사이의 간격을 없앤다.
*/
td, th
text-alignleft;
padding5px;
height15px;
width100px;
}
/* 
td,th 태그의 속성을 설정한다.
*/
thead, tfoot
backgrounddarkgray;
coloryellow;
}
/* 
thead , tfoot 태그의 속성을 설정한다.
*/
tbody tr:nth-child(even) { 
backgroundaliceblue;
}
/* 
짝수번째 요소에만 속성을 설정한다.
*/
tbody tr:hover{
backgroundpink;
}
/* 
tbody 태그에 마우스를 올렸을 때 속성을 설정한다.
마우스를 올리면 색상을 핑크색으로 변경
*/
</style></head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
 <tr><th>합</th><th>310</th><th>249</th></tr>
 </tfoot>
 <tbody>
 <tr><td>황기태</td><td>80</td><td>70</td></tr>
 <tr><td>이재문</td><td>95</td><td>99</td></tr>
 <tr><td>이병은</td><td>85</td><td>90</td></tr>
 <tr><td>김남윤</td><td>50</td><td>40</td></tr>
</tbody>
</table>
</body>
</html>

6. @keyframes 어노테이션을 이용한 에니메이션 웹 제작

- 애니메이션 상태를 정의하고 이미지에 적용 (rotate)

코드

<html>
<head>
 <title></title>
</head>
<style>
@keyframes rotate
{
0%
{
 transform:rotate(-90deg);
}
50%
{
 transform:rotate(90deg);
}
100%
{
 transform:rotate(-90deg);
}
}
/* 
keyframes 어노테이션을 통해 애니메이션 중간 상태를 정의한다.
%는 애니메이션의 시작과 끝을 의미
*/
img
{
 animation-name: rotate;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}
/* 
img 태그의 속성에 keyframes에서 적용했던 속성들을 적용한다. 
*/
</style>
<body>
 <h3>어지러워요</h3>
 <hr>
 <img src="media/img.avif" width="90px" height="100px">
 
</body>
</html>

7. 애니메이션의 반복 횟수 설정

- 애니메이션을 적용한 클래스 및 태그에 animation-iteration-count: 1; 적용하면 반복횟수를 설정

코드

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<style>
@keyframes a
{
from
{
 margin-left: 100%;
}
to
{
 margin-left: 0%;
}
}
/* 
@Keyframes 어노테이션을 통해 애니메이션을 정의하고 이름을 설정한다. (a) 
*/
strong
{
 padding: 3px;
 border: 2px solid black;
}
p
{
 animation-name: a;
 animation-duration: 3s;
 animation-iteration-count: 1;
}
/*
p태그에 미리 설정해둔 애니메이션을 적용하고 시간, 반복 횟수를 설정한다.
*/
</style>
<body>
<h3>애니메이션 응용</h3>
<hr>
<p><span><strong>?</strong>질문 있습니다.</span></p>
</body>
</html>

저작자표시

'WEB(html,css,js)' 카테고리의 다른 글

html & css 기초 개념 정리 (2)	2023.04.23
[WEB] html,css 이용한 페이지 구현 - 1 (0)	2023.03.30

[WEB] html,css 이용한 페이지 구현 - 1

sehaan 2023. 3. 30. 00:40

2023. 3. 30. 00:40

임베디드 IOT 수업 중 진행 된 실습 내용을 기반으로 제작하였습니다.

(참고자료 : 명품 HTML5+CSS3+Javascript 웹 프로그래밍, 생능출판사)

1. 버튼 페이지

코드

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr>

<form>

&nbsp<input type="button" value="2">

&nbsp<input type="button" value="3"><br>

&nbsp<input type="button" value="5">

&nbsp<input type="button" value="6"><br>

&nbsp<input type="button" value="8">

&nbsp<input type="button" value="9">

</form>

</body>

</html>

2. 시맨틱 태그 구분 페이지

코드

<!DOCTYPE html>

<html>

<style>

html, body { margin: 0; padding: 0; height: 100%; }

/* html , body 태그에 속성 css 속성 적용

margin : 0 -> 테두리와 요소 사이 간격 설정 , 0이므로 간격 없음

padding : 0 -> 테두리와 내용 사이 간격 설정, 0이므로 간격 없음

heigh : 100% -> 요소의 높이를 100%로 설정

.header { width: 100%; height: 15%;

background: yellow; }

헤더 클래스 width(폭) 100% 설정 , 높이 15% 설정 , 색상 노란색으로 지정

.nav { width: 15%; height: 70%; float: left;

background: orange; }

nav 클래스 width(폭) 15% 설정 , 높이 70% 설정 , 색상 주황색으로 지정

float 속성을 통해 요소 왼쪽 정렬

.section { width: 70%; height: 70%; float: left;

background: olivedrab; }

section 클래스 width(폭) 70% 설정 , 높이 70% 설정 , 색상 oliverab으로 지정

float 속성을 통해 요소 왼쪽 정렬

.aside { width: 15%; height: 70%; float: left;

background: orange; }

aside 클래스 width(폭) 15% 설정 , 높이 70% 설정 , 색상 orange으로 지정

float 속성을 통해 요소 왼쪽 정렬

.footer { width: 100%; height: 15%; clear: both;

background: plum; }

footer 클래스 width(폭) 100% 설정 , 높이 15% 설정 , 색상 plum으로 지정

</style>

</head>

<body>

<header class="header">header</header>

<section class="section">section</section>

<aside class="aside">aside</aside>

<footer class="footer">footer</footer>

</body>

</html>

3. 로그인 폼 구현

코드

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr>

<form>

<legend> Login </legend>

<label>Username <input type="text" size="15"></label> 

<!-- 입력창의 캡션을 라벨 태그를 통해 정의한다.

입력값의 속성은 text이고 최대 길이는 15이다.

-->

<label>Password <input type="password" size="15"></label>

<!-- 입력창의 캡션을 라벨 태그를 통해 정의한다.

입력값의 속성은 패스워드이고 최대 길이는 15이다.

-->

</fieldset>

</form>

</body>

</html>

4. details 태그를 이용한 정보 페이지

코드

<!DOCTYPE html>

<html>

<head>

<title>웹 프로그래밍 개요</title></head>

<body>

<h1>웹 프로그래밍 개요</h1>

<hr>

<p>웹의 기본 목적은 한 컴퓨터에서 만든 문서(document)를 다른 컴퓨터에서 쉽게 볼 수 있도록 하는 것이다.</p>

</details>

<summary>왜 Web인가?</summary>

<p>전 세계의 컴퓨터들을 인터넷으로 거미줄처럼 연결하고 웹 문서를 쉽게 주고받을 수 있도록 시스템을 만들고 WWW(World Wide Web) 간단히 줄여 웹(Web)이라고 부른다.</p>

</details>

<p>

<ul>

<li>HTML - 문서의 구조와 내용

<li>CSS(Cascading Style Sheet) - 문서의 모양

<li>Javascript - 행동 및 응용 프로그램

</ul>

</p>

</details>

</body>

</html>

5. 상품 주문 폼

코드

<!doctype html>

<html>

<head>

<style>

.container {

width:600px;

margin: 100px auto;

}

컨테이서 클래스 css 속성 설정

폭 600 px ,

marigin: 0 auto -> 중앙 정렬

ul {

list-style-type: none;

}

순서없는 리스트 출력 방식 설정

: 불렛 출력 안함

label.title {

font-weight: bold;

width: 80px;

float: left;

}

라벨 속성 설정 (볼드체 , 폭 80 , 왼쪽 정렬)

div.centered {

text-align: center;

}

div태그의 centered 클래스 css 속성 지정

: 텍스트 가운데 지정

fieldset {

margin: 15px 20px;

}

필드셋 태그 속정 지정

: 상하 마진 : 15px

: 좌우 마진 : 20px

fieldset legend {

font-weight: bold;

font-size: 18px;

color: purple;

}

필드셋의 캡션(legend) 태그 css 속성 설정(볼드체,폰트 18px ,색깔 보라색)

ul li {

margin-bottom: 10px;

}

</style>

</head>

<body>

<!--

클래스를 "container"로 지정

css 속성 적용

-->

<form>

<ul>

<li>

<!--

text 속성 : 글자

-->

</li>

<li>

<!--

tel 속성 : 전화번호

-->

</li>

<!--

리스트로 입력 폼 삽입 후 라벨 지정

placeholde로 기본값 설정

-->

</ul>

</fieldset>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<!--

리스트로 입력 폼 삽입 후 라벨 지정

-->

</ul>

</fieldset>

<ul>

<li>

</li>

<li>

<label><input type="checkbox">인도네시아 만델링 (100g) </label>

</li>

<li>

<label><input type="checkbox">탐라는도다(블렌딩) (100g) </label>

</li>

<!--

리스트로 입력 폼 삽입 후 라벨 지정

입력값 체크박스로 설정

-->

</ul>

</fieldset>

</div>

</form>

</div>

</body>

</html>

6.도형 서식 폼

코드

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr>

<form>

</select>

<!--

select 태그를 통해 드롭다운 리스트를 생성합니다.

size 속성을 통해 3개를 만들 수 있으며 이 값은 option 태그로 정의합니다.

-->

</label><br><br>

<!--

라벨값을 삽입하고 입력값 타입을 숫자로 설정합니다.

-->

<!--

입력값 타입을 색상으로 설정합니다. 기본 색상은 #00bfff 로 들어갑니다.

-->

<!--

입력값을 범위로 설정합니다. 최소는 0 , 최대는 100

list속성을 통해 옵션들을 포함하고 있는 datalist 요소들을 명시할 수 있습니다.

-->

</datalist></label><br>

<!--

옵션들을 포함하고 있는 datalist 옵션값리스트입니다.

-->

</fieldset>

</form>

</body>

</html>

7. bgm 및 링크 삽입 페이지 구현

코드 - 메인 페이지

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: square;

}

</style>

<!--

배경음악을 삽입합니다.

-->

</head>

<body>

스마트폰은 컴퓨터를 결합한 무선 휴대전화기이다. PC에서 실행되는 운영체제보다 작게 만든 모바일 운영체제를 탑재하여 인터넷 검색, 전자우편, 간단한 문서 편집, 카메라, 오디오 및 비디오 재생 등 PC의 기능을 거의 모두 갖추고 있다.

</header>

<!--

헤더 시멘틱 태그 내에 머릿말을 삽입합니다.

-->

<nav>

<ul>

<li><a href="#a">역사

<li><a href="#b">안드로이드폰

<li><a href="#c">아이폰

<li><a href="#d">샘플

</ul>

<!--

nav태그 내에 링크 리스트들을 삽입합니다.

-->

</nav>

최초의 스마트폰은 사이먼(Symon)으로 추정된다. IBM사가 1992년에 설계하여 그 해에 미국 네바다 주의 라스베가스에서

열린 컴댁스에서 컨셉 제품으로 전시되었다

</article>

<!--

본문을 삽입하고 href 속성을 통해 링크를 삽입합니다.

target="_blank" 속성은 해당 링크 클릭시 계쏙해서 새로운 창이 열리게 합니다.

-->

<h3 id="b"><a href="https://ko.wikipedia.org/wiki/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C_(%EC%9A%B4%EC%98%81_%EC%B2%B4%EC%A0%9C)" target="_blank">안드로이드</a></h3>

안드로이드(영어: Android)는 휴대 전화를 비롯한 휴대용 장치를 위한 운영 체제와 미들웨어, 사용자 인터페이스 그리고 표준 응용 프로그램(웹 브라우저, 이메일 클라이언트, 단문 메시지 서비스(SMS), 멀티미디어 메시지 서비스(MMS)등)을 포함하고 있는 소프트웨어 스택이자 모바일 운영 체제이다.

</article>

아이폰(영어:iphone)은 2007년 1월 9일, 애플이 발표한 휴대 전화 시리즈이다. 미국 샌프란시스코에서 열린 맥월드 2007에서 애플의 창업자 중 한명인 스티브 잡스가 발표했다.

</article>

<table>

<caption>스마트폰샘플</caption>

<tbody>

<tr>

</tr>

</tbody>

</table>

</article>

</section>

<!--

장을 구성하는 section 태그 내에 article 태그를 삽입함으로써 본문을 구성합니다.

-->

<br>

</footer>

<!--

footer 태그를 통해 꼬리맛을 삽입합니다.

-->

</body>

</html>

코드- 설문조사 페이지

<!DOCTYPE html>

<html>

<head>

</head>

<body>

소프트웨어 기술에 대한 의견을 듣습니다. 많은 참여 부탁드립니다.

<hr>

<br>

<form>

학년 <input type="radio" name="china" value="1" checked>1학년

<input type="radio" name="china" value="2">2학년

<input type="radio" name="china" value="3">3학년

<input type="radio" name="china" value="4">4학년

</form>

<!--

폼을 삽입하고 그 안에 입력값들을 넣습니다.

-->

<br>

성별

<input type="radio" name="" value="1">남

<input type="radio" name="china" value="1">여

<form>

관심 분야 <input type="text" name="country" list="countries"><br>

</datalist><br>

<!--

list속성을 통해 옵션들을 포함하고 있는 datalist 요소들을 명시할 수 있습니다.

이 코드에서는 contries 라는 데이터 리스트 요소들을 명시합니다.

-->

<form>진로 <input type="checkbox" value="1" checked>개발

<input type="checkbox" value="2">기획

<input type="checkbox" value="3">영업

<input type="checkbox" value="3">창업

</form><br>

남기고 싶은 말<form><textarea cols="60" rows="10">글을 남겨 주세요.</textarea></form><br>

<!--

textarea 태그를 통해 글 상자를 만듭니다.

-->

</body>

</html>

저작자표시

'WEB(html,css,js)' 카테고리의 다른 글

html & css 기초 개념 정리 (2)	2023.04.23
[WEB] html,css 이용한 페이지 구현 - 2 (0)	2023.04.08

PREV 이전 1 NEXT 다음

Tech Log 🛠️

WEB(html,css,js)

html & css 기초 개념 정리

HTML 기초 개념

HTML5 페이지의 필수 태그

블록 태그와 인라인 태그

메타데이터

이미지 삽입

리스트

테이블

CSS 기초 개념

시맨틱 웹

시맨틱 웹을 사용하는 이유

시맨틱 태그의 종류

CSS3 스타일 시트

CSS

HTML에 CSS 스타일 시트 만들기

CSS 규칙

셀렉터

셀렉터 조합하기

셀렉터의 종류

CSS 박스 모델의 구성

'WEB(html,css,js)' 카테고리의 다른 글

[WEB] html,css 이용한 페이지 구현 - 2

1.CSS 를 이용한 리스트 페이지 제작

2.텍스트와 박스에 shadow 속성 적용

3.박스 모델 적용

4. 상대위치를 적용한 페이지 제작

5. 짝수 번째에만 CSS 속성 적용

6. @keyframes 어노테이션을 이용한 에니메이션 웹 제작

7. 애니메이션의 반복 횟수 설정

'WEB(html,css,js)' 카테고리의 다른 글

[WEB] html,css 이용한 페이지 구현 - 1

1. 버튼 페이지

2. 시맨틱 태그 구분 페이지

3. 로그인 폼 구현

4. details 태그를 이용한 정보 페이지

5. 상품 주문 폼

6.도형 서식 폼

7. bgm 및 링크 삽입 페이지 구현

'WEB(html,css,js)' 카테고리의 다른 글

+ Recent posts

티스토리툴바