April 1~28, 2021 - Front-end(HTML)

Total : / Today : / Yesterday :

Notice

Recent Posts

Recent Comments

Link

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

Tags more

Archives

Today

Total

관리 메뉴

jongviet

April 1~28, 2021 - Front-end(HTML) 본문

react & react native

April 1~28, 2021 - Front-end(HTML)

jongviet 2021. 4. 28. 22:56

#Front-end(HTML)

*4월1일~28일

-4월 초부터 학습해온 Front-end 과정이 거의 끝나간다. 간략하게 학습한 내용을 정리해보고자 한다.

-오늘은 HTML!!

1)HTML 기본

-<> : 다이아몬드 내부에 태그 삽입하는 형태로 구성됨;

-일반적으로 tag는 쌍으로 구성됨 <> </>

-paring이 포함관계, 순서 안에서 녹아있음

-single형식; meta와 같은게 있음

-head안 meta들도 각자의 위치값이 존재함 -> 추후 자바 배열처럼 순서대로 가져와서 쓸 예정임(DOM).. 각각 인덱스값이있음..

-디자인은 추후 스킨의 도움을 받으면됨~(basic CSS skills + bootstrap template)

-웹은 주석까지 다 노출됨.. 조심해야함. 실제 일부 사이트 찾아보면 개발자 주석 남아 있음.

-index.html은 default page.

*기본형태

<!DOCTYPE html>

<html lang="en"> //속성(attributes), '=' 뒤가 속성에 해당하는 값. 값이 변함.

<head> //tag = elements

<title>Document</title>

</head>

<body>

body tag test //일반적인 텍스트임. contents, text node라고 부름

</body>

</html>

2)HTML 기본 태그

-headings / p / br/ pre 등등..

-H1,3,5 조합 데스크톱

-H2,4,6 조합은 테블릿 or 모바일

-block level tag.. 즉 자기 영역을 가지기에 개행을 함.

-inline level.. 라인 안에 존재 할 수 있는 것.. inline-block level도 있음(수직 정렬 시 유용함)

-heading이라는 태그들은 모두 bold 처리되어 있음.. 일반 사이즈와 같은 크기는 H4임.

-각각의 태그가 경계선임.

-<p> 문단 태그이며, 이도 당연히 분리되어있음. 문장만 담는 역할도 하지만, 어느정도의 라인 공백을 만드는 역할도 함. block-level

-<br>로 줄바꿈할때 모바일도 고려해야하기에 사용에 신중해야함. 최후의 수단임,, 잘 안쓰는게 좋음;

-<pre>시와 같이 비쥬얼스튜디오 내 찍은 그대로 보이게 하는 태그; preformatted tag

-<hr> block-level tag,, 수평선 줄그어버림... 이제는 구시대적인 방법으로 치부됨.

-공백용

<p>

</p>

*inline level tag

-<b> 볼드 처리, <i> 기울임꼴 이텔릭

-<strong> 볼드와 비슷, <em> 기울임꼴 비슷

-<sup> 위로 정렬, <sub> 아래로 정렬; superscript, subscript

*특수문자처리(escape)

-일반적 웹문서에 <body> 표시하기 위해서는 하기와 같이 입력

-잡다한 기호들은 거의다 CSS에서 일괄적으로 처리함.. 그게 더 효율적임

<body>

-그 외 공백, &, ", copyright 등

*리스트(모두 block-level)

<ul>

<ol>

<li>

<dl>

<dt>에스프레소</dt>

<dt>아메리카노</dt>

<dd>에스프레소에 물 희석</dd>

<dd>에스프레소에 우유 희석</dd>

</dl>

*Link tag

-<a> 앵커 태그

-일반 링크 / 새창 링크

-파일 내부 링크 / 상위 폴더 링크 / 하위 폴더 링크

<li><a href="text/escape.html">escape</a></p></li>

-문서 내부 이동; 이동된 부분이 최상단에 찍히게됨; id 지정 후 #으로 콜!!!

<li><a href="#here">here로 이동</a></li>

3)image, audio, video 등

*image

-검색 로봇들이 title, alt(alternative)값 보고도 찾아옴.. 조회수 중요하면 alt 값 빼먹지 말자.

-width="50%" 는 전체 기준 50% -> 즉 커짐

-width="50"은 실제 50으로... 매우 작아짐

-이미지 자체 비율이 있기에, width, height 임의 조정 시 이미지 깨질 수 있음.

-이미지 전부 0과 1로 구성됨.. 즉 용량이 클수록 점이 장난없음.. 이런 방식을 비트맵 이미지(좌표코드) -> 보완하게 벡터이미지

-jpg:손실압축, 웹용

-png:무손실압축/투명도 만들어 낼 수 있음.

