1) color : 글자 색을 지정하는 속성 선택자{ color : 색상명(영문) | 16진수 숫자 RGB(#fff, #fffff) | rgb(255, 255, 255) | rgba(255, 255, 255, 1) | hsl(360, 100, 100) | hsla(360, 100, 100, 1) } 2) text-deco...

3. 배치 관련 스타일(float / clear) position은 요소의 위치를 지정하는 속성 ✔️ position : relative; (상대적인) - 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성 - 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용...

2. 요소 정렬 스타일(float / clear) ✔️ float(띄우다) : 요소를 띄워서 좌/우로 정렬하는 속성 ✔️ clear : float로 인해서 띄워져 있는 상태를 해제하는 속성 (float 사용 시 겹침 문제가 발생하는데 이를 해결할 수 있음) 1) 기본 형태 2) float : left 3) flo...

1. 요소의 영역(여백) 관련 속성 ✔ HTMl 요소는 총 4가지 영역으로 구성되어 있다 1. content 영역 - 요소의 내용이 작성 되어지는 영역 (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨) 2. padding 영역 - content 영역과 border 영역 사이 3. border 영역 - 요소의 테두리가 지정되는 영역...

1) 레이아웃(layout) ✔ 사전적 의미 : 배치, 정리 ✔ 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미 2) 화면 배치 방법(형식) : dispaly 속성 ✔ 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성 - block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 ...

1. Flexbox 1) Flexbox 개념 ✔ 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식 💡 Flexbox를 이용할 때 반드시 알아야 되는것 (1) Flexbox의 구성 - flex-container : 정렬이 필요한 요소를 감싸는 요소 - item : 정렬을 적용할 요소 (...

CSS 우선 순위 ✔ 기본적으로 css 속성은 style 태그 또는 css파일에 작성된 순서(위 → 아래)대로 해석이 진행된다. 하지만 같은 요소에 여러 css 속성이 설정되는 경우, 우선 순위가 적용된다 💡 알아둬야 할 것!! 1) 동일한 우선 순위로 css 속성이 설정된 경우에는 제일 마지막에 작성된 css 속성이 반영 2) 여러 선택자...

1) 기타 선택자 ✔ :only-child 특정 요소의 자식이 하나밖에 없을 때 선택 ✔ :only-of-child 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택 ✔ :empty 자식 요소가 없는 요소를 선택 - 자식 요소?? 태그, 글자, 띄어쓰기 모두를 자식 요소라고 한다 ...

1) 일반 구조 선택자 ✔ 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자 (중요) 위치를 기준으로 구분함 :first-child :last-child :nth-child(수열) :nth-last-child(수열) ✔ #test1 > p 선택자를 통해서 #test1의 자식 중 p태그만 선택했지만 #test1의 자...

문자열 속성 선택자 ✔ 속성 값의 문자열을 확인하여 스타일 적용하는 방식의 선택자 1) 선택자[속성명 ~= "특정값"] { css 코드; } → 띄어쓰기로 구분되어 있는 여러 속성값이 작성된 속성 중 속성값이 특정값을 단어로 포함하는 요소를 선택 2) 선택자[속성명 |= "특정값"] { css 코드; } → 속성값이 특정값을 단어로 포함하는...