# 1-1. 우리가 알아야 할 HTML 기본 상식
HTML란?
- 웹에서 사용하는 문서를 만드는 언어. 브라우저를 통해 내용이 나타난다.
- 각 브라우저의 엔진이 HTML을 해석하고 CSS에 정의된 스타일로 화면에 배치한다. 엔진은 Webkit, Geckp. Blink로 분류된다.
- HTML로 만들어진 정보를 수진하여 저장하는 일을 크롤링이라 한다. 이러한 검색 엔진 최적화를 위해 콘텐츠의 구조와 의미까지 구분하여 HTML을 작성하는 것이 좋다.
- <meta> 태그는 검색 엔진을 최적화 하고 하나의 웹 사이트 정보를 담는 중요한 태그이다.
기본구조(자료실에서 제공)
<!DOCTYPE html>
<html>
<head>
<title>이지스퍼블리싱</title>
<meta charset="UTF-8"><!-- HTML5의 인코딩 지정 방법 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 호환성 보기 기능 활성화 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"><!-- 화면에 보이는 영역으로, 너비를 현재 기기의 width로 정하고 포기 화면 배율을 1로 지정 -->
<!-- 전화, 주소, 이메일 자동 링크 없앨 때 -->
<!--<meta name="format-detection" content="telephone=no, address=no, email=no" />-->
<!-- 기본 포맷 삭제 -->
<!--<meta name="format-detection" content="no" />-->
<!-- 아래는 오픈 그래프 속성으로, 소셜 미디어와 같은 사이트로 공유될 때 여기에 작성된 내용을 기준으로 데이터 표시 -->
<meta name="title" property="og:title" content="이지스퍼블리싱">
<meta name="images" property="og:image" content="./images/link_thumb.jpg">
<meta name="description" property="og:description" content="이지스퍼블리싱">
<meta name="type" property="og:type" content="article">
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ui.css">
</head>
<body>
</body>
</html>
- <!DOCTYPE html> : HTML이 지켜야 할 표준을 알려주는 DTD. 모든 HTML 문서가 필요하다.
- <html> : HTML의 시작을 알리며, 웹 문서 전체를 감싼다.
- <head> : <title>, <meta> 태그 그리고 CSS 파일과 자바스크립트 파일이 있다.
- <title> : 웹 브라우저의 툴 바에 표시되는 현재 문서의 제목
- <meta> : 현재 HTML의 모든 정보를 요약해서 단는 데이터.
- <script> : 외부 자바 스크립트 파일로, src 속성으로 외부 파일을 가져와서 사용한다.
- <link> : 별도의 CSS 파일을 연결한다.
- <body> : 브라우저에 표현되는 내용을 담고 있는 HTML의 본문 태그
- </html> : 본문 태그와 전체적인 HTML 작성을 마치고 사용하는 태그
# 1-2. 웹 페이지를 시각화하는 CSS
CSS란?
- 시각적인 표현을 위한 언어이다. 종속형 스타일 시트로, 상속시켜 적용한다.
- HTML의 정적인 정보를 동적으로 표현할 수도 있다.
- 모든 브라우저에 페이지가 동일하게 보이도록 CSS에 모든 태그의 기본 스타일을 지우고 각 태그를 시키는 것을 CSS 초기화라 한다. 일반적으로 마진과 패딩 등을 0으로 설정하여 재설정한다.
박스 모델이란?
- CSS와 HTML은 박스 모델이다. 즉, 각 사각형 박스로 각 요소를 표현한다. 사각형 박스는 마진, 패딩, 테두리, 콘텐츠 영역을 표현할 수 있다.
- 콘텐츠 영역 : 실질적인 내용이 담기는 부분
- 패딩 : 내용과 테두리의 간격
- 테두리 : 내용과 패딩 주변을 감싼다.
- 마진 : 테두리의 영역을 감싼다. 실제 크기(width)에는 포함되지 않는다.
inline-block
- block : 레이아웃을 결정하는 HTML 태그로, 일반적으로 줄 바꿈이 되는 요소이다. 화면 전체(width)를 사용한다. 다른 block의 요소와 inline을 포함할 수 있다.
- inline : width를 지정하지 않아도 태그 안의 콘텐츠만큼 width를 차지한다. 다음에 오는 태그는 줄바꿈되지 않고 오른쪽으로 붙는다. block요소는 올 수 없고, inline은 포함할 수 있다.
- inline-block : 태그의 기본 형태는 inline과 block이다. 기본적으로 inline 형태지만 block 요소(높이, 넓이)를 사용할 때 쓰이는 속성이다.
margine과 padding
- 박스 모델의 여백을 지정하는 두 CSS 속성이다.
- 패딩 : 태그가 가진 여백(width에 포함된 값, width = 콘텐츠 영역 + padding)
- 마진 : 태그의 바깥쪽 여백(width가 포함되지 않은 값, width = 콘텐츠 영역), 즉 마진은 태그에 포함되지 않은 영역이므로 배경이미지가 주어질 때 조금만 나타난다.
- 두 차이를 고려해서 계산하는 불편한 점을 위해 BOX-SIZING을 이용한다. border-box(테두리를 포함한 크기 지정), content-box(콘텐츠 영역만 지정)
CSS 선택자 - 가상 클래스 선택자, 가상 요소
- 선택자 : CSS에서 속성값을 지정하기 위해 class 또는 id를 작성하여 정의하는 것.
- 가상 클래스 선택자 : HTML 태그를 기준으로 선택자를 만들어 스타일을 정의한다. 태그에 불필요한 클래스를 넣지 않아도 된다.
- 특히 nth-child(태그의 단순 순서)와 nth-of-type(특정 요소 중 n번째)가 많이 사용되는 가상 클래스 선택자.
- 의미없는 태그 혹은 가상 처리를 위한 before, after 가상요소가 있다. 주로 시각적인 효과를 위해 사용.
- transition(시간에 따라 요소가 변함), transform(형태 변형) 속성을 이용해 애니메이션을 구현할 수 있다.
- flexbox를 이용해 레이아웃을 간단하게, 알아서 공간 분배를 하도록 정렬할 수 있다.
# 1-3. 동적인 웹 페이지를 만들어 주는 자바스크립트
자바스크립트란?
- HTML, CSS를 동적으로 제어하는 스크립트 언어
- if문, for문, switch문, while문 등이 있다.
# 1-4. 알아 두면 유용한 제이쿼리
제이쿼리(jQuery)란?
- 자바스크립트의 생산성을 향상시켜 주는 자바스크립트 라이브러리.
- 멀티 브라우저 지원 기능을 가지고 있어 다양한 브라우저에서 사용 방법이 다른 스크립트를 하나로 사용할 수 있게한다.
- CDN 호스트(인터넷이 연결된 곳에서 사용), 파일을 다운로드해서 사용한다.
- 체인(연속적인 동적 제어), 트래버싱(체인 연장), 이벤트(시스템에서 일어나는 사건 제어), 애니메이션 등의 기능이 있다.
# 1-5. 자원과 시간 낭비를 막아주는 Ajax
Ajax란?
- 자바스크립트를 이용해 비동기식으로 서버와 통신하는 방식
- 한 화면에 두 가지 내용을 독립적으로 표현하는 경우에 사용한다.
# 2-1. 개발 도구 설치하기
책에서는 서브라임 텍스트를 사용하지만...나는 익숙한 VSC를 이용할 예정이다.
기본적인 jQuery나 자바스크립트 파일은 내가 만들어야 함.
# 2-2. 브라우저의 개발자 도구
개발자 도구란?
- 웹 작업을 도와주는 도구로, 웹사이트의 구조를 이해하거나 HTML을 만든 후 디버깅 할 때 유용하다.
- 모든 브라우저에서 F12를 누르면 개발자 도구 화면을 확인할 수 있다.
- HTML 태그를 검사하거나, 웹페이지에 사용된 리소스 열람 혹은 서버와의 통신 내역을 확인할 수 있다.
# 2-3. 크로스 브라우징
크로스 브라우징이란?
- 사용자가 어느 기기나 브라우저에서 웹 사이트에 접속해도 불편함 없이 웹 사이트를 사용하도록 웹 표준을 지켜 만드는 가이드.
- 프로젝트를 진행할 때 스탯 카운터를 활용하여 현재 브라우저의 점유율을 확인하여 대응 순서를 정한다.
- Can I use에 접속하여 내가 사용하는 CSS나 자바스크립트명을 넣고 브라우저 작동 범위를 확인할 수 있다.
- 벤더 프리픽스 : 브라우저별 접두어를 붙여 사용하며, 구형 브라우저를 사용하는 경우 기능을 제공하기 위해 사용한다.
# 회고
FE 공부를 위해 잠시 빌렸다. 2주 안에 끝낼 수 있을지는 모르겠지만...최대한 노력해봄.
이걸로 간단하게 기초만 하고 멋사 동아리 자료로 심화 + 복잡한 API 통신까지 도전해 볼 생각이다.
아마 공부하면서 여기에 좀 더 이해하기 쉽게 수정하지 않을까..해야 함.
빠르게 진도 나가려고 간단하게 작성했기 때문에...
아래에서 공부에 필요한 자료를 다운 받는다.
http://www.easyspub.co.kr/Main/PUB
www.easyspub.co.kr
'개인 스터디 > 정리' 카테고리의 다른 글
| Do it 웹사이트 따라 만들기 - 페이지 이동 효과 만들기 (0) | 2024.01.21 |
|---|---|
| Do it 웹사이트 따라 만들기 - 전체 레이아웃 만들기 (1) | 2024.01.21 |
| [Django] Do it 장고+부트스트랩 16주차 정리 (0) | 2023.03.13 |
| [Django] Do it 장고+부트스트랩 13~15주차 정리 (0) | 2023.02.26 |
| [Django] Do it 장고+부트스트랩 9~12주차 정리 (0) | 2023.02.20 |
