HTML,CSS

시작 전\*폴더명 : 영문으로, 소문자로만 가능\*파일명:파일명은 영문으로! ←서버에 띄웠을때 오류가 날 수 있어서:띄어쓰기 대신 언더바 \_ 쓰기:특수문자 쓸 수 없음:뒤에 확장자명 - 소문자로만 됨.​\*sublime text:문서를 사용하기 전에 미리 저장을 해야

🔶filedsetform 안에서 텍스트구역을 나눌때 쓰임legend태그를 붙여 해당 구역에 제목을 붙일 수 있음속성 - disabled: 지정한 경우, 모든 자손 컨트롤을 비활성화되서 편집할 수 없고,form 제출시 데이터에 포함되지 않음. (회색으로 표시됨.)🔶i

🔶 font-family :글꼴 설정​🔶폰트 다운해서 쓰는 법1.웹폰트 : 서버에서 폰트를 직접 내려받아 문서에서 사용. (내 컴터도,어느 컴터도 그 폰트가 없어도 됨)영문폰트가 많은 사이트 : https://fonts.google.com/한글폰트가 많은

block: 1)높이,너비가 있음.: 2)margin,padding 적용됨.inline : 1)높이와 너비가 없음. 높이,너비 지정한게 안먹음(content 길이만큼만 차지함): 2) "좌,우의 margin"과 "사방에 padding"은 적용ㅇ / 위아래 margin만

부모요소에서 flex 적용해야 자식요소에서 적용됨. 자식 요소에서는 명시하지 않음.inline-block의 단점을 보완하기 위한 것.블록요소인데, 가로정렬 됨.nowrap(기본값) : 나열된 요소의 넓이가 부모 넒이에 맞게 자동 축소됨.(너비가 자동으로 바뀜)wrap

🔶static(기본값) :위치를 지정하지 않을 때 사용한다.🔶fixed상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 "고정된 위치"를 설정 할 수 있다.(스크롤 내려도 고정된 위치에 딱 있음)원래 위치와 상관없이 위치를 지정할 수 있다. "브라우저 화면"을

:nth-child - 형제 사이에서의 순서에 따라 요소를 선택함 3개씩 마다: 3[31] 6[32] 9[3*3] 마다 3번째 이후로 : 3[0+3] 4[1+3] 5[2+3] 마다 5씩마다 : 1[0+1] 6[5+1] 11[10+1] n개씩 마다: 3씩마다 :

🔶하위 선택자

🔶:active마우스 클릭하고 있을때 스타일이 적용됨.🔶:hover마우스를 올려놨을 떄 스타일이 적용됨.🔶:visited링크를 방문했으면 스타일이 적용됨.🔶:focus키보드로 선택되었을 때 스타일이 적용됨.(tap키로 선택됐을때 적용됨.)🔶:focus-with

: color,border등 스타일 속성을 변수로 지정해서 여러운데 사용할 수 있음.: 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꿔야 할 상황이 왔을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값

애니메이션 샘플 사이트: https://animista.net/

margin: 0px auto : 양옆의 margin을 자동정렬하면 wrap요소가 페이지의 중앙으로 오게끔 자동 설정됨.이렇게 margin을 auto로 중앙정렬 할 땐, width로 가로 사이즈를 꼭 지정해야 auto가 먹힘: width가 지정되지 않았으면 블로요소이기

width,height는 원래 "content영역의 크기만"을 지정하는 것임.그래서 border나 padding을 추가로 지정하면 우리가 생각하는 width, height가 늘어나게 됨.이를 해결하기 위해 box-sizing: border-box;을 주면, border

기본 사용\-ul,ol태그 아래는 li태그 밖에 못나옴, 다른 요소는 들어갈 수 없음.\-그러나 li태그 하위에는 li보다 작은 다른요소는 넣을 수 있음.구조화 된 페이지에서 <div> <p>의 난발을 막고 <ul> <li></li> <

p1 float로 블록요소인 li가 가로정렬 되는 이유?: 원래 li는 ul이라는 영역 안에서, 한줄을 다 차지하는 블록요소 였음. 근데 float를 쓰면 li가 ul박스 안에서 띄어짐 (ul 울타리에서 위로 떨어지게 되는 것임) 따라서 li가 본인의 크기를 인식을 못

