📚 Study/HTML&CSS

[CSS] clip / clip-path / scroll-snap / aspect-ratio / backdrop-filter

✔️ clip-path 요소의 클리핑 범위를 지정합니다. none : 클리핑 패스가 생성되지 않습니다. url(clipPath) : SVG의 클리핑 패스 요소를 참조하여 클리핑합니다. path(path) : SVG 경로 정의를 사용하여 클리핑합니다. circle(R at X Y) : 반지름과 위치를 사용하여 타원을 정의합니다. elipse(수평R 수직R at X Y) : 두 개의 반지름과 위치를 사용하여 타원을 정의합니다. triangle(좌측 상단 X Y, 우측 상단 X Y, 하단 X Y) : 세 개의 위치를 사용하여 삼각형을 정의합니다. polygon(시계방향 꼭지점) : 세 개 이상의 위치를 사용하여 다각형을 정의합니다. inset 📌 clip 과 clip-path 두 속성 다 요소의 어느 부분이 ..

[CSS] @media 와 반응형

✔️ 반응형 vs 적응형 📌 적응형 화면에 크기에 따라 다른 페이지를 보여줍니다. 대표적인 예시로 네이버가 있습니다. 장점으론 각 화면 크기에 집중하여 작업이 가능합니다. 단점으론 페이지를 두 개를 만들어야 합니다. 📌 반응형 화면 크기에 따라 요소들을 변화시킵니다. 대표적인 예시로 애플이 있습니다. 장점으론 하나의 페이지로 여러 크기에 대응이 가능합니다. 단점으론 컨텐츠가 복잡할 경우 작업하기가 어렵습니다. ✔️ @media (미디어 쿼리) CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 예를 들어, 뷰포트가 480픽셀보다 넓은 경우에만 스타일을 적용할 수 있는 방법을 제공합니다. 또한 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용을 탐지하는데도..

[CSS] transform, transition, animation

✔️ transform 속성 .item { transform: transform속성; } 주위 요소들에 영향을 끼치지 않으면서 요소에 2D 또는 3D 변환을 적용합니다. transform-origin: x y;을 이용해 transform을 적용하는 중심을 설정할 수 있습니다. 📌 translate(x, y) 요소를 x축과 y축에서 주어진 값이 양수이면 오른쪽으로 음수이면 왼쪽으로 이동시킵니다. translateX, translateY 로 x축과 y축의 값을 따로 줄 수 있습니다. See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. 📌 rotate(Ndeg) 요소를 주어진 각도만큼 양수이면 시계방향으로 음수이면 반시계 방향으로 회전시킵니다..

[CSS] Grid Layout

✔️ grid 속성 flex 처럼 쉽게 행과 열 형태로 항목 무리를 배치하는 레이아웃 시스템입니다. container : display: grid; 속성을 적용하는 grid의 전체 영역입니다. item : grid container의 자식 요소들입니다. track : grid의 행(row) 또는 열(column) 입니다. cell : grid item이 들어가는 한 칸을 가리키는 말입니다. line : grid cell을 구분하는 선입니다. number : grid line의 각 번호입니다. gap : grid cell 사이의 간격입니다. area : grid line으로 둘러 쌓인 사각형 영역으로 grid cell의 집합입니다. 📌 Flex Layout 과 Grid Layout의 차이점 Flex : 한..

[CSS] Float Layout

✔️ float 속성 특정 요소를 기본적인 문서 흐름으로부터 빠져나와 떠있게 하는 속성입니다. left : 왼쪽으로 배치합니다. right : 오른쪽으로 배치합니다. none : float를 적용하지 않습니다. 📌 Normal Layout See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. 📌 Float Layout See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. 📌 float의 위치가 지정되는 법 float된 요소는 일반적인 흐름에서 빠져 left, right 중 지정된 곳으로 요소의 모서리가 닿을 때까지 이동합니다. 여러 요소에 float를 적용시킨다면 먼저 적용..

[CSS] 상속과 리셋

✔️ 상속 상속되는 CSS 속성들 color, letter-spacing, text-align, visibility, cursor line-height, text-decoration, word-spacing font 관련, list-style 관련, text-shadow 요소의 상속되는 속성에 값이 지정되지 않은 경우 부모 요소의 해당 속성의 계산값을 얻습니다. 또는 사용자 에이전트로부터 해당 요소의 초기값을 얻습니다. See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. 📌 inherit 스스로의 값을 포기하고 부모로부터 받은 상속값을 적용합니다. See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chn..

[CSS] 사용자 지정 CSS 속성 (변수)

