[🦁 TIL 7일차] 6월 1일

근듀·2023년 5월 31일

FE 6기 TIL

프론트엔드스쿨 TIL

목록 보기

7/30

1. HTML 요소

✔️ 인터렉티브 요소

사용자와 상호작용을 할 수 있도록 제공한다.

<dialog>

열고 닫을 수 있는 대화상자 컴포넌트
WAI-ARIA, 의미를 갖지 않는 요소에 의미를 부여한다.
<div> 를 썼다면 role="dialog"로 역할 부여를 할 수 있다.
tabindex 특성을 사용해서는 안된다.

<details>

자세한 추가 정보를 제공하는 위젯, 토글
default close 속성

<summary>

<details> 요소에 추가되는 레이블(제목) 요소

✔️ 스크립팅 요소

웹 브라우저는 웹 문서에 자바스크립트 파일이 지정된 경우 해당 파일이 모두 다운로드 될 때까지 HTML 파싱을 중단한다. -> 코드해석을 중단, 그렇기 때문에 <script> 를 가장 마지막에 선언해야 한다.

<script>

Javascript 태그
async와 defer 속성이 추가 되었다.
async 는 Script의 다운로드가 완료되면 바로 실행을 하면서 HTML 파싱을 중단한다.
그래서 <body> 태그 가장 끝부분에 작성한다.
defer 는 Script 파일의 다운로드가 완료되었더라도 바로 실행하지 않고 HTML 파싱이 끝난 후 실행한다. 그래서 <head>안에서 선언해도 된다.

<noscript>

스크립트 유형을 지원하지 않거나 브라우저가 스크립트를 비활성화 한 경우 보여줄 Html 구획을 정의한다.

<canvas>

그래픽을 그리기 위한 수단을 제공한다.
애니메이션, 게임, 실시간 비디오 처리를 위해 사용한다.

✔️ 유저 인터렉션 속성

인터렉티브 요소처럼 사용자와 상호작용 할 수 있도록 만들어 주는 속성이다.

<hidden>

랜더링 되지 않게 해주는 속성

<tabindex>

요소가 포커스를 받을 수 있게 해준다.
tabindex="숫자" 탭키의 순서를 정해준다.
tabindex="-1" 선택 안되게 만들기

<accesskey>

전역 속성
키보드 단축키를 생성해주고 alt랑 같이 눌러주면 포커스가 된다.
accesskey="s" 는 alt + s 를 누르면 포커스

<contenteditable>

전역 속성
사용자가 요소를 편집할 수 있게 도와주는 특성

<draggable>

전역 속성
요소의 드래그 가능 여부를 정할 수 있다.

2. CSS

케스케이딩 스타일 시트(Cascading Style Sheet)
버전을 Level로 표현한다.
CSS Level 2.1 이후 등장한 최신 표준을 CSS 3라고 부른다.
레이아웃과 스타일을 정의할 때의 자유도가 높은 언어이다.
스타일 사용의 중요한 의의는 문서의 구조와 표현을 분리할 수 있다는 점을 들 수 있으며 이는 구조와 표현을 분리함으로써 문서 구조의 수정없이 스타일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미한다.
인덱스는 1부터 센다.
초창기에는 웹 ㅡ발우저별로 접두사를 붙였어야 한다. 하지만 현재는 최근 모던 브라우저들은 접두사 없어도 왠만한 CSS를 지원한다.
🔻 기본 문법

	selector {
    	property : value;
        property: value;
     }

3.CSS Style 방법

✔️ External Style Sheet

CSS 파일을 별도로 생성하여 HTML 문서에 연결하는 방식
<link> 를 이용하는 방법
@import 명령을 사용하는 방법

✔️ Embedded Style Sheet

Html <head> 안에 <style>을 만들어 적용하는 방식

✔️ Inline Style Sheet

Html 요소 안에 직접 적으로 선언하는 방식

🏷️ Embedded Style 보다 External Style을 쓰는 이유

1. 코드 재활용

2. 네트워크 사용량을 줄일 수 있다.
	외부 스타일의 경우 CSS는 한번 받아서 캐시(저장메모리)에 저장할 수 있어 성능면에서 더 좋다.

4. CSS color

