시나브로

> 선택자의 종류 기본 선택자 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 > 의사 요소 (pseudo - elements) 선택자를 추가하는 키워드. 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음. ex. > 의사 요소 종류 first-line : 블록 레벨 요소의 첫 번째 선에 스타일 적용. first-letter : 블록 레벨 요소의 첫 번째 글자에 스타일 적용. marker : 목록 기호의 스타일을 적용. placeholder : 입력 요소의 자리 표시자 스타일 적용. after : 요소의 뒤에 의사 요소 생성 및 추가. before : 요소의 앞에 의사 요소 생성 및 추가. > first - line 예시 (ft. 파이팅 해야지 - 부석순) > first - lette..

> 선택자의 종류 기본 선택자 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 > 의사 클래스 (가상 클래스) 선택자에 추가하는 키워드. 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미. ex. > 의사 클래스 종류 hover : 마우스 커서가 요소에 올라가 있을 때. active : 사용자가 요소를 활성화했을 때. (ex. 클릭) focus : 요소가 포커스를 받고 있을 때. disabled : 비활성 상태의 요소임. nth-child() : 형제 사이에서의 순서에 따라 요소를 선택함. > hover 예시 > active 예시 > focus 예시 > disabled 예시 > nth - child() 예시

> 선택자 어떤 요소에 스타일을 적용할 것인지에 대한 정보 > 선택자의 종류 기본 선택자 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 > 특성 선택자_ 1) 컨셉 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택함. 속성 선택자라고 칭하기도 함. ex. > 클래스 속성을 가지고 있는 요소 선택 > 클래스 속성이 "box"인 요소 선택 > 특성 선택자_ 2) 값 확인 기호를 추가하여 요소를 선택하는 방식의 다양화가 가능함. ex. > 클래스 값에 "abs"가 포함되는 요소 선택 > 클래스 값이 "abs"로 시작하는 요소 선택 > 클래스 값이 "abs"로 끝나는 요소 선택 > 특성 선택자 예시 > 결합 선택자_ 1) 컨셉 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택..

> flexbox (flex 컨테이너) 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델. 1차원 모델 : 레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만 다루는 모델. 컨테이너에 'display: flex;' 를 적용해서 만들 수 있음. '주축(→/main-axis)'과 '교차축(↓/cross-axis)'이 존재함. ex. > flex 컨테이너가 되기 전 > flex 컨테이너가 된 상태 기본 마진 값을 무시하고 자신의 진행 방향대로 요소를 배치함. (기본값은 행방향) > flex - direction 속성 flexbox 내에 요소를 배치할 때 사용할 주축 및 방향을 지정하는 속성. row : 기본값. 주축은 행. 방향은 콘텐츠의 방향과 동일. row-reverse..

> position 속성 문서 상에 요소를 배치하는 방법을 정의함. position : 요소의 배치 방법 결정. > 선택적으로 사용해 위치를 지정함. top : 윗면에서부터 떨어뜨리는 정도. bottom : 아랫면에서부터 떨어뜨리는 정도. left : 왼쪽면에서부터 떨어뜨리는 정도. right : 오른쪽면에서부터 떨어뜨리는 정도. > position 속성값 static : 기본값. 일반적인 문서 흐름에 따라 배치. relative : 자신의 원래 위치를 기준으로 오프셋 적용. absolute : 가장 가까운 포지션 요소를 기준으로 오프셋 적용. fixed : 스크롤이 이동해도 고정되어 움직이지 않도록 지정. sticky : 스크롤 동작이 되는 상위 요소를 기준으로 오프셋 적용. > position: re..

> background 속성 콘텐츠의 배경을 정의하는 단축속성. 색상, 이미지, 반복 등 하위 속성 정의 가능. > background 의 하위 속성 background-color : 배경 색 정의. background-image : 배경 이미지 정의. background-repeat : 배경 이미지의 반복 정의. background-position : 배경 이미지의 초기 위치 정의. background-size : 배경 이미지의 크기 정의. > background 속성 예시 > background - color 예시 > background - image 예시 > background - repeat 예시 > background - position 예시 ※ (기본값) background-position: ..

여백은 상하좌우 네 개의 면에 존재하는 영역. 하위 속성을 사용하거나 여러 값을 한번에 정의해서 각 면에 개별적으로 여백의 두께를 정의할 수 있음. > 하위 속성 정의 상하좌우 여백을 정의할 수 있는 개별 속성. padding-top / padding-bottom / padding-left / padding-right margin-top / margin-bottom / margin-left / margin-right ex. > 여러 값을 한번에 정의 padding과 margin 속성은 네 면의 여백에 대한 단축속성. ex.

> 박스모델 (Box - Model) 박스 : 브라우저가 요소를 렌더링할 때, 요소가 사각형 형태로 차지하는 영역. 박스의 크기, 위치, 속성(색, 배경, 테두리 등)을 결정할 수 있음. > 하나의 박스는 네 개의 영역으로 구성됨. 콘텐츠 영역 안쪽 여백 경계선 (테두리) 바깥쪽 여백 > 각 영역의 크기를 정의하는 속성 콘텐츠 영역 : width, height 안쪽 여백 : padding 경계선 (테두리) : border-width 바깥쪽 여백 : margin > 박스모델 예시 바깥쪽 여백(margin) → 테두리(border) → 안쪽 여백(padding) → 콘텐츠 영역 바깥쪽 여백(margin) → 테두리(border) → 안쪽 여백(padding) → 콘텐츠 영역(width, height)

> display 속성 요소를 블록 레벨과 인라인 중 어떤 쪽으로 처리할지 정의하는 속성. 요소를 배치할 레이아웃을 결정하는 것도 가능함. > display 속성값 inline : 인라인으로 처리. block : 블록 레벨로 처리. inline-block : 인라인으로 배치하되, 블록 레벨의 속성 추가 가능. none : 표시하지 않음. > border 속성 요소가 차지하고 있는 영역에 테두리를 표시하는 속성. 속성값으로 테두리의 두께, 모양, 크기 등을 지정함(단축속성). ex. > 두께가 3px인 직선 모양의 분홍색 테두리를 표시함. > border 의 하위 속성 속성값을 따로 지정하는 것도 가능함. border-color : color 속성과 동일. border-width : thick, mediu..

> font - family 속성 요소를 구성하는 텍스트의 글꼴을 정의함. 글꼴명을 속성값으로 지정함. 여러 개의 글꼴을 연이어 작성하여 우선순위를 지정할 수 있음. ex. > 우선순위가 높은 글꼴이 지원되지 않을 경우 뒤에 있는 글꼴로 지정됨. > font - size 속성 수치와 단위를 지정해 텍스트의 크기를 정의함. px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기. rem : html 태그의 크기에 맞춰 배수만큼 크기 조절. 상대적인 크기. em : 부모 태그(상위 태그)의 크기에 맞춰 배수만큼 크기 조절. 상대적인 크기. ex. > text - align 속성 블록 내에서 텍스트의 정력 방식을 정의함. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 j..