-gif: 그림이 움직이네..?

-이미지맵: 이미지 특정 부위 클릭시 이동하는 링크.. 요즘은 잘 안씀. 너무 복잡

-공백처리된 부분에 한해서 줄바꿈해서 편하게 쓰면됨~~

-figure로 감싸서, caption block-level로 추가함; figure는 정리하기위해 담는 바구니라고 생각하면 됨

</figure>

</figure>

*audio

-ODD파일 웹용 고음질 파일

지금 사용중인 브라우저에서는 재생이 불가합니다.

</audio>

<hr>

지금 사용중인 브라우저는 이 오디오 형식을 지원하지 않습니다.

</audio>

<hr>

지금 사용중인 브라우저에서는 재생이 불가합니다.

</audio>

*video

-OTT : 동영상을 어떻게 용량을 줄여서 서비스할 것이냐.. 그리고 각기 다른 인터넷 환경에서 어떻게.. 구현 할 것이냐가 중요함.

-깊이있게는 하기 힘듬.. 단순히 당겨 쓰는 수준

-웹은 협업이 굉장히 중요함..... 커뮤니케이션 중요.. 왜냐하면 범위가 너무 넓음<-> 안드로이드는 갠플 가능..

사용 중인 브라우저는 현재 파일 재생을 지원하지 않습니다.

</video>

<hr>

사용 중인 브라우저는 현재 파일 재생을 지원하지 않습니다.

</video>

-videojs.com이 비디오 frame 꾸며주는 사이트임,, 소스만 받아서 쓰면됨.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"

data-setup="{}">

To view this video please enable JavaScript, and consider upgrading to a

web browser that

<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>

</p>

</video>

</body>

</html>

*iframe

-inner frame 느낌, 브라우저 안의 브라우저

-유튜브 소스코드 복사로 그대로 가져올 수 있음. iframe 내에

-안드로이드 웹뷰 개념

-너무 많이 사용하면 로딩이 너무 오래 걸림..

4)기타 태그 관련 추가

*tag 중요도

-div(영역), li, a, table, form(매우 중요!!, 디자인쪽으로 갈 것 아니면 이거만 하면됨)

*table

-테이블로 전체 페이지를 만들면 속도가 엄청 떨어짐.. 절대 레이아웃 말것!!

-tr 세로줄 / td 가로줄 / th: table heading; 가운데정렬 & 볼드처리

-tr하나에 row 하나, 그안에 있는 td or th가 column값 하나임

<tr>

</tr>

<tr>

</tr>

<tr>

<td>레미제라블</td>

</tr>

<tr>

</tr>

</table>

*table-merge

-<td colspan="2"></td>

-<td rowspan="2"></td>

-<caption>테이블 셀 병합</caption> // 아래에 있으나 위에 있으나 항상 테이블 상단에 노출됨 테이블속성에 맞춰서 가운데 정렬 기본. 하단에 하고싶으면 figure로 싸서 figurecaption 적용해야함.

-html로는 뼈대만 만들고 나머지는 CSS로함.. 정렬이든 색이든 모두 넘김

*div tag(block-level)

-마치 탑쌓기와 같이 영역을 가지는 것

-box model에서 좀 더 심화된 내용을 다룰 예정.. margin, padding 등 고려해야하기에 어려움

-span은 inline level, 주로 글자를 담음...

<h1>block-level tag div</h1>

<p>

퇴근은 아름다운 것이며

삶의 질을 향상시키는 것이다...

</p>

</div>

<p>

퇴근은 아름다운 것이며

삶의 질을 향상시키는 것이다...

</p>

</div>

-가장 바깥쪽 div가 바닥을 이루고, 그안에 있는게 그 바로 위, 또 그 안에 있는게 그 바로 위

</div>

*form tag

-가장 중요함.. 100% 이해해야함.. back-end와 연관 / 한국장학재단 패널조사 설문지 form 떠올리기;

-회원가입란 양식 / 설문조사 등등... 디자인 제외 전부라고 볼 수 있는 부분임.

-form tag 안쪽에 세트로 움직이도록 함..

-dothome PHP서버 사용함 / PHP는 이해도만 있으면 1달안에 할 수 있음~~ 크게 신경 안써도 됨

-사용자와 소통하는 창구임.

-block-level

-label for와 input의 name이 연동이됨~ 보조적인 역할 정도? 디자인 느낌임.

-action이 생략되면 새로고침 효과가 있음, 자기 자신 호출

-submit은 form tag 내 action을 찾아서 실행 함. 만약 action이 없으면 자기 자신을 호출

-reset은 form tag 내 모든 양식을 지움.

-method는 get방식이 디폴트, 생략 시에도 get 적용

