Front-end 국비지원 #001일

NuyHes·2022년 10월 12일
0

크로스 브라우징 (Cross Browsing)

[ Cross Browsing ]
크로스 브라우징은 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 운용체계나 HTML 렌더링 기술로 웹페이지를 제작하는 방법론이다.

크로스 브라우징은 다양한 컴퓨터 환경이나 브라우저에서 정보를 동일하게 표현하기 위해 필요하다. 대부분 인터넷 익스플로러, 오페라(Opera), 파이어폭스(FireFox), 그리고 매킨토시 운용체계의 사파리(Safari)에서 동일한 웹이 다르게 표현될 수 있다. 크로스 브라우징은 일반인이 아닌 다양한 사용자, 즉 나이가 어린 사람, 시각 장애인, 노약자가 웹을 쉽게 사용할 수 있도록 돕는다. 텍스트, 폰트 설정, 테이블, 대체 태그, 접근성 시험에 대한 W3C의 웹 표준을 활용하면 다양한 웹 브라우징 환경에서도 동일한 웹을 균등하게 표현할 수 있다.
[네이버 지식백과] 크로스 브라우징 [Cross Browsing] (손에 잡히는 IT 시사용어, 2008.02.01)

브라우저 종류 : 크롬, 사파리, 파이어폭스, 오페라, 엣지 등

텍스트 에디터 (Text Editor)

-Sublime Text3
-Atom
-Visual Studio code
-Notepad++
-UltraEditor

종류는 이렇게 다양하지만 수업에서는 'Visual Studio Code'를 사용했습니다.

Visual Studio Code (vscode) 설치,설정

구글에서 Visual Studio Code or vscode 를 검색합니다.

vscode 홈페이지에서 파란색 Download 버튼을 클릭하여 설치합니다.

설치후 테마를 설정합니다.

확장메뉴를 선택하고 필요한 확장프로그램을 설치합니다.

  1. Korean pack (비주얼 스튜디오 코드를 한글로 설정)
  2. Live server (새로고침하지 않아도 라이브로 반영되어 변경사항을 바로 확인)
  3. Auto rename tag (HTML 등 태그의 이름을 바꾸면 쌍을 이루는 닫힘 태그 동시 변경)
  4. Htmltagwrap (시작 태그를 만들면 끝 태그 자동생성)
  5. Html tag wrapper (동일)
  6. Open in browser (작성한 코드를 단축키를 이용해 브라우저 바로 실행)

Visual Studio Code 단축키


주석문 : Shift+option(Alt)+A


복사 : Shift+option(Alt)+방향키아래


열고/닫기 태그달기 : ex)마크업 드래그+option(Alt)+W


ul>li 감싸지는 단축키 : ul>li+TAB


ul>li4(생성할 개수) 감싸지는 단축키 : ul>li4(4개)+TAB


ul>li>a 하이퍼링크까지 달린 태그 생성 : ul>li>a+TAB

HTML 태그

  • HTML 기본
<!DOCTYPE html> <!-- 선언문 html5선언-->
<html lang="ko"><!-- 한국어 -->

<head>
	<meta charset="UTF-8"><!-- 문자인코딩 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>첫수업</title>
	<link rel="stylesheet" href="./css/style.css"> 
    "한 후 ctrl 링크 클릭 / CSS파일을 생성후 CSS파일에서 따로 관리하는 방법"
</head>

<body>
	<!-- 본문내용 -->
	
	<h1>html5</h1>
</body>
</html>
  • 제목태그
<H1></H1> : H1~H6 제목 태그 6가지의 폰트로 구성이 되어있습니다.
<H1>hellow</H1>
<H2>hellow</H2>
<H3>hellow</H3>
<H4>hellow</H4>
<H5>hellow</H5>
<H6>hellow</H6>

hellow

hellow

hellow

hellow

hellow
hellow
  • 줄바꿈 태그
<br> , <P></P> : <br> 태그는 줄바꿈을 정의합니다. 
의미적으로 한 단락이라면 <P>태그 사이에 기입해야 합니다. 
의미적으로는 하나 이지만, 가독성을 위해서 줄바꿈을 할 경우 
<br>태그를 사용합니다. <br>은 닫을 필요가 없는 태그이지만 
<p>태그는 </p>닫아주어야 합니다.
<p>
	p는 문단을 구성하는 요소이며 br은 단순 줄바꿈 용도로 사용한다. 
    <br>br 요소의 경우 종료태그가 없이 사용된다. 
</p>

p는 문단을 구성하는 요소이며 br은 단순 줄바꿈 용도로 사용한다.
br 요소의 경우 종료태그가 없이 사용된다.

  • 블록요소
<h2>블록요소</h2>
		<ul style="background:green; margin: 0; padding: 0;">
			<li>줄바꿈이 일어난다</li>
			<li style="background:red">블록요소 안에는 텍스트(문자)와 <strong>인라인요소</strong>를 포함할수 있다.</li>
			<li>블록요소 안에는 블록 요소가 포함 될수 있지만 경우에 따라 포함될수 없는 요소도 있다.</li>

블록요소

  • 줄바꿈이 일어난다
  • 블록요소 안에는 텍스트(문자)와 인라인요소를 포함할수 있다.
  • 블록요소 안에는 블록 요소가 포함 될수 있지만 경우에 따라 포함될수 없는 요소도 있다.
  • 인라인요소
<h2>인라인요소</h2>
		<div>
		<ul>
			<li>줄바꿈이 일어나지 않는다</li>
			<li>인라인 요소 안에는 텍스트(문자)와 인라인 요소를 포함할 수 있다.</li>
			<li>인라인 요소는 블록 요소를 포함할 수 없다. 그치만 예외 a태그 예외</li>
			<li>인라인 요소와 텍스트는 블록 요소 안에 포함되어야 한다.</li>

