단축키
ctrl+spacebar
8/10
# vs code 단축키 ctrl+s 세이브 alt+l+o 인터넷창으로
<태그 속성명="속성값">
<태그 속성명="속성값" 속성명="속성값">
<태그 속성명="속성값 속성값"> #속성값 두개
<태그 속성명="속성값 속성값=xx"> #속성값 두개
<시작태그> 콘텐츠 </종료태그>
#콘텐츠가 없으면 종료태그가 없다
<HTML>
<HEAD> 머릿말
</HEAD>
<BODY> 인터넷창에 사용자에게 보이는 곳
</BODY>
</HTML>
* 블록요소와 인라인요소
<p>블록요소: 사용할떄마다줄바꿈</p>
<span class="highlight">인라인 요소: 공간이없으면줄바꿈</span>
* 주석 문법
<!-- 주석 -->
8/11
헤드태그
meta title link style script 등
meta : 메타데이터정의
바디태그
부모, 자식, 형제 관계
태그 사용 위치에 따라 부모, 자식(한단계아래자손만), 자손(하위개체전부), 형제 관계 성립
html 은 줄바꿈, 들여쓰기가 상관 없다.
가독성 때문에 암묵적 규칙
format document 기능으로 자동 들여쓰기 가능
인터넷창으로 보기 : alt+b
# 태그 영문입력>tab 누르면 종료태그까지 자동 완성
hn 태그 : <h1>, <h2>, <h3> ... 글자크기 h1이 크다
p 태그 : 텍스트로 문장 또는 단락을 구성할 때 사용 (블록요소)
br 태그 : <br> 텍스트 줄 바꿈, 닫는 태그가 없다, 엔터효과
blockquote 태그 : 문단 단위의 인용문을 작성할 때 사용
형식 <blockquote cite='출처 url'>
ins 추가할 텍스트를 표시할 때
del 삭제할 텍스트를 표시할 때
sub 아래 첨자를 표시할 때 (H2O 에이치투오에서 2)
sup 위 첨자를 표시할 때 (4**2 에서 제곱2)
div 블록요소와 인라인요소를 그룹으로 묶을 때 (division분할)
span 인라인요소를 그룹으로 묶을 때
ul 비순서형 목록을 만들고, 목록 내용을 구성하라 때는 li 태그 사용
ol 순서형 목록을 만들고, 목록 내용을 구성하라 때는 li 태그 사용
a 링크 버튼
img 이미지삽입 <img src="경로" alt="설명">
<img src="./aa.jpeg" alt="aa"> .은 현재폴더 뜻 / 그 폴더의 aa를 가져와
src
//~ > https://~
/~ > https://www.venturesquare.net/~
./~ > https://www.venturesquare.net/v3/static/~
./../~ > https://www.venturesquare.net/v3/~
strong 문자볼드체
em 문자기울기
★form 태그 <form action='서버url' method='get또는post> </form>
action속성: 전송할 서버의 유알엘 주소
method속성: 송신방식
폼>레이블>인풋 구성
input 한줄짜리입력요소생성 <input type='종류' name='이름' value='초기값>
fieldset
legend
textarea 여러줄입력요소생성
select 셀렉트>opt옵트그룹>옵션 구성
option
optgroup
button
label
or 조건은 space bar
하위선택자 : 선택자 범위를 자식, 자손으로 제한
형식 선택자1 선택자2{/* css코드 */}
인접형제선택자 :가장가까운 형제
그룹선택자
# 가상클래스
형식 기준요소: 가상클래스선택자{/* css코드 */}
8/12
get 방식 : ? name = value &
가상클래스선택자 :
가상요소선택자 ::
::before 기준선택자요소의 앞선택 기준선택자::가상요소선택자{/* css코드 */}
::after 기준선택자요소의 뒤선택 기준선택자::가상요소선택자{/* css코드 */}
선택자 규칙
*{} 모두 선택
태그 {} 태그 선택자
.클래스속성값 {} 클래스 선택자
#아이디속성값 {} 아이디 선택자
태그#아이디속성값 {} 아이디 선택자
태그[속성] 속성 선택자
태그[속성="속성값"] 속성 선택자
A + B {} 인접형제선택자, A다음 B 하나 (A다음B가 바로 붙어있어야함)
A ~ B {} 형제선택자, A다음 모든 B
A > B {} 자손선택자, A 바로 1스텝 아래 B만 선택
A B {} 후손선택자(하위선택자), A 모든 후손(하위step포함)들 중 모든 B 선택
A, B {} 그룹선택자, 모든 A, B 선택
가상선택태그:가상선택자 {} 가상 선택자 (구체적행동)
가상요소 pseudo element
바디에 <A> 가나다 </A> 태그가 있을 때
헤드에
A::before {content:"<문구b>";} : A태그 속 실제 내용 맨 앞에 컨텐츠를 추가한다
A::after {content:"<문구a>";} : A태그 속 실제 내용 맨 뒤에 컨텐츠를 추가한다
출력 <문구b>가나다<문구a>
a셀렉터
a[target="_blank"][href="123] 안띄우면 and조건
타겟 블랭크와 href 123두개를 전부 만족하는
<a target="_blank" href="123 > 이걸 셀렉
div.box : div태그에 box속성값
색상표기법
키워드표기법
rgb표기법 : rgb(0~255, 0,0,1); 숫자3개 0~255
rgba( )
박스모델
margin 요소의 외부 여백
border 요소의 테두리(경계선)
padding 요소의 내부여백
c
/* */ css의 주석
8/16
open api
get 방식
url - parameter(광주광역시청), key(api키신청) 제출
결과 XML 표준안
JSON 사실상의 표준
통신의 표준화 : protocaol ex) internet, html, xml, json
8/17
웹페이지만드는것 html, css, js
웹프레임워커-부스트랩 (bootstrap.css, bootstrap.js)
상속,반복문,조건문,함수,파이썬코드 - flask의 jinja
cd디렉토리 변경
절대경로 / 로 시작하면 절대경로
상대경로 .현재디렉토리
.. 상위 디렉토리
코드 블락지정 후 alt+shift+a 단축키: 주석으로 바꾸는 기능
9/06
<!DOCTYPE html> 현재문서가 html5 로 작성된 웹 문서임을 나타냄
<body> <!--내용-->
<h1>Hello World!!!</h1> <!--h1진하게-->
<hr> <!--줄긋기-->
<div>Hello W<br>oㅇㄹld!!!</div> <!--br 줄바꿈-->
<p></p> <!--p 엔터두번-->
<h1>Hello World!!!</h1>
</p><!--p 엔터두번-->
태그
h1 진하게
p /p 엔터두번
/p 엔터두번
br 줄바꿈
hr 줄긋기
<태그 속성="속성값;">
레이아웃:화면분할,배울하여 구성
<pre></pre> 피알이태그 내용에 특수기호 넣어도 그대로 출력 (엔터도 그대로)
<a href="https:\\naver.com">현탭 네이버</a>
<a href="https:\\naver.com" target="_blank">새탭 네이버</a>
_blank 새탭
_self 현탭 (디폴트)
_parent 부모웹브라우저
_top 웹브라우저전체영역
crud
create 테이블생성/레코드추가 post
retrieve/read 목록조회,상세조회 get
update 수정(권한) put
delete 삭제(권한) delete
div 와 span
div태그
블록형식으로분할 (아래로줄바꿈) 아닐수도잇다 css영향
span 태그
인라인형식으로분할 (옆으로붙어서) 아닐수도잇다 css영향
iframe태그
하나의웹문서안에또다른문서를표시할떄사용
=====================
CSS
css3소개
스타일시트표준안
구성
선택자(selector) 스타일시트를적용할대상을지정
속성(property) 어떤 속성을 적용할지 선택
속성값value
ex) .선택자 { 속성:속성값; 속성: 속성값;}
필요성
문서작성과 디자인을 분리
하나의웹문서에서문서작성은에이치티엠엘이 디자인은시엣슷엣스가담당
css정의문법
박스모델의개념
박스속성
컨텐트 실제내용이표현되는곳
패딩 콘텐츠와 테두리사이의 여백
보더 박스의테두리두께
마진 테두리와박스의최종경계사이의여백
마진>보더>패딩> 컨텐트 <패딩<보더<마진
z index 층을쌓을떄인덱스
'
table-layout
샐안내용에따라셀네용조정
9/10 추석 복습
html
### id 선택자 활용, <a>태그
<a> 태그의 href 속성은 링크된 페이지의 URL을 명시합니다.
# 화면 이동
<a href="#special"> 스페셜</a> # 스페셜을 누르면 id=special로 이동
<h3 id="special">스페셜</h3>
# 사이트 링크 걸기
<a href="https:\\naver.com">현탭 네이버</a> # 현탭 네이버 를 누르면 네이버사이트로 이동한다
<a href="https:\\naver.com" target="_blank">새탭 네이버</a> # 이건 새 인터넷창을 열어서 이동
### 엔터 태그
<br> # 엔터한번
<p></p> 또는 </p> # 엔터두번
### 제목 태그
<h1>제목 1</h1> # 글자크기가 가장 크다
<h2>제목 2</h2>
<h3>제목 3</h3> # 글자크기가 가장 작다
### 마진
<body style="margin-left: 100px;"> # 왼쪽에 여백 100픽셀
### 타이틀 태그
<title>타이틀</title> # 인터넷창 최상단 막대에 표기되는 타이틀
### html에서 특수문자
# < > 처럼 html문서 안에서 특정 목적으로 사용되는 특문을 문자 자체로 입력하기 위한
코드 심벌 명칭
" " double quotes
& & ampersand
< < less than sign
> > greater than sign
  spacebar
### <table> 태그
# 데이터테이블을 그리는 태그
# 형태 : <table></table> 속에 t헤드와 t바디가 들어가는 형태, t헤드에는 column, t바디에는 value
# 속에는 <tr></tr>을 한 줄로 구분하여 헤드는 <th>바디는 <td>
<table border="10" style="width:15%;"> <!--티헤드티바디 생략가능 보더=테이블에구분줄긋기-->
<thead> <!--프로는 전체창 폭에서 반을 말함 px로도가능-->
<tr>
<th>성명</th> <th>점수</th> <th>비고</th> # th 글씨진하게, 가운데정렬
</tr>
</thead>
<tbody>
<tr>
<td>제임스</td> <td>85</td> <td rowspan="3">줄셀병합/세로로병합</td>
</tr>
<tr>
<td>마리아</td> <td>55</td>
</tr>
<tr>
<td colspan="2">칸셀병합/가로로병합</td>
</tr>
</tbody>
</table>
### <audio>, <video> 태그
# src에 파일경로를 잡아주면 사운드파일과 영상파일을 띄울 수 있다.
<audio src="data/sample_impact.mp3" controls autoplay></audio>
<video src="data/mp4sample.mp4" controls width="640"></video>
##
