실용적인 CSS 기술
점진적 개선 기법
▷ 오래된 기술 환경에서 실행할 수 있는 기능을 구현하고 최신 기술을 사용할 수 있는 환경에서 최신 기술을 제공하여 더 나은 사용자 경험을 제공하는 방법.
이미지 포맷에 따른 특성을 알아야 합니다.
▷ 디자이너에게 사진을 받으면 용량 확인은 필수! (50kb 이하 권장)
<picture> 태그를 사용하는 것이 미디어 쿼리를 사용하는 것보다 성능면에서 더 좋습니다.
▷ 브라우저가 어떻게 작동하는지 생각해보면 쉽게 추론할 수 있습니다.
▷ 렌더링할 때 브라우저는 먼저 HTML을 구문 분석한 다음 CSS를 구문 분석합니다. html이 먼저 해석되기 때문에 결과는 이미지를 먼저 반복하는 것입니다. 그러나 그 차이는 중요하지 않습니다!
▷ 경우에 따라 스타일이 손상되어 CSS를 다운로드할 수 없습니다. 또한 보안에 대비하여 HTML로 작성되었습니다.
HTML + CSS
웹을 더 빠르게 만드는 팁
1. 홈 페이지 구조를 식별하고 중복 구성 요소를 찾습니다.
└ 모든면에 들어가면 함께 보이는 구성 요소, 메인 등이 있습니다.
└ 일반적인 구성 요소를 CSS 파일로 분할하여 작업합니다.
가입은 로그인에서만 작동합니다.
2. 겹치는 버튼을 구성 요소로 만듭니다.
└ 가져와서 레고처럼 조립하면 더 빨라요.
3. 미리 만들어서 레이아웃에 배치합니다.
태그 사용 시 유의사항
▷ 섹션 생성 시 제목(h1, h2 등)은 반드시 내부에 작성해야 합니다.
기사를 사용할 때 제목 태그와 섹션을 모두 사용해야 한다고 하셨죠?
그런 설명을 들은 기억이 있어서 검색을 해보니 아래와 같은 글을 발견했습니다.
(왜 당신은포기하고 HTML5 사용?) 기사를 읽고 알게 된 사실
1. h1의 크기는 깊이에 따라 달라집니다..
2. 그날주어진 범위의 텍스트가 시작되고 끝나는 위치를 스크린 리더 사용자에게 알려줍니다.
3. 태그의 차이점그리고 . 더 알아보기
사용할 때그리고 나는 여전히 그것들을 어떻게 사용하는지에 대해 종종 혼란스러워서 더 많은 정보를 찾아보았다. : 추출하여 다른 형식으로 제공할 수 있는 콘텐츠를 포함합니다. B. 블로그 게시물 또는 YouTube 동영상. 언제든지 홈페이지에서 자신을 제거하고 다른 홈페이지나 영역에 직접 첨부할 수 있습니다. : 목차를 구성하기 위한 컨테이너입니다. 주제별로 섹션을 감싸거나 세분할 때 사용합니다.
(메모: ‘(HTML 태그) 섹션, 기사 태그(사용, 비교)‘)
▷ 모달 창을 열려면 다음을 사용하십시오.
▷ <strong> 태그는 키워드 검색(SEO)으로 인식됩니다. 사용 강조하려는 텍스트를 굵게 표시하는 대신.
▷
- ,
- 그리고 논리적 마크업 순서를 염두에 두고 작성해야 합니다.
논리적 주문 마크업이란?
논리적 흐름에서 콘텐츠를 마크업합니다.
논리적 순서 마크업은 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하고 키보드(탭 키)나 터치패드와 같은 입력 장치로만 사용할 수 있도록 하는 “입력 장치 접근성”과 밀접한 관련이 있습니다. 따라서 마킹할 때 가능한 한 논리적인 순서로 마킹하는 것이 중요하다.
메모: (‘시맨틱 마크업 및 논리적 순서 마크업‘)웹 제작시 주의사항
▷ CSS에서 픽셀 완성도보다 더 중요한 것은 코드의 품질입니다.
▷ 사용자 환경과 콘텐츠의 변화에 유연하게 반응하는 웹이 만들어져야 합니다.
▷ 클래스 이름은 명확하게 알아볼 수 있어야 합니다.
CSS 특강(한편)
마진의 핵심
▷ 테두리가 차지하는 공간의 크기와 표시되는 이미지의 크기는 별도로 정할 수 있습니다.
(공간은 변해도 비주얼은 변하지 않는다)
▷ 여백은 사용 가능한 공간이고 요소는 한 줄을 차지하므로 margin: auto는 가운데에 배치합니다.
테두리 위치 적용
▷ 마진은 평가될 수 있습니다(음수 마진). 이것은 오류가 아니라 고정 사양입니다.
▷ 많이 사용하면 헷갈리지만 적당한 곳에 사용하면 좋습니다.
음수 여백이 있는 레이아웃 외부에 있는 텍스트가 포함된 요소를 스크린 리더가 읽을 수 있습니까?
이 부분에 문제가 있습니다! 이 점 유의하시고 신중하게 사용하세요. 솔루션을 찾고 나중에 추가하십시오.▷ 겹치는 레이어가 있는 양식은 음수 여백을 사용하는 일반적인 예입니다.
▷ 여백이 음수인 요소를 겹칠 경우 나중에 작성한 마크업이 돌출됩니다.
▷ 정적 값이 아닌 요소(상대값 등) 마크업 순서에 관계없이 앞으로 튀어나온다절대값과 컨테이닝 블록
▷ 절대 기본값은 본체가 아닌 뷰포트입니다.└ 단, 스크롤 다운은 되지 않습니다. 이를 위해 고정을 사용해야 합니다.
▷ 위치 속성이 절대적이면 가장 가까운 조상의 위치 속성 값을 상대적으로 변경하여 컨테이닝 블록을 원하는 요소로 바꿉니다.
▷ 컨테이닝 블록이 된 부모 블록은 콘텐츠 영역의 크기를 자식 블록에 제공합니다.
벤딩
▷ Flex Base는 Flex-Grow 또는 Shrink가 적용되기 전에 항목의 기본 크기를 설정합니다.└ 너비와 높이 속성이 우선입니다.
▷ Flex-Shrink는 Flex-Base와 함께 사용됩니다.
└ flex-shrink가 0이면 컨테이너 크기에 관계없이 요소 크기가 유지되고, flex-shrink가 1이면 요소가 컨테이너 크기에 맞습니다.
▷ flex-grow는 flex-base와 함께 사용되기도 합니다.
└ 요소를 기본값 이상으로 확장할 수 있는지 여부를 결정합니다. 기본으로 설정된 크기에서 추가됩니다.
▷ 플렉스 항목으로 지정된 경우 min-width:auto로 설정됩니다.
▷ justify-content는 기본적으로 flex-start입니다.
▷ 정렬 요소의 경우 스트레치가 기본값입니다. 그래서 부모에게 크기를 주면 그 크기가 자식에게까지 확장됩니다.
기타
▷ 용어는 필수! 가장 중요한 것은 기본입니다.
▷ min-width: 내부 콘텐츠 너비를 최소 크기로 강제합니다.