✔️ CSS에서의 변수 CSS 저작자가 정의하는 개체로 문서 전반적으로 재사용할 임의의 값을 담습니다. 전용 표기법을 사용해 정의하고 var() 함수를 사용해 접근할 수 있습니다. 변수는 종속 대상이며 부모로부터 상속합니다. 변수의 이름은 대소문자를 구분합니다. 📌 변수 선언 /* 전역 변수 */ :root { --font-small: 8px; --font-normal: 16px; --font-large: 24px; --font-x-large: 32px; --font-xx-large: 40px; --font-xxx-large: 48px; } /* 특정 요소에서만 사용할 수 있는 변수 */ span { --var1: wavy underline orange; --var2: wavy underline red;..

[CSS] 선택자

✔️ 선택자 * { color: red; font-size: 5em; } #id { color: red; font-size: 5em; } [title="css"] { color: red; font-size: 5em; } h1 { color: red; font-size: 5em; } h1, h2, h3, ... { color: red; font-size: 5em; } .special { color: red; font-size: 5em; } li em { color: red; font-size: 5em; } li > em { color: red; font-size: 5em; } ul + p { color: red; font-size: 5em; } ul ~ p { color: red; font-size: 5e..

[HTML] 시맨틱 태그(Semantic Tag)

✔️ 시맨틱 태그란? '의미가 있는 태그' 를 말합니다. , 처럼 의미가 없는 태그는 이름을 보고 내용을 유추하기 어렵지만 , 는 의미가 명확합니다 📌 장점 검색 엔진(SEO)이 컨텐츠를 페이지의 검색 순위에 영향을 미치는 중요한 키워드로 간주합니다. 시각 장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색하는데 도움이 되는 표지판으로 사용할 수 있습니다. 끝없는 를 탐핵하는 것보다 훨씬 간단합니다. 채워질 데이터 유형을 명시하고 네이밍을 반영하므로 구조 파악이 쉬워지고 재사용성이 좋아집니다. ✔️ 시맨틱 태그의 종류 📌 페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용합니다. 로고와 제목 검색창 등이 들어갑니다. 📌 링크들을 포함하는 태그입니다. 주로 페이지의 매뉴들이나 색인 등에 사용됩니..

[HTML] 웹 접근성

✔️ 접근성이란? 웹 사이트,도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것을 말합니다. 또한, 일시적인 장애, 상황적 제약, 연로한 사람, 스마트 워치 등의 디바이스를 사용하는 사람에게도 이점을 줍니다. 📌 이미지의 alt 속성 이미지가 보이지 않는 사용자들을 위해 alt 속성에 설명을 넣어줘야합니다. 또는, 이미지가 로드되지 않을 시 대체 텍스트로 사용될 수 있습니다. alt 속성이 없으면 src 값을 읽기 때문에 의미 없는 또는 읽을 필요 없는 이미지에도 공백으로 alt 속성을 꼭 넣어줘야합니다. 📌 sr-only .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflo..

[HTML] 상단 태그 훑어보기

✔️ 상단 태그 📌 DOCTYPE Document Type Declaration의 약자로 문서가 형식과 버전으로 작성되었다고 선언하는 것입니다. 선언 시 웹 브라우저가 standard mode(최신 형태)로 문서 실행합니다. 📌 html 문서의 기본 언어를 설정함으로써 검색 엔진에 의해 효과적으로 색인화되고 스크린 리더를 통한 접근성이 좋아집니다. 📌 title, css&javascript link, favicon, 다른 메타데이터 등이 담기는 곳입니다. 📌 웹 페이지의 제목 브라우저의 탭, 즐겨찾기의 제목, 검색결과의 제목으로 표시됩니다. 📌 페이지가 어떤 언어로 작성되었는지 명시해주어 글자가 깨지지 않게 해줍니다. content="IE=edge" : 익스플로러에서 실행 시 어떤 버전으로 실행할지 지정..

[CSS] Flex Layout

✔️ Flexbox 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 시스템입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형됩니다. 📌 Flexbox가 생긴 이유 기존 float와 position의 불편하고 제한적인 방식을 개선하기 위해 생겨났습니다. 📌 Flexbox의 배치 기본 축(main axis) : flex item이 배치되고 있는 방향으로 진행하는 축입니다. 기본 축의 시작과 끝을 일컬어 main start와 main end라고 합니다. 교차 축(cross axis) : flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 교차 축의 시작과 끝을 일컬어 cross start와 cross end라고 합니다. flex container : fl..