기본 코드 🔶flex 컨테이너 : items를 정렬하기 위해 flexbox container이 필요함. : "바로 위" 부모요소에 display:flex를 해야, 자식요소인 items가 가로 정렬 됨. 🔶flex-direction flex-direction: r

부모요소에서 지정해야 함.열의 크기를 지정함. 만들고 싶은 열의 갯수대로 지정하면 됨.grid-template-columns : 100px 3em 40%; : 이런식으로 분율 같은 값뿐만 아니라, 픽셀 및 em과 같은 길이 단위도 허용함.행의 크기를 지정함. 행의 갯수

: 부모요소에서 각 item의 align-self 값을 한번에 설정하게 됨.justify-items (수평) :stretch / start / center / end / right / left;align-items (수직) : stretch / start / cente

화면 크기가 줄어들거나 늘어날때 제한 값 설정예) Grid-template-columns: repeat(5, minmax(200px, 1fr)); : 최대 1fr로 하되 최소 200px너비예제코드출력결과auto-flll: 화면이 늘어나도 item들은 지정한 사이즈대로

: 인용구문을 넣을 때 쓰는 태그: 기본적으로 들여쓰기를 한 것으로 그려짐: 들여쓰기를 조절하려면 margin값 이용.사용예제: 양수로 하면 "들여쓰기" , 음수로 하면 "내어쓰기" 지정 가능   - 스페이스를 의미line-height : 글자 "줄 사

🔶 Semantic Web, Semantic Tags https://poiemaweb.com/html5-semantic-web 🔶 'img태그'와 'div태그에 background-image 속성 사용'의 차이점 사이트에 이미지를 넣는 방법은 두 가지가 있다. `

참조 사이트https://www.geeksforgeeks.org/css-units-em-rem-px-vh-vw/https://medium.com/watcha/watcha-개발-지식-px-em-rem-f569c6e76e66브라우저 기본 글꼴 크기에 상대

https://webplatform.news/issues/2017-10-03https://output.jsbin.com/netopay/quiethttps://thinkforthink.tistory.com/364grid를 이용해 두개의 컬럼을

: @tailwind base 코드가 그 기능을 하는 것임.: 여기에 box-sizing : border-box도 적용되어있음: 반복되는 css 패턴을 클래스로 만들어서 사용할 수 있음: 사용자 지정 스타일 집합이 속하는 "버킷"을 테일윈드에게 알려주려면 @layer

max hieght

https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

나는 포트폴리오 사이트를 모바일로 볼 사람을 없을거라는 생각에 모니터 크기가 길게 늘어졌을때 내용이 중앙에 유지되게끔만 신경을 썻다.그러나 최근 면접에서 포트폴리오 사이트에 반응형 적용이 안되있다는 말을 들었다.프론트엔드 포폴은 포트폴리오 사이트 자체가 포트폴리오란 생

https://www.w3docs.com/snippets/css/how-to-make-a-child-div-element-wider-than-the-parent-div.html모든 컨텐츠를 감싸는 레이아웃 div가 width를 48rem으로 가지고 있고 중앙정

🔶기본 사용🔶 prop을 통해 컴포넌트를 설정🔶 확장하려는 컴포넌트 이름을 괄호안에 넣으면 됨. 기존 Box컴포넌트를 확장한 컴포넌트가 됨.🔶 기존 컴포넌트에서 엘리먼트만 다른 엘리먼트로 교체.🔶컴포넌트에 한번에 속성을 지정하는 법

🔶

컴포넌트 안에있는 요소를 컴포넌트에서 지정하여 스타일 적용할 수 있음.span은 스타일드 Box컴포넌트로 만들지 않았지만, Box컴포넌트 안에서 span을 선택할 수 있음.&은 자기자신을 자리키는 것임. (span을 지칭하는 것과 같음.) < sass - 부모 선

🔶 Styled-Component에서 Theme을 이용해 타크모드<->라이트모드 바꾸기index.jsPracThemeApp.js

원래 이런식으로 import를 해줬다.그러나 html 파일의 head에 적용하는게 더 나음공통된 테마는 theme.js에서 선언하여 각 컴포넌트에서 props로 받아 스타일을 적용할 수 있습니다1) theme.js 파일에 공통으로 적용할 스타일을 작성2) 해당 파일을

<포스팅1>4-1. GlobalStyle4-2. styled-reset4-4. 글로벌 폰트<포스팅2>4-3-2. mixin