[패스트캠퍼스] 국비지원 3일차 학습일지

2일차에는 알바와 퀸메이커 보느라 못하였다... 오늘도 알바를 끝내고 진행하였다.

 

1. html 문법

• 시작 태그 + 요소 (태그 사이에 있는 코드) + 종료 태그
• 부모 요소, 자식 요소
• 상위(조상) 요소, 하위(후손) 요소
• 속성과 값 (Attribute, Value)

상위 요소 ≠ 부모 요소

하위 요소 ≠ 자식 요소

 

빈 태그 : 이미지 태그, 메타 태그, 인풋 태그 등 내용 없는 태그

각각의 역할을 명확히 하기 위하여 속성과 값 명시하는 경우가 많다.

엄격한 문법 지키는 것이 안전하다.

이미지 태그는 이미지 경로와 이미지 이름 → 필수 속성

인풋 태그는 데이터 입력받는 태그

 

요소가 화면에 출력되는 특성

• 글자 : 인라인 요소
• 상자 : 블록 요소

 

인라인 요소	블록 요소
수평으로 쌓임 상하좌우 자동으로 줄어듦 너비, 높이 지정 불가 마진, 패딩 좌우로만 가능, 상하 불가	수직으로 쌓임 너비 자동으로 늘어나고, 높이는 자동으로 줄어듦 너비, 높이 지정 가능 마진, 패딩 상하좌우 지정 가능

 

헷갈리는 부분 : 인라인 요소 상하 패딩 불가능하다고 했는데, 패딩을 늘리면 늘릴수록 왜 점점 늘어날까?

 

상하 패딩 비교하기

 

상하 패딩을 적용하였을 때, 위의 패딩을 보면 글자의 위치는 변함이 없었다. 따라서 영향 끼치지 않음.

아래의 패딩을 살펴보면, 늘어나는 것 처럼 보이지만, div 태그를 넣어주었을 때 노란색 박스 안에 입력된다. 따라서 영향 끼치지 않음.

 

참고 블로그

https://hoya-kim.github.io/2021/08/25/padding-on-inline-element/

inline요소는 정말 상하 padding이 적용되지 않을까?

 

• html : 문서 전체 범위, html 버전 지정
• head : 정보 (눈에 보이지 않음)
• body : 구조 (눈에 보임)

 

1. div 태그 : 의미 없는 레이아웃을 위한 태그
2. h1 ~ h6 태그 : 제목 의미하는 태그 (h1 대주제, h2 ~ h4 많이 이용)
3. p 태그 : 문장 의미하는 태그
4. img 태그 : 이미지 삽입하는 태그, 필수 속성 존재
5. ul 태그 + li 태그 : 순서 필요없는 목록과 항목 의미하는 태그
6. a 태그 : 하이퍼링크 지정하는 태그
7. span 태그 : 특별한 의미 없이 구분하기 위한 태그
8. br 태그 : 줄바꿈 태그
9. input 태그 : 데이터 입력 태그 (inline-block 요소 : 글자 요소, 그러나 상자 요소 몇 가지 가지고 있음. 너비, 높이, 패딩, 마진 지정 가능하기 때문)  주요 속성 : value, placeholder, disabled, checked
10. label 태그 : label 태그로 각각을 감싸서 같은 name을 지정하면, 체크박스에서 택 1 가능하게 할 수 있다.
11. table 태그 : tr 태그, td 태그 (행 먼저 작성하고 열 작성하기. ) ≠ 블록 요소 ≠ 인라인 요소

 

주의할 점 : html로 예쁘게 만들 생각하지 말기. cdn 적용해서 기존에 적용된 스타일 모두 제거하기.

 

2. html 전역 속성

• title : 정보나 설명 (hover 시에 설명 보여준다.)
• style : 스타일 지정
• class : 중복 가능한 이름 (wrapping 시에 유용하다. ← 데이터를 제어하기 위함)
• id : 중복 불가능한 이름
• data - 이름 = "데이터" : html에서 지정한 데이터를 js에서 제어 가능하다.

<span class="span1">Hello, World!</span>
<span class="span2">Hello, World!</span>
<div data-name="data-naming">데이터 지정하기</div>

const dataNaming=document.querySelector("div")
console.log(dataNaming) // 태그 내용 가져오기.
console.log(dataNaming.dataset.name) // dataNaming의 태그의 이름 가져오기.

 

3. css 기본 문법

• 선택자 : 대상
• 속성 : 스타일 종류
• 값 : 스타일 값

 

4. css 선언 방식

• 내장 방식 : 유지 보수 측면에서 마이너스
• 인라인 방식 : 유지 보수 측면에서 마이너스 + 지나치게 우선됨
• 링크 방식 : 병렬 방식 (한꺼번에 가져와서 연결)
• @import 방식 : 직렬 방식 (고의로 늦게 연결되는 상황을 유도하는 경우 이용 + 순서 존재)

 

5. css 선택자

잘 알아두면 유용하니, 익숙해지기.

기본 선택자	복합 선택자	가상 클래스 선택자	가상 요소 선택자	속성 선택자
* 모든 요소 선택 태그 이름 태그 선택 .클래스 선택자 #아이디 선택자	일치 선택자 동시 만족 선택 조상 > 후손 자식 선택자 띄어쓰기 하위 선택자 + 인접 형제 선택자 다음 형제 요소 1개  ~ 일반 형제 선택자 다음 형제 요소 모두	hover 마우스 커서 올라간 동안 active 마우스 클릭하고 있는 순간 focus 마우스 포커스되는 순간 tabindex 이용하면 focus 아닌 요소를 focus 요소로 변경 가능, But 1개만 가능하게 함. :first-child 형제 요소 중 첫 번째 :last-child 형제 요소 중 마지막 위의 2개는 하위 요소가 일치하지 않으면 출력되지 않음. :nth-child 형제 요소 중 n번째  짝수 번째 : 2n 홀수 번째 : 2n+1 (Zero-Based Numbering) :not 아닌 요소	::before + content 요소 내부 앞 ::after + content 요소 내부 뒤 너비, 높이 지정하고 싶은 경우에는 블록 요소로 변경하기. html 덜 복잡하게 만들고, css에서 제어 가능하게 만듦.	[속성] 속성 포함한 요소 선택 [속성="값"] 속성="값"인 요소 선택

 

6. 스타일 상속과 강제 상속

• 스타일 상속 : 자손 또는 자식에게 스타일 상속, 모두 글자와 문자와 관련된 속성들
• 강제 상속 : 상속되지 않는 스타일을 강제적으로 적용하기. 자손 또는 자식에 inherit 넣어주면 된다.

 

7. 선택자 우선 순위

• 점수 높으면 우선시 함.
• 점수 같으면 마지막으로 해석된 선언 우선시 함.

• 상속되는 선택자, not 가상 클래스 연산자 : 점수 매기지 않음
• 전체 선택자 : 0점
• 태그(요소) 선택자 : 1점
• 클래스 선택자 : 10점
• 아이디 선택자 : 100점
• 인라인 요소 : 1000점
• !important : 무한대 점수

점수 계산 중요 (명시도)