본문 바로가기
반응형

학습 기록/FE (React, JS, HTML, CSS, ...)

 (24)
230918 [CSS] position, 파비콘 .ico, css실습, 미디어 쿼리 @media screen / min-width / max-width [23.09.18] 35일차 Front-end [CSS] - quiz 풀이(ul-li-a, layout-float) - position: sticky, absolute - 파비콘 .ico - css 실습 - 미디어 쿼리 “:” 가상 클래스 : 상태에 관련 “::” 가상 엘리먼트 : 부분적인 속성 적용 ** [Position] ==================================================================== 1) static - (element가 원래 차지하고 있는) 원래 자기 자리 - 위치 이동(top, left, right, bottom) 불가능 2) relative - 기존 영역 그대로 인식 - 원래 자기 위치(static)를 기준으로 이동 3) absolut..
230908 [CSS] background (image), table , layout (float, position) [23.09.08] 34일차 Front-end [CSS] - background (image) - table - layout (float, position) - ::before, ::after 이미지는 a태그가아닌 ::before ::after에 넣어준다(가상 엘리먼트) content: “”; 빈문자열 필수 - 더미이미지 img src = “https://via.placeholder.com/크기(가로x세로)/배경색/글자색?글자내용(text=)” ex) 수직 정렬 통해 빈 공간이 사라짐 > [object-fit] - fill : 영역에 꽉차게 - contain : 영역 내 비율을 맞춰서 꽉차게 (여백 생길 수 있음) - cover : 영역에 비율 맞춰 꽉차게 (잘릴 수 있음) - scale-down : c..
230907 [CSS] text, list, border, width, height, box-model, background, background-image [23.09.07] 33일차 Front-end [CSS] - text - list(bullet) - border - width / height - box-model - background - background-image - h1은 수직영역에 꽉차게 생성되었으므로 수직정렬이 안된다. - 짧은 콘텐츠 태그입력 div{hello} -> hello - emmet 시 {} 안의 $는 순차증가하는숫자 > /* 웹브라우저에 오는 모든 폰트는 body의 자식 */ body { font: 16px sans-serif; } .content1, .content2 { width: 300px; border: 3px solid black; } .content1 { /* 줄이 바뀔 때 단어를 쪼개기 */ word-break: b..
230906 [CSS] font, text [23.09.06] 32일차 Front-end - CSS - font - text - css 속성 값이 0일때는 단위표기를 생략한다. ex) 0px > 0 - 값이 0.x 소수점일 때 0을 생략한다. ex) 0.5em > .5em > [pseudo class] 가상 클래스(수도 클래스) : 상태와 관련있는 클래스 : 특정 상태 개체를 선택지정하여 스타일 적용하는 용도 [문법] selector: pseudo-class { property: value; } /* unvisited link 방문하지 않은*/ a:link { color: #0f0; text-decoration: none; } /* visited link 방문한 */ a:visited { color: #ddd; text-decoration: un..
230905 HTML 기본구조, CSS, selector 선택자 [23.09.05] 31일차 Front-end - HTML 기본구조 - CSS - F2 : 파일 이름바꾸기 - 바로가기와 img의 alt등은 웹접근성을 위해 필요하다. - 웹에서 : 바로가기 (wrap 바깥에 있는 경우가 많다) - div.(class)cls : - div#(id)aide : - dd>a : - ul>(li>a)*4 : - 서버에서 최상위 경로는 “ / ” 로 표현 > h1 – 로고 (웹페이지에서 가장 중요한 1개만) h2 – 소제목 등 2번째로 중요한 정보들 HTML Layout Elements HTML has several semantic elements(의미론적 엘리먼트) that define the different parts of a web page: 전체적으로 wrap이라고도 ..
230904 form tag 폼 태그, HTML5 [23.09.04] 30일차 Front-end - form 태그 -HTML5 form 사용자 코드 조각 - html.json에 +추가) snippet "langko html form": { "scope": "html", // 범위 "prefix": "lko", // 단축키 "body": [ // [] 안이 실제 들어오는 내용 "", // ,로 이어져야한다 "", "", "", "$2", "", "" ], "description": "lang korean 자동코드" } $1, $2는 탭을 1, 2번 하면 가는위치 ** Emmet 약어 div#~~ id가 ~~인 div#header url (출처. 모질라재단) - http : hyper text transfer protocol (하이퍼 텍스트 전송 프로토콜)..
230901 HTML태그 a, heading, dfn-abbr-cite-small, img, list, table, pre 등 [23.09.01] 29일차 Front-end - HTML 태그 (, , , , , , , , ) ctrl + b : 왼쪽 메뉴 활성화/비활성화 Emmet 단축ul li ul>li*3 (li 3줄짜리) [] dfn - abbr - cite – small 우리는 HTML을 배우고 있습니다 월드 와이드 웹 컨소시엄(W3C) 크러쉬 : 잊을만 하면 합계 금액 : 66,000원(부가세 포함) [, HTML Entities] pre 오늘 날씨가 좋아요! 오늘도 태그는 수평선입니다. 오늘 날씨가 좋아요! 오늘 날씨가 좋아요! 오늘도 좋은 하루~ [html entities] https://www.w3schools..
230831 Front-end 프론트엔드 - VScode, HTML, DOM, element, tag, meta, p, strong, em, mark, block과 inline [23.08.31] 28일차 Front-end 시작! - IDE - VS code 사용 - 확장팩 설치 및 설정 [VS code 단축키] - ctrl + shift + e : 익스플로러 창전환 - ctrl + shift + x : 확장 Extensions 창전환 - Lorem: 더미텍스트 입력 뒤에 숫자입력 시 특정 개수 단어출력 ex)lorem 3 => Lorem, ipsum dolor. (연산된 개수도 가능) - Editor - Word Wrap : 옆의 너비에 맞춰서 자동 줄바꿈 설정 인터넷 기본 문자 도메인(naver.com) => 숫자 IP 형태로 서버에 요청하게 된다. 서버는 그에 맞는 정보를 제공(html, css, js 파일), 응답한다. html – 구조(뼈대) - 웹페이지에서의 필수요소..

티스토리툴바