[멋사 프론트엔드 스쿨]9월 6일 화요일 TIL_Text-level semantics, Embedded content

<오전 class = "한재현 강사님 Text-level semantics">

Text-level semantics(텍스트 레벨 요소)의 특징

1. 가용 가능 범위만큼 영역을 점유한다. 
2. 자식으로 Sections, Grouping Contents를 배치할 수 없다.

 

<br> 줄 바꿈

 

<-- 주석을 남길 때 -->

• 협업시 코드에 대한 설명이 필요할 떄
  ex) 모듈,클래스의 이름과 설명
• 포트폴리오 만들 때 보는 사람을 위해 주석을 필히 꼼꼼하게 달아 놓자
  (사람을 뽑을 때 이 사람이 얼마나 협업 능력이 있는지 보기 때문에)

 

<wbr>

https://developer.mozilla.org/ko/docs/Web/CSS/word-break

word-break - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

 

CJK언어의 word-break 속성은 기본값이 break-all이다

(CJK언어= 중국어, 일어, 한국어)

 

<a>앵커

<a href="경로">

 

href=Hyper reference

책처럼 하이퍼 텍스트와 하이퍼 텍스트를 이어주는 링크이다

 

• 검색엔진이 페이지를 분석할 때 JS는 보지않고 HTML 태그만을 보고 판단하는데,
  하이퍼 레퍼런스가 없으면 웹에이전트가 이 앵커가 어디로 향하는지 알 수 없기 때문에 문법적 오류다
• "클래스 명"도 스크린리더가 읽어주지 않는다.
  alt 에 자세한 설명을 해주는게 친절한 웹페이지가 되겠다
• 타겟 = 속성 = 어트리뷰트 attribute

 

 

# 해쉬 링크

해쉬된 페이지 내 이동

 

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

scroll-behavior - CSS: Cascading Style Sheets | MDN

 

<b> 의미가 없으니까 쓰지말자

<strong> b태그처럼 글씨를 굵게 만들어 주면서 강조의 의미가 있다

 

<i> Italic  기울임, 전문용어, 소설이라면 등장인물의 생각과 같이 주위와 구분해야하는 부분

<em> 기울임, 강조의 의미

 

<dfn> 정의하는 용어(부모가 p,dt,dd,section 요소일 경우 여기에 대한 설명으로 간주한다)

 

<abbr> MZ세대 태그 약자를 나타낼때 쓴다

 

<sup> <sub> 윗첨자와 아랫첨자 ex)화학식,수학 제곱 표현

 

<span> 줄바꿈, 의미없이 묶어주어야할 때, div 처럼 최후의 수단으로 쓴다

---

<오후 class = "한재현 강사님 모두의HTML CSS 페이지 과제 코드 리뷰">

https://fontawesome.com/start

Font Awesome

https://getbootstrap.com/docs/4.0/components/carousel/

Carousel

• 캐러셀 carousel 인디케이터 indicator
• <address>는 꼭 주소 뿐만아니라 이 사이트의 주체가 되는 연락처도 된다
• Font Awesome 아이콘을 폰트 형태로 제공해 주는 사이트
• 무조건 크고 굵다고 제목은 아니다
  전체적인 내용을 보고 판단하여 제목<h1>을 정한다
• <ol start="10" reversed> 10부터 거꾸로 표현된다
• 피그마 사이트에서 Inspect contant

• 슬라이드의 내용을 먼저 파악한 후 이전,다음 슬라이드 보기 버튼 코드를
  배치해줌으로서 스크린리더 쓸 때 잘 파악 할 수 있도록 한다

---

<오후 class = "이호준 강사님 Embedded content">

Embedded content

<img src="" alt=""> source alternative text

 

이미지

• 상업적 용도 사용 가능
• 출처 안 밝혀도 됨
• 사업적 용도로 사용하여 돈을 벌었는지가 주요 쟁점
• 사용하지 않는 것을 권고

