📚 Study

[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..

[CSS] cursor와 요소 숨기기

✔️ cursor default : 보통 화살표 none : 커서 없음 help : 도움말 사용 가능 pointer : 링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다. progress : 프로그램이 백그라운드에서 작업 중이지만 사용자가 인터페이스와 상호작용 할 수 있음 (wait과 반대) wait : 프로그램이 백그라운드에서 작업 중이지만 사용자가 인터페이스와 상호작용 할 수 없음 (progress과 반대) not-allowed : 요청한 행동을 수행할 수 없음 zoom-in : 확대/축소할 수 있음 커서 목록 보러가기 See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. ✔️ 요소를 숨기는 방법 📌 opacity 요소의 불투명..

[CSS] Position으로 배치하기

✔️ position 속성 요소들이 화면에 어떻게 배치될지를 지정합니다. position 속성은 자식 요소에게 대물림되지 않습니다. top, bottom, left, right를 이용해 위치를 지정합니다. (값은 좌표가 아닌 offset입니다.) 📌 static position의 기본값으로 전적으로 페이지의 흐름을 따릅니다. top, bottom, left, right, z-index 속성의 영향을 받지 않습니다. See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. 📌 relative 원래 위치를 기준으로 top~right 속성값이 적용되도록 합니다. 요소의 위치는 이동하지만 요소가 차지하는 공백의 위치는 유지됩니다. See the Pe..

[CSS] background로 배경 꾸미기

✔️ background 속성 📌 단축 속성 background: [color] [image] [repeat] [position/size] [origin/clip]; 📌 background-color 컬러 키워드, transparent나 currentcolor, hex, rgb(a), hsl(a) 값을 이용해 배경 색을 지정합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문에 꼭 지정해야 합니다. 📌 background-image 배경 이미지를 한 개나 여러 개 지정합니다. url("") 을 통해 지정할 수 있으며 콤마(,)로 구분해 여러 개의 이미지를 지정할 수 있습니다. 또한, gradient를 통해 그라데이션을 배경으로 지정할 수 있습니다. 📌 back..

[CSS] CSS의 박스 모델

✔️ 인라인 요소와 블록 요소 모든 HTML 요소는 inline, block, inline-block 중 하나의 display 속성을 갖습니다. inline : 글자를 개별적으로 꾸미는 서식에 관련된 태그들 , , , , , , , , , , , , , 등 block : 레이아웃(목록, 제목, 테이블, 시맨틱)에 관련된 태그들 , , , , , , , , , , , , , , , , , , , , , , , , , , , 등 inline-block : 이미지를 비롯한 대부분의 폼 요소 태그들 , , , , , , , 등 See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen. ✔️ 요소의 크기 📌 크기의 단위 % : 기본 크기를 100%로 놓..