22년 3월 22일_웹 class 시작

728x90

화요일[웹 시작!]

1. 웹 수업 1번째! review

2. 웹디자인 기능사 공부 필기

1. 웹수업 1번째

프론트 | 서버

네트워크 - local area network = LAN (초기) 지역으로 묶음
점점 lan과 lan을 연결시킴- WAN

1960년대 냉전시대 _ 전쟁시기 러시아(소련)
appnet개발 _ 분산 네트워크_베트남 전쟁시 통신기지국을 파괴

DNS서버가 ip를 도메인으로 갖게해줌

1번req - >1 resp

status
200성공
3xx 리다이엑션 -? 다시 요청해달라는 뜻
4xx 요청에 문제
5xx 서버에 문제

html _문서의 구조와 데이터를 담당
css - 디자인 스타일
js - 문서의 동적인 작동을 담당

프론트 엔드 - 사용자가 브라우저로 활용하는 영역
백엔드 - 사용자의 요청에 따라 데이터를 처리하고 응답하는 영역, 운영체제, 네트워크, 데이터베이스 기술
(웹프레임워크기술)= java,php, node.js, python

html 기본구조 (태그, 요소, 속성)

수평줄 표시 hr

  공백
< <
> >
& &
© ©
" "

b 굵은글자
i 기울어진 글자
small 작은글자
sub 아래첨자
sup 위첨자
ins 밑줄 글자
del 취소선
em 텍스트 강조
strong 글자 모양을 다양하게

서버의 외부에 있는 링크를 사용할 때는 페이지 위치까지 모두 기술
내부링크는 현재 페이지와 동일한 서버에 위치하므로 서버 주소를 명시할 필요가 없고
절대경로 = 최상위(root)디렉터리 기준으로 정로를 기정
상대경로 = 현재 페이지를 기준으로 트리 경로를 지정

Table Tags
표를 만들 때 사용하는 태그
table border="1"
caption /caption
  thead
tr
th /th
/tr
  /thead
  tbody
tr
td/td
/tr
  /tbody
  tfoot
tr
td /td
/tr
  /tfoot
/table

열과 행의 확장
rowspan : 열의확장 td colspan="2">dd<td>
colspan : 행의 확장

블록형식
div, h1~h6, p, ul>li, table, form
인라인형식
span, a, input

id 는 페이지 내에서 유일해야하고, 한개의 요소는 한개의 아이디를 가질 수 있다
class는 page내에 여러개 1개의 요소는 한개의 클래스를 가질 수 있다

시맨틱 태그
검색엔진이 검색엉의 이미를 스스로 분석하고 추리 - 시멘틱 검색
시맨틱 마크업은 시맨틱 태그를 통해 의미추림
header - goej
nav - 네비
aside  - 사이드
section 여러중심 내용을 감싸는 공간
article 글의 내용이 들어가는 공간
footer 푸터

form 은 서버로 데이터를 전송
form은 중첩이 되지 않음
method 서버로 데이터를 보낼 때 사용할 전송방식 get, post 기본값은 get (=url ? 키=값&키=값) |post(= header, body, 데이터가 들어가고 전송되기때문에 전송데이터가 url에 노출되지 않음)
action 폼으로 전송하느 데이터를 전달 받아 처리할 서버의 페이지 주소 생략하면 현제페이지의 주소 전송

iput태그는 type속성에 따라 다른 형태의 입력 영역이 표시된다.
name속성 = 전송할 데이터의 이름

text 텍스트 입력영역
password 암호 입력 영역
hidden 숨겨진 입력 영역
file파일 정보 선택 ㅇ영역 (첨부파일)
submit 전송(요청정보에 실려서 서버에 전송)
button 사용자 정의 버튼
email, tel도 지원됨

checkbox중복 가능 string[]로 전공
radio 서버로 전송하 ㄹ경우 text(String)
input type="checkbox" name="pet" value="dog">개
input type="checkbox" name="pet" value="bird>새
input type="checkbox" name="pet" value="cat">새

textarea 장문의 텍스트를 전송하고자 할 때 사용
rows 행수
cols 열수 ex) <textarea name="content" rows="10" cols="30"></textarea>

select태그 dropdown
select name"telecom">
option value="s">s</option>

form

fieldset
입력양식의 그룹 지정
legend 태그
입력 양식 그룹의 제목 지정
label 태그
입력 양식의 컨트롤 레이블을 표시

