분류 전체보기

1주차 수업 : float

⏬ 목차 더보기 1-1. 시멘틱 태그란? 1-2. 시멘틱 태그 사용시 장점 1-3. 어디에 사용할지 헷갈리는 시멘틱 태그 2. padding vs margin 3-1. 블록요소 vs 인라인 요소 vs 인라인 블록요소 3-2. 인라인 블록 요소의 여백 4. css 명시도 (우선순위) 5. css 속성 작성순서 6. 성질을 변하게 만드는 속성 7. % 와 px의 차이 8. 가운데 배치 9. 리셋 속성 단축 키워드 10. 기타 css 속성 단축 키워드 11. Emmet 12. vscode 단축키 🚩 이번 수업으로 알게된 점 1주차는 float로 레이아웃 배치하는 것에 대해 중점적으로 배웠다. 지금은 flex를 주로 사용하지만 유지보수 할 때, float으로 정렬된 프로젝트들도 있기 때문에 알아야한다. 시멘틱태..

[CSS] CSS Grid에 대해 알아보자

grid는 레이아웃을 구현하는데 사용한다. flex도 레이아웃을 구현하는데 사용하지만 flex는 1차원 (한 방향) 레이아웃 시스템이고 gird는 2차원 (두 방향) 레이아웃 시스템이므로 보다 정교하고 복합적인 레이아웃 구현을 위해 grid를 사용할 수 있다. grid를 사용하기 전 알아야할 기본 지식 (1) Column & Row column은 열, 세로줄 row는 행, 가로줄 (2) 그리드 용어 그리드 컨테이너 (Grid Container) : 그리드 아이템의 부모 요소. 그리드의 전체영역. 그리드 아이템 (Grid Item) : 컨테이너의 자식 요소들. 그리드에 의해 배치되는 요소들. 그리드 트랙 (Grid track) : 그리드의 행 / 열. 그리드 셀 (Grid cell) : 그리드의 한 칸. ..

[jQuery 실전] 스크롤 했을 때 상단에 고정되는 헤더

웹사이트를 이용할 때 스크롤을 아래로 내리면 상단에 고정되어 따라오는 헤더들이 있다. 스크롤을 아래로 내렸다가 메뉴를 클릭하기위해 다시 상단으로 올라오는 것이 불편하기 때문에 사용자의 편의성을 위해 자주 사용된다. 이 헤더를 만들기 위해서 알아야하는 값은 사용자가 내린 윈도우 스크롤의 양 화면상단에서 요소(헤더)까지의 거리 두 가지로, 윈도우 스크롤 양과 헤더까지의 거리를 비교하는 조건문을 이용해 윈도우 스크롤 양 >= 상단에서 헤더까지의 거리가 되었을 때, 헤더를 상단에 고정시키는 (position:fixed) 클래스를 추가하고 아닐 때, 클래스를 제거해준다. (1) 윈도우 스크롤의 양 확인하는 방법 윈도우의 스크롤 양을 파악하는 것은 스크롤바의 수직 위치를 가져오는 .scrollTop() 메서드를 이..