색상명 직접 입력하기 yellow red ...
16진수 RGB 색상 값 #fff ...
256단계 색상 값 rgb(255,255,255)
백분율(%) RGB 색상 값 rgb(100%, 100%, 100%)
RGBA(레드, 그린, 블루, 투며도) rgba(255,255,255,0.5)
HSLA(색상, 채도, 명도, 투명도) ```hsla(0, 5%, 100%, 0.5)
현재 속성 컬러 그대로 사용currentcolor
투명 transparent

5. 선택자

✔️ 전체 선택자

	* {
   		property: value;
     }

✔️ 요소 선택자

	body {
   		property: value;
     }

✔️ 클래스 선택자

	.title {
   		property: value;
     }

✔️ 아이디 선택자

	#title {
   		property: value;
     }

✔️ 속성 선택자

	[href$=".pdf"] {
   		property: value;
     }

✔️ 자손 결합자

가장 마지막 선택자의 조상이 존재할 경우 선택자에 스타일을 적용할 수 있다.

	.title p {
   		property: value;
     }

✔️ 자식 결합자

가장 마지막 선택자의 부모 요소가 존재할 경우 해당 선택자에 스타일을 적용할 수 있다.

	.title > p {
   		property: value;
     }

✔️ 선택자 목록

	h1, h2, h3, h4 {
   		property: value;
     }

✔️ 가상 요소 선택자⭐

선택자에 추가하는 키워드로, 선택한 요소의 일부분만 스타일을 적용할 수 있다.
콜론 2개 ::

	p::first-line {
   		property: value;
     }

✔️ 가상 아이디 선택자⭐

선택한 요소가 특별한 상태일 때 선택하여 스타일을 적용할 수 있다.
콜론 1개 :

	:root {
		--primary-color: #373e6a;
		}

5. 상속

inherit
요소에 속성 값이 따로 지정되어 있지 않은 경우 발생한다.
기본적으로 부모 요소의 값이 설정되며 상속되지 않는 속성의 경우는 속성의 초기 값으로 설정된다.
상속 받은 값보다 내가 가진값의 우선순위가 더 높다.
글자색, 글자 디자인에 관련된 것들은 상속되지 않는다.
그 외에 공간에 관련된 것들은 상속된다.

6. 명시도와 우선 순위 ⭐⭐⭐

여러 스타일이 겹치는 경우 명시도(점수)가 높은 선택자의 스타일이 적용된다.
명시도는 선택자의 우선 순위를 결정하는 방법

!important > ID 선택자 > Class 선택자 > 요소, 가상요소 > 전체 선택자(*)

!important = ∞
ID 선택자 = 100
Class 선택자 = 10
요소 선택자 = 1
전체 선택자 = 0

7. 회고

오늘의 진도도 헬이다. 그런데 막상 정리해보니 별로 없는 것 같지만 그 안에 속성같은거는 제대로 공부를 못한 것 같다. 억지로 외우는 것보다 코드를 치면서 직접 경험하는게 더 빨리 외우고 이해할 수 있으니 괜찮지만 공부를 한 것 같지 않아 불안하다. 오늘 속도가 엄청 빨라서 결국 오후타임부터는 필기를 놓친 경우가 많다. 그런데 강사님께서 이렇게 천천히 나가는 처음이라고 하셨다. 이게 천천히라니...🥶 오늘 너무 졸려서 집중못한 것도 한몫했다. 어떻게 해야 잠이 깰까ㅠㅠㅠㅠㅠ 졸음과의 사투가 가장 힘들다.

오늘도 강사님께서 좋은 말씀을 많이 해주셨다. 머리로는 알고 있지만 계속 내가 생각했던 부분을 콕 집어서 말씀해주셔서 좋았다. 지금까지 내가 느낀 멋사의 장점 중 하나는 중간에 계속 멘탈 관리를 해준다는 것이다. 공부가 되고 있다고 느끼는데 막상 코드로 칠려고 하니까 잘 안되서 발전이 전혀 없는 느낌을 받아서 지치고 있는데 그런 멘탈을 관리해주신다

"급히 먹은 밥이 체한다, 여유로운 마음을 가지고 어제보다 성장했어라는 마인드를 가지자"
"동기는 같이 나아갈 수 있는 동료, 비교하지말자"
"천천히 가는 것을 두려워하지마라, 뒤로 가는 것을 두려워하라"

또, 좋은 개발자 코드는 패턴이 있어야한다고 했다. 잘 되있는 코드를 따라해보고 나만의 코드 스타일을 만들어보자!

그리고 드디어 회고조 결성!! 오늘은 마지막 2시간 동안 아이스브레이킹타임을 가졌는데 너무 어색해서 혼났다. 게다가 내 디스코드가 문제인지 랜덤하게 사람들이 말하는게 울렸다 안울렸다 해서 알아듣기가 너무 힘들어 대답을 잘 못했다. 여러 사람이 말하면 겹쳐져서 아예 안들린다💢 아주 별로! 일단 조장을 정했는데 지원자가 있어서 빠르게 정해졌다. 조장분이 적극적이여서 정말 다행이였고 감사했다. 대망의 조 이름 정하기 시간이 있었는데 멍드립하고 싶었지만 처음이라 부끄러워서 말을 잘 못했다...ㅎㅎ 다른 조 이름을 참고해서 우린 1조라 '1단 진행지켜조🔥 라고 정했다ㅋㅋㅋ 마음에 든다. 아직은 어색하지만 '1단 진행시켜조' 회고 열심히 해봅시다! 화이팅!!

근듀

프론트엔드 개발자 취준생입니다.

이전 포스트

[🦁 TIL 6일차] 5월 31일

다음 포스트