[1주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : HTML로 시작하기

이번에 K-디지털 기초역량훈련으로 패스트캠퍼스 프론트엔드 8주 완성 with React를 시작했다.

매주마다 학습일지를 작성하여 나만의 개발노트를 완성해보자!✍

---

HTML, CSS는 기존에 알고있던 내용에 대해서는 작성하지 않고, 다음 내용들 위주로 정리해 보기로 하자.

• 알고있었지만, 불확실하였던 내용
• 이번에 처음 알게된 내용

---

웹앱의 동작원리

위 1~4 순서로 웹앱이 동작하게 된다.
주소창에 원하는 주소를 입력하면 서버로 HTML을 요청하게 되고, 해당 HTML을 파싱하면서 필요로하는 CSS,JS, 이미지... 등을 추가로 요청하게 된다. 서버는 해당 추가 요청에 대한 추가응답을 해 줄 것이다. 이를 브라우저가 해석하여 사용자 화면에 그려주게 되는(rendering) 것이다.

 

우리는
1. HTML, CSS, JS 등으로 사용자에게 보여질 웹페이지를 만들기

2. 서버에 업로드

해 두면, 사용자는 위 이미지와 같은 과정을 통해 우리가 구현하고자 하는 웹앱을 볼 수 있게 된다.

---

용어 정리하기

개발은 협업을 통해 이루어진다. 따라서 용어를 통일하는 것이 중요한데, 이번 학습에 포함된 특수 문자 용어 중 위 기준에 해당하는 것들을 기록해 본다.

 

`	Backtick, Grave
~	Tilde
!	Exclamation mark
$	Dollar sign
^	Caret
-	Hyphen, Dash
_	Underscore, Low dash
"	Quotation mark
.	Period, Dot
|	Vertical bar

항상 헷갈리던 괄호

()	Parenthesis	소괄호
{}	Brace	중괄호
[]	Bracket	대괄호
<>	Angle Bracket	꺽쇠괄호

 

 

---

Block요소, Inline 요소

https://www.w3schools.com/html/html_blocks.asp를 통해 추가 학습한 내용

HTML Block and Inline Elements

HTML에는 Block레벨 요소와 Inline요소가 있다.

Block레벨 요소는 항상 새 line에서 시작하고, 브라우저는 자동적으로 margin을 해당 요소 앞 뒤에 추가한다.

기본적으로 width가 가득차있다.

inline요소는 매번 새 line에서 시작하지는 않는다.

필요한 영역만을 차지하게 된다.

---

<input type="radio">

<label><input type="radio" name="hobby"/>독서</label>
<label><input type="radio" name="hobby"/>영화감상</label>

 

label은 input태그를 감싸고 있어도 되고,input과 형제 태그로 존재시켜도 된다.

하지만 radio는 group 중 하나를 선택하는 것이므로 같은 group인 경우에는 동일한 name으로 묶어주어야 한다(위 코드에서 hobby)

 

---

HTML data-* 속성

전역 속성 중 data-* 속성은 커스텀 가능한 속성이다. 

반드시 data-name과 같이 data-를 prefix로 작성해야하고, 대문자를 포함해서는 안된다.

이 속성의 값으로는 string 타입을 넣을 수 있다.

 

getAttribute()와 dataset과 카멜케이스를 조합하여 value를 찾을 수 있다.

 

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

위와 같은 코드가 있다고 하면, (출처: https://www.w3schools.com/tags/att_global_data.asp)

function showDetails(animal) {
  console.log(animal.getAttribute("data-animal-type"), "getAttribute");
  console.log(animal.dataset.animalType, "dataset");
}

와 같은 코드로 아래와 같은 콘솔 출력 결과를 얻을 수 있다.(bird 클릭시)

bird getAttribute
bird dataset

---

CSS 선택자

복합선택자

• 일치 선택자 : 붙여쓴다.
  span.orange span태그에 해당하면서 class명 orange인 경우
• 자식선택자
  ul > .orange ul의 자식요소인 class명 orange인 요소
• 하위(후손)선택자
  div .orange div의 하위요소(직접 자식이 아니어도 됨)
• 일반형제 선택자
  .orange ~ li orange 클래스의 다음 형제 li를 모두 선택한다.

가상클래스 선택자(Pseudo-Classes)

• ABC:first-child
  선택자ABC가 형제 요소 중 첫째인 경우
  .fruits span:first-child fruits클래스의 첫번째 자식이 span인 경우에만 선택된다.
• ABC:last-child
  선택자 ABC가 형제 요소 중 막내라면 선택된다.

속성 선택자(Attribute)

<input type="text" value="" disabled>
<input type="password">

[disabled] {
	color: red;
}

[type] {
	color: red;
}

[type="password"] {
	color: blue;
}

---

선택자 우선순위

어떤 style 선언 속성을 우선 적용할지 결정하는 방법

점수가 높은 선언이 우선한다. 같은 점수라면, 마지막 선언이 우선한다.

 

• !important : 사용 지양. 꼭 필요한 경우에만
• inline style : <div style="">
• # : id 선택자
• . : class 선택자
• 태그 선택자
• * : 전체 선택자