폰트

• 무료폰트(개인 무료폰트, 상업 용도 무료 폰트)
• 대기업 무료 폰트(한글은 제외 내용증명 날라온다)
• 저작권 꼭 확인하고 사용하기

X 서술자 화소 window.devicePixelRatio

W 서술자 이미지 넓이, x서술자와 쓸 수 없다

size 속성

<picture> 이미지 크기가아니라 아예 다른 포맷의 이미지로 보여줄 수 있다

media 속성

해상도에 따라 '다른 이미지'를 보여주고 싶을 때에는 picture를, 같은 이미지인데 해상도에 따라 더 높은 해상도 이미지를 보여주고 싶을 때에는 srcset을 사용합니다

https://developer.mozilla.org/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

반응형 이미지 - Web 개발 학습하기 | MDN

• 절대경로 : 현재 파일 위치에 상관없이 열 수 있는 경로
• 상대경로 : 나(지금 열려있는 파일)기준

window.innerWidth

 

type 속성

• 회사 컨벤션에 따라 사용하지 않는 태그들도 있다
• 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신기술을 제공하는
  크로스브라우징 (브라우저를 넘나드는) 기법을 ‘점진적 향상기법' 이라고 한다

 

이미지 포맷의 종류

• GIF(Graphics Interchange Format)
• JPG/JPEG (Joint Photographic Expert Group image)
• PNG (Portable Network Graphics)
• SVG (Scalable Vector Graphics)
• WebP (Web Picture Format)
• AVIF (AV1 Image File Format)

이미지가 많을 경우 이미지 압축을 하기도 한다

 

<iframe>

• 페이지에 유튜브 영상을 띄울 때 많이 사용된다
• 해킹의 위험이 있다

https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide

미디어 및 Web Audio API 자동 재생 가이드 - Web media technologies | MDN

 

<audio>

<vidio>

내일 한번 더 정리해주시기로 했다

 

연휴 때 심심하지 말라고(?) 공부할 강의들을 엄청 뿌려주셨다

 

공부할 것

피그마 사이트보고 마크업

30분 요약강좌 시즌1(HTML,CSS_무료) https://inf.run/7rTK

[무료] 2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax - 인프런 | 강의

30분 요약강좌 시즌4(GitHub_무료) https://www.inflearn.com/course/30%EB%B6%84-%EC%8B%9C%EC%A6%8C4-%EA%B9%83%ED%97%88%EB%B8%8C

[무료] 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub - 인프런 | 강의

1만시간의 법칙 : https://inf.run/zzx6

[무료] <1만 시간의 법칙> 웹 페이지 제작하기 - 인프런 | 강의

견고한 HTML, CSS : https://www.inflearn.com/course/%EA%B2%AC%EA%B3%A0%ED%95%9C-%EA%B8%B0%EB%B3%B8%EA%B8%B0-html-css

견고한 기본기 HTML&CSS - 인프런 | 강의

정규표현식 : https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D

정규표현식 : Python으로 톺아보기 - 인프런 | 강의

Notion 강의 : https://www.inflearn.com/course/%EB%85%B8%EC%85%98-%ED%85%9C%ED%94%8C%EB%A6%BF-%EA%B0%95%EC%9D%98

직접 만드는 노션 템플릿 BEST 7선 - 인프런 | 강의

웹 접근성 강의 : https://www.boostcourse.org/web201

웹 접근성 이해

하버드 CS 강의 : https://www.edwith.org/cs50

[해외명강] 컴퓨터 과학 교양 강좌: CS50 강좌소개 : edwith

코딩인터뷰를 저격하는 JS 스나이퍼 양성학교 https://inf.run/tALx

코딩인터뷰를 저격하는 JS 스나이퍼 양성학교 - 인프런 | 강의

CS 강의 : http://www.kocw.net/home/cview.do?cid=3646706b4347ef09 

운영체제