멋쟁이사자 FE7

멋쟁이사자 FE7 3일차

FrontEnd 개발자 준비생 최현우 2023. 7. 5. 16:18
728x90

태그 (Tag)

어떤 표시를 하기 위해 붙인 꼬리표. 웹 문서에 정보를 정의해 주는 형식입니다.

기본적으로 <> 시작 태그(여는 태그) </> 종료 태그(닫는 태그)의 쌍으로 구성되어 있습니다.

 

HTML

HTML 문서의 루트, 최상단 요소입니다

lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다.

주 언어 설정은 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미치게 됩니다

 

HEAD

기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다.

검색엔진을 위한 다양한 정보들이 담기는 곳입니다.

사용자에게는 제목(title), 파비콘(favicon), 뷰포트(viewport) 정보 등이 보이게 됩니다

 

charset

<meta charset="utf-8">

 

문자 깨짐 오류가 발생할 수 있으므로 문자 코드의 종류를 설정해 줍니다.

utf-8 은 전 세계적인 언어들을 지원하도록 합니다. 그래서 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있습니다. 국제적인 코드 규약입니다.

 

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

 

width: 뷰포트의 너비를 제어합니다.

height: 뷰포트의 높이를 제어합니다.

initial-scale : 페이지가 처음 로드될 때 확대/축소 수준을 제어합니다. 최소 0.1 - 기본 1 - 최대 10

minimum-scale: 축소 정도를 제어합니다.

maximum-scale: 페이지에 허용되는 확대 정도를 제어합니다. 3보다 작은 값은 접근성에 맞지 않습니다

user-scalable=no과 속성을 주어 사용자가 화면크기를 제어 못하게 하는 경우도 있습니다. 하지만 다양한 디바이스 크기, 노안, 저시력 등의 다양한 상황을 고려해야 하므로 특수한 상황이 아니라면 사용하지 않는 게 좋습니다.

 

title

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함하세요(특수 문자 X)

 

link

현재 문서와 외부 리소스의 관계를 명시합니다.

rel: relations 관계. 대상 파일의 속성을 나타냅니다

href: hyper-references 경로. 연결 시 참조할 파일의 위치를 나타냅니다.

<html>
<head>
  <!-- 스타일 시트 링크 -->
  <link rel="stylesheet" href="style.css">
  
	<!-- 폰트 링크 -->
  <link rel="stylesheet" href="font.ttf">
  
</head>
<body>
</body>
</html>

 

body

body 태그는 사용자에게 보이는 영역입니다.

 

CSS란? 

CSS는 Cascading Style Sheets의 약자입니다.

Cascading: 연속화

CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됩니다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다.

 

멋사 프론트엔드 스쿨 참조

 

개별로 인라인 스타일 적용하기

 

<section>
	<h1 style="color:red;">Hello</h1>
	<h2 style="color:red;">Hello</h2>
	<p style="color:red;">Hello</p>
</section>

 

태그 선택자 적용하기

<section>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</section>

<!-- css -->
h1{color:red;}
h2{color:red;}
p {color:red;}

 

그룹 선택자( , )로 적용하기

<section>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</section>

<!-- css -->
h1, 
h2,
p {color:red;}

 

상속 이용하기

<section>
	<h1>Hello</h1>
	<h2>Hello</h2>
	<p>Hello</p>
</section>

<!-- css -->
section{
	color:red;
}

 

 

전체 선택자

html를 포함한 HTML 문서 내의 모든 요소를 선택합니다. * (별표, 애스터리스크) 사용하여 선택할 수 있습니다

* {
	margin:0;
	padding:0;
}

 

태그 선택자

특정 태그를 선택합니다

h1 {
	font-weight:bold;
}
p{
	font-size: 24px;
}

 

아이디 선택자(#)

HTML 페이지 내에 id는 유일해야 합니다!

<header id="header">
...
</header>

<!-- css -->
#header {
	padding: 10px;
}

 

클래스선택자(.)

<h1 class="fc-red">hello wolrd</h1>
<p>Lorem ipsum dolor sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>

<!-- css -->
.fc-red {
	color: red;
}

클래스 선택자는 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있습니다. 재사용성이 높습니다.

id, class는 숫자로 시작하면 안 됩니다!. 1 class .1class (X). class1(O)

하이픈(-)과 언더바(_), 문자로만 시작할 수 있습니다..-class(O)._class(O).$color(X)

 

특성선택자 [ ]

[type="button"]{
	border:0;
	cursor:pointer;
}
[class^="btn"]{
	color:#fff;
	background: royalblue;
}

주어진 특성을 가진 모든 요소를 선택합니다

 

그룹선택자 (,)

h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}

<!-- css -->
h1, h2, h3, h4, h5, h6{ font-weight:bold;}

 

자손선택자()

자식, 자손 모두를 선택할 수 있다

공백, 띄어쓰기를 통해 구분합니다!

section p{
  font-weight:bold;
}

 

자식선택자(>)

>를 통해 구분한다.

직계자손만을 선택합니다.

section > p{
  color:royalblue;
}

 

일반형제선택자(~)

~통해 구분한다.

뒤에 나오는 형제만 선택한다

h1 ~ p{
  text-decoration:underline;
}

 

인접형제선택자(+)

+를 통해 구분한다.

바로 뒤에 인접한 형제만 선택한다

h1 + p{
  background:yellow;
}

 

css 상속

SS에는 상속되는 속성이 있고, 상속되지 않는 속성이 있습니다

color 속성은 상속됨, width, height, margin, padding, border 와 같은 것은 상속되지 않습니다.

inherit: 선택한 요소에 적용된 속성값을 부모와 동일하게, 즉 상속받게 합니다.

initial: 브라우저 기본 스타일 속성을 따르게 합니다.

button , input 요소처럼 form 관련 태그들은 상속받지 않기도 합니다.

ㄴ 이것은 브라우저별로 적용된 스타일이 있기 때문입니다

 

h1, h2, h3, h4, h5, h6 태그

Heading: 제목

웹 페이지가 하나의 책이라고 생각한다면 제목 태그는 목차와 같습니다.

 

a 태그

  • href : hypertext reference (하이퍼텍스트 참조)
    • 절대 URL 연결
    • 상대 URL 연결
    • 같은 페이지의 요소로 연결
    • tel: 전화번호
    • mailto: 이메일주소
  • target  / <a> 태그의 target 속성은 링크된 문서를 클릭했을 때 문서가 열릴 위치를 명시합니다.
    • _self: 현재 페이지(기본값)
    • _blank: 새 탭
  • download: 링크 이동 대신 사용자에게 URL을 저장할지 물어봅니다.
  • 인라인 요소입니다

 

p 태그

paragraph의 약어로 하나의 문단을 나타냅니다.

HTML에서 문단은 이미지나 입력 폼 등 서로 관련 있는 콘텐츠는 무엇이나 될 수 있습니다.

블록 요소입니다

 

br 태그

break(line break)의 약어로 줄을 나눈다는 뜻입니다

텍스트 안에 줄 바꿈 처리를 해줍니다. 2번 연속하여 사용하지 않습니다.

 

wbr 태그

현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.

한글의 경우는 word-break:keep-all 속성과 함께 사용해야 합니다

word-break: 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀지 지정합니다.

keep-all :한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 같습니다.

 

strong 태그

중대하거나 긴급한 콘텐츠를 나타냅니다. 단어 또는 문장일 수 있습니다

기본적으로 굵은 글꼴이 적용됩니다.