인라인요소

  • 줄바꿈이 일어나지 않는다
  • 인라인 요소 안에는 텍스트(문자)와 인라인 요소를 포함할 수 있다.
  • 인라인 요소는 블록 요소를 포함할 수 없다. 그치만 예외 a태그 예외
  • 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 한다.

*인라인인지 블록인지 헷갈리면 자기자신만 색이 바뀌는지 style background color : red 를 넣어서 인라인 블록 구분해보기

  • span, div 태그
<span> 태그개요
<span></span> 태그는 <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰입니다.

<div> 태그와의 차이점은 display속성이 block이 아닌, inline이라는 점인데, 이는 CSS display 항목에서 세부 정보를 알 수 있습니다.
이 둘의 차이를 쉽게 설명하자면, <div>는 줄 바꿈이 되지만, <span>은 줄 바꿈이 되지 않다는 점입니다.
<div> 와 <span> 태그는 영역을 설정할 때 필요합니다. 
웹 페이지에 레이아웃을 구성하고자 할 때 없어서는 안되는 태그입니다. 그럼 두 태그의 차이는 무엇일까요? 두 가지가 있습니다. 하나는 줄 바꿈 입니다. 
div 는 줄 바꿈이 되지만 span 태그는 옆으로 붙습니다. 
두 번째 차이는 영역을 지정하는 방식의 차이입니다. 텍스트를 표현할 때 div 는 사각형 박스로 구역을 정하지만 span 은 문장 단위로 지정합니다.

사용법
<span>내용</span>
예제
<html>
<body>
	<span style="background-color:red">span1</span>
	<span style="background-color:blue">span2</span>
	<span style="background-color:green">span3</span>
</body>
</html>

  • 반응형 웹페이지 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 반응형페이지 만들때 필요함
  • style background color 넣기
<!DOCTYPE HTML>
<html>
	<head>
		<title> 제목 서식과 문단 편집에 관련된 요소 </title>
		<meta charset="UTF-8">
		<style>
			h1 {background-color: chocolate;} "h1"에 백그라운드 컬러
			span {background: green;} "span"에 백그라운드 컬러
		</style>
  • abbr, address, strong, sub, sup, b, q, q cite 태그
<!DOCTYPE HTML>
<html>
<head>
	<title> 텍스트 관련 요소의 사용 </title>
	<meta charset="UTF-8" />
	<style>
		*{margin: 0; padding: 0;}
	</style>
</head>

<body>
	<!-- 텍스트에 관련된 표준 요소를 사용합니다. -->
	<h1> 텍스트 관련 요소의 사용</h1>
	<h2>abbr </h2>
		<p>독일 고급 와인의 범주로 
			<abbr title="Qualitatwein besttimmter Anbaugebiete; ", style="background:red;">Qba</abbr>가 있고 특정한 지역에서 <em>생산</em>되는 특별 <i>품질</i> 표기가 된 <abbr title="Qualitätswein mit Prädikat;", style="background:blue;">QmP</abbr>가 있다. 
		</p>
	<h2>address</h2>
	<address style="background:yellow; font-style: normal;">
	 Address: Dong Soong Dong, Jong Ro Gu, Seoul<br />
	 Phone: 02-3673-0113
</address>
</p>
	<h2>strong, b, sub, sup</h2> <!-- 인라인요소 줄바꿈이 없음 -->
	<p>캘리포니아 <strong>포도원</strong>은 크게 <b>3개</b> 지역으로 나파 밸리 <sub>Napa Valley</sub>와 소노마 카운티 <sup>Sonoma</sup> 지역,   중부 내륙의 산죠퀸 밸리<sub>San Joaquin Valley</sub>, 그리고 남부 해안지역의 몬트래이 카운티 Monterey County와 산타 클라라 Santa Clara 가 있다. </p>
	<h2>blockquote</h2>
	<p>마틴 루터 킹은 이렇게 말했다.</p>
	<blockquote>비폭력이란 강력하고 정당한 무기로서 상처없이 잘라내며 그것을 휘두르는 사람을 고상하게 만들어 준다. 비폭력은 치료의 검이다.</blockquote>
	<q>공자는 이렇게 말했다. <q cite="http://www.naver.com/">배우고 때로 익히면 또한 기쁘지 아니한가!</q></q>
	<p><q>공자는 이렇게 말했다. <q cite="www.naver.com">배우고 때로 익히면 또한 기쁘지 아니한가!</q></q></p>

	<h2>추가글과 삭제글</h2>
	<p>정기세일: <del>20221012~20221030</del></p>
	<p>정기세일: <s>20221012~20221030</s></p>
	<p>정기세일: <ins>20221012~20221030</ins></p>
	<p>정기세일: <u>20221012~20221030</u></p>
</body>
</html>

Entity 코드를 이용한 공백 문자 및 특수 문자 삽입

&nbsp; [공백 엔티티 코드] 외워야함
<!DOCTYPE HTML>
<html>
	<head>
		<title> Entity  코드를 이용한 공백 문자 및 특수 문자 삽입 </title>
		<meta charset="UTF-8" />
	</head>

	<body>
		<h1> 
			Entity 코드를 이용한 공백 문자 및 특수 문자 삽입 </h1>
		<p>경기도 수원시 매산동 다산빌딩 3층 더휴먼아카데미 & xxx &#9742;031)1234-1234 &raquo;</p>

	</body>
</html>
profile
NuyHes
다음 포스트

Front-end 국비지원 #002일

2개의 댓글

comment-user-thumbnail
mikki
2022년 11월 14일

wow 멋진 시작이네요! 훌륭해요!

1개의 답글