[03.31] 모던 JavaScript 튜토리얼

💀TIL 선배 특강 / 현직자 특강 모던 JavaScript 튜토리얼을 읽고 공부해보고자 한다. 모든 출처: https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 자바스크립트(JavaScript) ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어 ECMAScript - Wikipedia From Wikipedia, the free encyclopedia Specification for Javascript and other programming languages ECMAScriptParadigmMulti-paradigm: prototype-based, functional, ..

• format_list_bulleted TIL
• · 2023. 3. 31.
• textsms

[Day 13] 이미지, 3D Transfrom, 레이아웃 실습, 추가 정리

💀TIL 🕘 특강 😶‍🌫️ 🤨 🕚 🕜 . 🕒 레이아웃 실습 😎 추가 헷갈리는 속성들 미디어 쿼리 반응형 웹 구성에 쓰인다. min: 최소 조건으로 최소 500px 부터 스타일을 적용한다는 뜻이다. 500px ~~ max: 최대 500px 까지 스타일을 적용한다는 뜻이다. ~500px @media (max-width: 500px){ 실습에서는 주로 이렇게 쓴다 } @media (min-width: 500px){ 실습에서는 주로 이렇게 쓴다 } background 속성 가상 선택자 position 🙉 Review

• format_list_bulleted TIL
• · 2023. 3. 18.
• textsms

[Day7] flex/grid 레이아웃

💀TIL flex grid 🕘 flex display: flex - block혹은 inline으로 구분되지 않고 flex라는 요소로 변한다. flex로 변한 컨텐츠는 flex-container, 그 안에 flex-item이 된다. flex-direction: row 행 | column 열 - 정렬에 기준이 되는 속성 중심축의 방향을 바꿔준다 -------- | flex-direction: row 기본값 가로 ----- flex-direction: column 세로 | reverse 속성은 접근성 문제로 권하진 않는다. justify-content : 중심축 기준 방향 정렬 flex-start: 기본값, 컨테이너의 시작점을 기준으로 아이템 정렬 flex-end: 끝부터 center : 중앙 space-be..

• format_list_bulleted TIL
• · 2023. 3. 8.
• textsms

[Day6] 레이아웃, 시맨틱 태그, 웹 접근성, float

💀TIL 레이아웃 시맨틱 태그 웹 접근성 float 속성 🕘 레이아웃 웹 페이지에서 콘텐츠를 배치하고 구성하는 방법 😶‍🌫️ 시맨틱 태그 header 웹 페이지의 헤더 영역을 정의한다. 소개 및 탐색에 도움을 준다. 헤더 중첩 사용 불가능, 헤더 안에 푸터 사용 불가능 nav navigation bar 주로 헤더 영역에 포함된다 nav > ul >li >a main body의 주요 콘텐츠를 나타낸다. 웹페이지에서 한 번만 사용 가능하다. article 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 대표적으로 뉴스 홈페이지 게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등 제목 요소를 자식으로 포함해야한다. section 웹페이지에서 연관된 콘텐츠를 그룹으로 묶어 정의한다. 제목 ..

• format_list_bulleted TIL
• · 2023. 3. 7.
• textsms

[Day5] 이미지 태그와 position, z-index

💀TIL img 태그 position z-index 🕘img src : 경로 alt : 대체 텍스트. 이미지 설명 시각장애인을 위한 스크린리더를 지원 이미지를 대체하는 텍스트가 중복이면 alt="" 를 빈 값으로 둔다. 😶‍🌫️ 이미지 하단에 빈 공간이 생긴다! img가 인라인 요소여서 발생한다. 아래와 같은 초깃값을 넣어주면 된다. img{ vertical-align:top; } 🤨 이미지 비율 유지하기 aspect-ratio : 기본 가로세로 비율을 설정한다. img{ width:300px; aspect-ratio: 2 / 1; object-fit:cover; } padding % 값 이용 padding-top, padding-bottom % 값은 부모의 가로 너비를 기준으로 한다. .thumbnai..

• format_list_bulleted TIL
• · 2023. 3. 6.
• textsms

[Day4] 목록 태그, CSS 가상 선택자, Box Model

💀TIL 목록 태그 가상 선택자 Box Model 🕘 목록 태그 ol , ul ol: ordered list 순차적 목록 type 유형 1 숫자 a 소문자 알파벳 A 대문자 알파벳 i 소문자 로마 숫자 I 대문자 로마 숫자 start: 항목을 셀때 시작할 수, 아라비아 숫자만 가능하다. reversed: 순서를 역전시킨다. ul: unordered list 비순차적 목록 li: 목록의 항목으로 단독 사용이 불가능하다. ol, ul의 자식요소로만 사용할 수 있다. ol, ul 의 자식요소로는 li만 사용이 가능하다. 첫번째 두번째 세번째 첫번째 두번째 세번째 🕚 가상 선택자 선택자 뒤에 :가상 이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. 가상 클래스(추상or의사 클래스) 라고 한다. ..

• format_list_bulleted TIL
• · 2023. 3. 3.
• textsms