공부 기록일지📚

▶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; ..

Block: Encapsulates a standalone entity that is meaningful on its own. (자체적으로 의미있는 독립 실행형 엔티티를 캡슐화한다.) block with HTML ... block with CSS 주의사항 ▷Use class name selector ONLY ▷태그 네임이나 아이디는 안됨 ▷해당 페이지에 다른 블록이나 엘레멘트에 의존성이 있으면 안됨 Modifier: flags on blocks or elements. Use them to change appearance, behaivor or state CSS class is formed as block's or element's name plus or element's name plus two dash..

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