[AIVLE_AI] 웹 프로그래밍 1일차

KT AIVLE School 3기/AIVLER 활동

[AIVLE_AI] 웹 프로그래밍 1일차

순제로 2023. 5. 8. 01:37

728x90

1. VSCODE 환경설정
2. HTML

3. Emmet
3. CSS
4. Ngrok

1. VSCODE 환경설정

Plugin

beautify css
nodejs 설치
javascript debugger, code runner
python IntelliSense
live preview

설정

파이썬 한글깨짐 문제

setting.json

"python" : "set PYTHONIOENCODING=utf8 && python -u"

단축키

hide left bar	cmd(ctrl) + b
run	ctrl + alt + n
delete one line	cmd(ctrl) + x
multiline cursor	cmd(ctrl) + alt
multiline join	ctrl + j
copy one line	shift + option(alt) + 위,아래 방향키
beautify	shift + option(alt) + f
open termina	ctrl + `

2. HTML

HTML 개념

Hyper Text Markup Language, 웹문서를 작성하는 마크업 언어

HTML 구성요소

Document	한페이지 전체의 HTML 코드
Element	Document를 구성하는 Start Tag, End Tag, Text로 구성되어 있는 HTML 코드
Tag	Element의 기능을 정의하는 HTML 코드 : Start Tag와 End Tag가 있음
Attribute	Start Tag에 있는 Tag의 기능을 정의하는 속성값
	id	Element를 정의하는 Document에서 유일한 값
	class	Element를 정의하는 값으로 하나의 Element가 여러개의 class를 가질수 있음
	attr	id, class를 제외한 나머지 속성값 : href, scr, type, name 등등
Text	시작태그와 끝태그 사이에 있는 문자열

HTML 기본 구조

1 <!DOCTYPE html> : document 타입이 html 문서
2 <html> ~ </html> : 웹문서의 시작과 끝을 나타내는 태그
3 <head> ~ </head> : 웹문서의 정보에 대한 코드 작성
4 <body> ~ <body> : 웹문서에서 화면에 출력되는 코드 작성

HTML 페이지 구조

시멘틱 태그 : sementic tag : 태그 이름으로 의미를 알수 있는 태그
- 시멘틱 태그로 웹페이지의 전체적인 구조를 구성
- 시멘틱 태그를 반드시 사용해야 하는것은 아님

1 <header> : 헤더 영역 표현
2 <nav> : 네이게이션 바 영역 표현
3 <main> : 전체 컨텐츠 영역 표현
4 <article> : 독립적인 컨텐츠 영역 표현
5 <section> : 컨텐츠 영역 표현 : article 태그 안에 여러개의 section 태그 작성
6 <aside> : 본문 오른쪽이나 왼쪽 영역 표현
7 <footer> : 웹문서 아래 영역 표현

HTML 목록 태그

<ol>, <li> : 순서있는 목록 ( ol : ordered list )
<ul>, <li> : 순서없는 목록 ( ul : unordered list )
<dl>, <dt>, <dd> : 설명 목록 : 불릿 없음 ( dt : 이름, dd : 값 )

HTML 테이블 태그

<table> : 테이블 태그
<caption> : 테이블 제목
<thead> : 테이블 컬럼
<tbody> : 테이블 내용
<tr> : 테이블 로우(row)
<th>, <td> : 테이블 데이터

HTML 이미지 태그

<img src="", alt="" width="" height="">

이미지 태그 ( src : 이미지 파일 경로, alt : 대체 텍스트,width : 넓이, height : 높이 )

HTML 입력 태그

<form method="" name="", action="" target="_blank">

로그인 페이지와 같이 여러개의 데이터를 서버로 전달할때 사용하는 태그

3. VSCODE Emmet

- HTML 코드 단축키 : 간단한 코드로 여러개의 엘리먼트 생성

- Emmet 단축키 : ctrl + space

<!-- 하위 레벨 태그 생성 html -->
<!-- p>span -->
<p><span></span></p>


<!-- 같은 레벨 태그 생성 html -->
<!-- p+span -->
<p></p>
<span></span>


<!-- 태그 묶음 html -->
<!-- (p>span)+(p>span)+(p>span) -->
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>


<!-- 부모 element 접근 -->
<!-- p>span^p>span -->
<p><span></span></p>
<p><span></span></p>


<!-- type 속성 -->
<!-- input:radio -->
<input type="radio" name="" id="">


<!-- input:checkbox -->
<input type="checkbox" name="" id="">
<!-- input:submit -->
<input type="submit" value="">


<!-- # : 아이디, . : 클래스 -->
<!-- p#data>span.text -->
<p id="data"><span class="text"></span></p>


<!-- * : 반복 -->
<!-- p#data>span.text*3 -->
<p id="data"><span class="text"></span><span class="text"></span><span class="text"></
span></p>


<!-- $ : 순번 -->
<!-- p#data>span.text$*3 -->
<p id="data"><span class="text1"></span><span class="text2"></span><span class="text3"></
span></p>


<!-- @ : 순번의 시작번호 -->
<!-- p#data>span.text$@5*3 -->
<p id="data"><span class="text5"></span><span class="text6"></span><span class="text7"></
span></p>


<!-- {} : 문자열 입력 -->
<p id="data"><span class="text">span-1</span><span class="text">span-2</span><span
class="text">span-3</span></p>


<!-- [] : 속성값 입력 -->
<!-- a[href=http://google.com]{구글로 이동} -->
<a href="http://google.com">구글로 이동</a>

예제

<!-- Example -->
<!-- #page>nav.nav$>ul>li.item-$$@5{목록아이템-$$@0}*5 -->
<div id="page">
 <nav class="nav1">
 <ul>
 <li class="item-05">목록아이템-00</li>
 <li class="item-06">목록아이템-01</li>
 <li class="item-07">목록아이템-02</li>
 <li class="item-08">목록아이템-03</li>
 <li class="item-09">목록아이템-04</li>
 </ul>
 </nav>
</div>

4. CSS

CSS Selector

앨리먼트를 선택하는 방법

Tag 이름으로 선택	tag 이름 앞에 아무 문자 없이 태그 이름으로 선택
ID 이름으로 선택	ID 이름 앞에 # 을 사용하여 ID 이름으로 선택
Class 이름으로 선택	Class 이름 앞에 . 을 사용하여 Class 이름으로 선택
Attribute 이름으로 선택	Attribute 데이터를 [ ]로 감싸서 선택

계층적으로 엘리먼트를 선택하는 방법

한단계 하위 엘리먼트에서 선택	Selector 사이에 > 를 사용하여 엘리먼트 선택
모든 하위 엘리먼트에서 선택	Selector 사이에 공백문자를 사용하여 엘리먼트 선택

특별하게 엘리먼트를 선택하는 방법

not selector	특정 엘리먼트만 제외하여 엘리먼트 선택
first-child selector	여러개의 엘리먼트에서 첫번째 엘리먼트 선택
last-child selector	여러개의 엘리먼트에서 마지막 엘리먼트 선택
nth-child selector	여러개의 엘리먼트에서 n번째 엘리먼트 선택
before	선택한 엘리먼트 앞에 있는 엘리먼트 선택
After	선택한 엘리먼트 뒤에 있는 엘리먼트 선택

여러개의 Selector를 사용하여 선택하는 방법

, 를 사용하여 여러개의 엘리먼트 선택

Selector를 붙여쓰면 and의 의미를 가짐

Text Style

웹폰트 사용	Reference : https://fonts.google.com/	- 우측 링크 코드 head에 추가 및 css 코드 사용
다운로드 폰트 사용	Reference : https://github.com/naver/d2codingfont
글꼴 설정	font-family	글꼴 설정
	color	글자 색상 설정 : rgb, rgba 설정 가능
	font-size	글자 크기 설정 : 주로 px 사용
	font-style	: 글자 스타일 설정 : normal, italic
	font-weight	글자 굵기 설정 : normal, bold, lighter, 100 ~ 900
	line-height	글자 세로 간격 설정
	letter-pacing	글자 가로 간격 설정
	text-align	글자 정렬 : left, right, center ...
	text-decoration	텍스트의 밑줄이나 취조선 설정

Layout Style

레이아웃 영역설정	margin	border 바깥 영역의 여백 설정	여백 설정 예시 - 5px : 모든 margin 5px - 5px 10px : 위아래 5px, 좌우 10px - 5px 10px 15px 20px : top에서 시계방향으로 5px 10px 15px 20px
	border	영역의 테두리 설정	border style : solid, dotted, dashed ...
	border-radius	둥근 모서리 설정
	padding	border 안쪽 영역의 여백 설정
	width	컨텐츠의 가로길이 설정	px, %, auto
	height	컨텐츠의 세로길이 설정
레이아웃 정렬	float	레이아웃 정렬 설정 : left, right	float 은 레이아웃의 높이값이 0으로 설정
	display	레이아웃 출력 속성 설정 : block, inline-block	inline-block 은 block 설정된 상위 엘리먼트를 기준으로 정렬
	position	레이아웃 위치 설정	- relative : 문서 흐름(바로 이전 레이아웃)에 맞춰서 레이아웃 위치 지정 - absolute : relative로 설정된 상위 레이아웃 기준으로 위치 지정 - fixed : 브라우져 document를 기준으로 위치 지정
배경 설정	background-color	배경색 설정
	background-image	이미지 파일을 배경으로 설정
	background-position	이미지 파일의 배경 위치 설정	left right center top botton

5. ngrok

ngrok 개념

개인 로컬 호스트를 터널링을 통해 외부 인터넷 환경으로 연결해주는 툴

사용법 - Windows

https://ngrok.com/download

ngrok - download

Install ngrok via Homebrew $ brew install ngrok/ngrok/ngrok Download ZIP file Intel (AMD64) Apple Silicon (ARM64) Then unzip ngrok from the terminal $ Install ngrok via Chocolatey $ choco install ngrok Download ZIP file Windows (64-bit) Windows (32-bit) Do

ngrok.com

압축 해제 후 ngrok.exe 파일이 있는 디렉토리로 이동

Anaconda Prompt에서 실행

$ ngrok config add-authtoken xxxxxxx
$ ngrok.exe http 8000
$ ngrok http 'file:///Users/rada/Desktop/kt/code/code'
$ ngrok http 'file:///C:\Users\User\Desktop\code'

728x90

'KT AIVLE School 3기 > AIVLER 활동' 카테고리의 다른 글

[AIVLE_AI] WEB/WAS/DB 1일차 (0)	2023.05.08
[AIVLE_AI] 웹 프로그래밍 2일차 (0)	2023.05.08
[AIVLE_AI] AICE ASSOCIATE 시험 후기 (0)	2023.05.05
[AIVLE_AI] 가상화 클라우드 3일차 (0)	2023.05.05
[AIVLE_AI] 가상화 클라우드 2일차 (0)	2023.05.04

현재글[AIVLE_AI] 웹 프로그래밍 1일차

Hello, SOOON_ZERO!

보안, cloud, SAA-C03, What is AD?, AWS, java, 빅데이터, AIVLE, AD, IT, AI, AI도입, 개인정보, ActiveDirectory, Python, chat GPT, rnn, 클라우드, ADDC, mysql,

Today :
Yesterday :

일	월	화	수	목	금	토
						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

Hello, SOOON_ZERO!