<form>
<fieldset>
<legend>로그인</legend>
<label for="account">계정</label>
<input type = "text" name ="accout">

Cascading Style Sheet
계단형의 이미로 스타일 적용시 규칙에 따라 우선 순위가 있고 우선순위에 따라 최종 렌더링됨
! improtant를 붙이면 적용 css규칙을 모두 무시 (브라우저 -> 외부 -> 페이지-> 인라인)

내부스타일시트
(<style> h1{}</

아이디를 css에서 선택할 경우 = #아이디
id는 class와 달리 중복이 되면 안된다.

<!DOCTYPE html>

<head>

<title>Bit Lounge</title>

<!-- <style>

h1{

background-color: black;

color: yellow;

}

</style> -->

</head>

<body>

<!-- Inline style 태그에 직접 style 속성을 지정

웹 표준에는 가장 부적합 -->

<h1>welcom to the Lounge</h1>

<p>라운지에서 시원한 <a href="elixir.html">건강 음료</a>동료들과의 대화로 하루 스트레스를 확 날려 버리세요. 편안한 음악도 감상하세요. 무선인터넷에도 언제든지 접속 가능합니다. </p>

<p>

</p>

</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

<!-- hidden은 사용자로부터 입력받은 데이터는 아니지만

서버에서 반드시 처리할 데이터를 전송하고자 할 때 사용 -->

<input type="radio" name="gender" value="male" checked>남성

<input type="checkbox" name="favorite" id="delmont">델몬트

<input type="checkbox" name="favorite" id="power">파워에이드

<input type="checkbox" name="favorite" id="americano">아메리카노

</select><br>

</fieldset>

</form>

</body>

</html>

<!DOCTYPE html>

<head>

<title>table 연습</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

2. 웹디자인 기능사 필기

탭과 이미지 슬라이드 공부하기

- 탭바

html

css

*{padding: 0; margin: 0; font-family:"맑은 고딕" sans-serif; font-size: 14px; color: #333333;}
li {
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    border: none;
}

.board{
    width: 400px; height: 200px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 20px;
}

.btn{
    width:100%; height: 50px;
    border-bottom: 1px solid #999999;
}
.btn li{
    float: left;
    margin: 0 10px;
    height: 100%; line-height: 49px;
}
.btn .first{
    margin-left: 0;
}
.btn a{
    display: block;
    width: 100%; height: 100%;
    box-sizing: border-box;
    font-size: 18px; font-weight: bold; color: #999999;
}
.btn a.active{
    color: #222328; border-bottom: 3px solid #222328;
}

.bwrap{
    width: 100%; height: 150px;
    background-color: pink;
}
.notice{
    width: 100%; height: 150px;
    background-color: pink;
}
.gallery{
    display: none;
    width: 100%; height: 150px;
    background-color: lightblue;
}

$(document).ready(function(){
        $('.btn a').click(function(){
            $('.btn a').removeClass('active');
            $(this).addClass('active');

            var i = $(this).parent().index();
            $('.bwrap > div').fadeOut(0);
            $('.bwrap > div').eq(i).fadeIn(0);
        });
    });

3. C 언어 2교시

1) 시스템마다 한정된 레지스터 공간을 가지고 있기 때문에 많은 수의 레지스터 변수를 선언할 수 없음

//yesterday wished to today list

. C언어 2교시 수강 ✔

tomorrow wish list

. 행복하기

. 좋은일 3가지 기재

하..내가 할 수 있을까..

728x90

저작자표시 (새창열림)

'IT To do and To was' 카테고리의 다른 글

22년 3월 24일_ D-2.. 불안하다 (0)	2022.03.24
22년 3월 23일_웹 2번째 시간 및 웹디..공부.. (0)	2022.03.23
22년 3월 21일_깃 약간의 설명, 웹 디자인 기능사...공부 (0)	2022.03.21
22년 3월 20일_웹페이지 제작, c언어 2교시 (0)	2022.03.20
22년 3월 19일_C언어 3주차, 웹디자인기능사 홈페이지 이미지 제작 (0)	2022.03.19

웹, 앱 일대기_금.짜

22년 3월 22일_웹 class 시작

'IT To do and To was' 카테고리의 다른 글

티스토리툴바

« 2025/05 »
일	월	화	수	목	금	토
				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	31

22년 3월 22일_웹 class 시작

'IT To do and To was' 카테고리의 다른 글

'IT To do and To was' 관련글

티스토리툴바