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

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

• format_list_bulleted 멋쟁이사자처럼 FE 5기/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 멋쟁이사자처럼 FE 5기/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 멋쟁이사자처럼 FE 5기/TIL
• · 2023. 3. 3.
• textsms

[Day3] HTML문서 해부, css선택자, 단위

💀TIL HTML 문서 해부 🕘 HTML 문서 해부 ‘이 문서는 html Living Standard 문서!라는 의미 HTML 문서의 최상단 요소 lang 속성을 통해 주 언어 설정이 가능하다. 언어코드(소문자) - 국가코드(대문자) ko-KR 대한민국 en-US 미국, en-GB 영국, en-PH 필리핀 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. meta 메타데이터: 어떤 목적을 위해 만들어진 데이터 charset="utf-8" : 문자 코드 설정 utf-8: 전 세계적인 언어들 지원, 국제적인 코드 규약 🕚 선택자 전체 선택자 head를 포함한 HTML 문서 내의 모든 요소 선택 * { margin:0; padding:0; } 타입 선택자(태그 선택자or 요소 선택자) 특정 태그 선택 ..

• format_list_bulleted 멋쟁이사자처럼 FE 5기/TIL
• · 2023. 3. 2.
• textsms

[Day2] CS상식 / Git, GitHub 기초 / VSC 기본

💀TIL CS 상식 : URL / IP / PORT VSC 기본 : Cheat Sheet, Emmet Git 기초 : git pull, git add, git commit -m '', git push 🕘 CS 상식 - URL/IP/PORT 네이버에 접속할 때 생기는 일 내 화면에 네이버가 켜질 때까지 🌏 내 화면에 네이버가 켜질 때까지 - 브라우저 렌더링 과정 브라우저 렌더링 과정을 알아보자! 스터디에서 동료 특강으로 브라우저렌더링 과정에 대해 발표하게 되었다. 나도 공부를 하기 위해서 맡은 주제이긴 하지만 생각보다 DEEP하게 가려면 엄청나게 velog.io 1. 주소창에 `www.naver.com` 입력한다. 2. DNS에서 naver.com 의 IP 주소를 가져와 서버에 전달한다. 3. 웹 브라우저..

• format_list_bulleted 멋쟁이사자처럼 FE 5기/TIL
• · 2023. 3. 1.
• textsms

[Day1] 멋쟁이 사자처럼 프론트엔드 스쿨 5기

💀TIL - 오전 시간 OT & 팀 발표 - 오후 시간 테킷 강의 Ⓜ️ HTML CSS - 박스모델 - `section` `article` 😶‍🌫️ 새로 배운 것 `float: ;` 둥둥 떠다니기 `overflow: hidden;` 요소 영향 X ` box-shadow: 0 10px 50px 0 rgb(0,0,0,0.1);` 그림자 기능 🔥이력서 실습 🎑 Todo 처음부터 코드 짜보기 Velog는 한가지 토픽을 정해서 글을 쓸 목적, 티스토리는 TIL 적을 목적으로 분리해놓았다. Velog는 왠지 모르게 사담을 적기 부담스럽고 글이 몇십개씩 쌓이면 볼 때 불편하다. 그리고. . .Velog에는 임팩트 있는 글을 적어서 트렌딩에 올라보고 싶은 마음도 있기 때문에 . ^0^ 주절주절 사담은 티스토리에서 진행..

• format_list_bulleted 멋쟁이사자처럼 FE 5기/TIL
• · 2023. 3. 1.
• textsms