공부 기록일지📚

▶box-sizing:border-box 사용예제 alt-screen-header의 포지션을 고정하려고 position:fixed; 이후, width:100% 를 줬을 때 이처럼 오른쪽이 잘리는 경우가 있다. 이때 사용하는 속성과 속성값이 box-sizing: border-box; 이다. 속성값을 border-box로 하고나면 맨위 상단의 screen-header처럼 완전히 화면안에 요소들이 들어오게 된다. ▶text-align 사용예제 습관적으로 내부 요소를 중앙정렬하려면 flex를 사용해서 내부에 있는 텍스트를 justify-content:center를 사용하여 중앙에 정렬하려고 했는데 그렇게하면 코드가 2줄로 길어지게 된다. 또한, 내부의 요소가 여러개가 아니라 "text" 하나라는 점을 고려하면 ..

▶아이콘 링크 만들기 html 코드에서 내가 아이콘을 눌렀을 때 다른 스크린으로 전환(해당 링크로 이동)을 원한다면, 이런식으로 a태그 안에 i태그(아이콘)을 넣어줘야 합니다. span 태그 안에 따로 따로 닫아주면 아이콘을 눌러도 해당 링크로 전환되지 않습니다. //틀린 예제 ▶font-awesome에서 작은 화살표는 angle(앵글)이라고 부릅니다. 검색 시, angle 이라고 검색해주면 됩니다. ▶3요소를 각각 같은 비율로 분배하여 가로 정렬하기 (아래의 예제에서는 3요소가 "3개의 컬럼"이라고 생각하면 됩니다.) CSS코드의 첫번째 컬럼에 margin-right: auto; 마지막 컬럼에 margin-left: auto; 위의 코드를 적용한 ↓결과물↓

정리를 시작하기 전에 가장 잘 사용되면서 잘 까먹는 것 복습하고 들어갑시다. ▶absolute child 는 항상 relative father가 필요합니다. -> 바로 위에 건너뛰고 상위에 있는 건 적용이 안됨 position: relative; 로 돼있는 부모가 없으면 position: absolute를 했을 때, 변경하는 top/left/right/bottom의 위치 기준점이 제대로 먹히지 않습니다. absolute child always need a relative father ▶text-align 과 align-items 의 차이점 text-align은 텍스트 국한 align-items는 전제조건: display:felx; 교차축을 기준으로 정렬한다. ▶box-sizing: border-box; ..

*모든 state의 CSS를 수정하면 가지고 있던 디폴트 값을 잃어버려서 처음부터 다시 꾸며야 합니다. ▶ :active ->대상을 누르고 있을 때(마우스로 클릭 유지) ▶ :hover ->마우스 커서가 대상 위에 있을 때 ▶ :focus(active와 같은 거 같지만 다름) -> active가 마우스로 클릭됐다면, focus는 키보드로 선택되었을 때를 말함 예시로, 회원가입을 할 때, 이름, 아이디, 비밀번호 입력칸에 키보드 Tab키를 누르면 다음 작성칸으로 넘어가는 것처럼 ▶ :visited -> 링크에만 적용, 방문했던 적이 있는 링크의 색상이 다르게 보이는 것도 visited의 효과 때문 ▶ :focus-within -> focused인 자식을 가진 부모 엘리먼트의 상태 고로 이 효과는 부모 엘리..

▶ selector 선택자 color -> property 속성 blue -> value (속성)값 ▶block = box = not inline ▶inline 요소는 크기값을 가지지 않는다. -> width, height를 지정해도 적용 X 좌우 margin 만 가질 수 있습니다.-> 상하 marginX *padding은 block, inline 요소 상관없이 가능합니다. ▶VSC사용 시 emmet확장 프로그램 단축키 emmet 단축키 .find-icons__icon*4>span 아이콘 클래스가 4개 있고 각각의 내부에는 span태그가 있게 만들기 (.find-icons__icon>span)*4 로 해야하는 줄 알았는데 위의 코드로도 똑같은 결과물이 나옵니다. ▶중간에 우리가 새로운 css파일을 만들 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.