-name(key) & value(입력한 값),, Json 생각하면됨 / id는 스타일 목적으로 하는 것임...CSS용

-placeholder : 안드로이드 힌트 개념;

-readonly는 입력되어있는 값이 전송됨. 보여주고 내가 다시 받아와야하는 값 disabled는 입력된 값 아예 전송 조차 안됨.

-maxlength 최대 길이값 / minlength 최소 길이 값

-정규식: 입력될 값을 한정 짓는 것 patter="a-zA-Z"

-value가 가지고 있는 값임;

<input type="text" name="ids" id="ids"

placeholder="아이디를 입력하세요">

<input type="password" name="pwd" id="pwd"

placeholder="패스워드를 입력하세요">

</form>

-input type number

-min, max 지정, step으로 짝수 , 홀수 입력 한정 가능

</form>

-tel은 거의 안씀; date는 많이 씀!

-datetime 한꺼번에 노출하면 모바일에서 잘 안보임.

-file 타입은 value 절대 안됨.. 보안적인 이유 / enctype 또 multipart/form-data 방식으로만 보내야함 (나머지는 application~)

-버튼은 하기 중 어느방식으로 써도 똑같음

*input-select

-checkbox는 받는쪽에서 여러개를 한꺼번에 받아야 하기에 for문 + array로 받음

-radiobutton은 name값을 따라서 2개중 1개, 2개중 1개 식으로 선택 가능

-checked로 기 선택 가능

-required는 반드시 입력되어야 할 값; 회원가입시 아이디, 비번, 이름 등

취미

<input type="checkbox" name="hobby" value="독서" checked>독서

<input type="checkbox" name="hobby" value="음악감상">음악감상

<input type="checkbox" name="hobby" value="수영">수영

<input type="checkbox" name="hobby" value="게임">게임

</form>

<hr>

가장 잘 하는 것

<input type="radio" name="best" value="자바">자바

<input type="radio" name="best" value="Python">Python

<input type="radio" name="best2" value="JS">JS

<input type="radio" name="best2" value="SQL">SQL

</form>

</select>

</form>

<hr>

</select>

</form>

<hr>

</optgroup>

</select>

</form>

<hr>

</optgroup>

<optgroup label="알뜰폰">`

</optgroup>

</select>

</form>

<hr>

이름: <input type="text">

이메일: <input type="email">

간단한 자기소개 :

</form>

-특정한 기획안을 받았을 때 form으로 구현할 수 있어야함 / name값 효율적 사용 / 각각 자료에 대한 type 등

*Semantic

-tag의 이름에 기능이 녹아 있는 것

-체크한 것은 div랑 거의 같음. 이름만 다를뿐~

-태그에 이름붙여서 어느 위치구나 짐작하는 정도, 기능은 div와 모두 같음

-nav navigator 느낌, 메뉴바

-CSS가 있어야지 배치가 의미 있음..

-figure도 div느낌, figurecaption 통해서 좀 더 유익하게 구현 가능

*기타 팁

-DTD document type definition = doctype

-열었으면 닫기

-소문자 사용

-쌍따옴표, 온따옴표 JS에서 읽을 때 차이가 있음... HTML에서는 일반적으로 쌍따옴표 계속 쓰면 됨~

-띄어쓰기, 공백, 점 등 조심하기

-이미지 alt값은 항상 넣기~

-complie언어는 미리미리 검사 / interpreter언어인 HTML, PHP, PYTHON 등은 나중에 검사하기에 오타 용납x

-HTML은 데이터의 크기가 클수록 시간, 전력소모가 크기에..... 코드 상 띄어쓰기 등 없이 최대한 간결하게!!

-never skip <title>

-charset은 always UTF-8

-이메일 : smtp / 내부 네트워크 : udp / 파일 FTP

-XML은 HTML 기반에서 좀 더 동적으로 변한것이라 생각하면됨; 현재는 거의 쓰지 않음(JS 때문)

-SVG는 프론트 분야 기술; 적은 용량으로 이미지 표현 가능

-트래픽 자체가 돈이기에... 적은 용량이 무조건 이득임..

'react & react native' 카테고리의 다른 글

April 1~28, 2021 - Front-end(JavaScript) (0)	2021.05.02
April 1~28, 2021 - Front-end(JavaScript) (0)	2021.05.02
April 1~28, 2021 - Front-end(Javascript) (0)	2021.05.02
April 1~28, 2021 - Front-end(CSS) (0)	2021.05.02
April 1~28, 2021 - Front-end(HTML) (0)	2021.04.30

'react & react native' Related Articles

Comments

jongviet

April 1~28, 2021 - Front-end(HTML) 본문

April 1~28, 2021 - Front-end(HTML)

'react & react native' 카테고리의 다른 글

티스토리툴바