text-transform : 입력된 글자들을 대문자 또는 소문자로 변경 1. none : 입력된 그대로 출력 2. capitalize : 단어의 첫번째 글자를 대문자로 바꿈 3. uppercase : 모든 글자를 대문자로 바꿈 4. lowercase : 모든 글자를 소문자로 바꿈 5. initial : 기본값으로 설정 6. inherit : 부모 요소의 속성값을 상속받음 See the Pen Untitled by magic (@mag11c) on CodePen.
플렉서블 박스 레이아웃 - 플렉스박스 혹은 플렉스라고 부르며 CSS3부터 나온 레이아웃 모델 - 해당 요소의 display 속성을 설정함으로써 시작(dlsplay:flex, inline:flex) - 플렉스는 오직 플렉스 요소가 컨테이너 내부에서 어떻게 위치하는가만 정의하기 때문에 요소 내부의 스타일은 평소처럼 동작한다 1. flex-direction - 플렉스 컨테이너 내부에서 플렉스 요소가 배치될 방향을 설정 ⓐ row : 기본값, 플렉스 아이템들은 왼쪽에서 오른쪽으로, 위에서 아래로 배치 ⓑ row-reverse : 플렉스 아이템을 오른쪽에서 왼쪽으로 배치 ⓒ column : 위에서 아래로 ⓓ column-reverse : 아래에서 위로 2. justify-content - 플렉스 아이템의 수평방향..
속성 선택자 : 특정속성, 속성값을 가지고 있는 html요소를 선택하는 방법 ex) [속성명] 선택자 [속성명="속성값"] 선택자 1. 문자열 속성 선택자 [속성명~="속성값"] : 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택 속성값에 -이 들어가 있으면 선택되지 않는다 속성값이 정확하게 일치하거나 띄어쓰기를 기준으로 속성값과 동일한 단어인 요소를 선택한다 [속성명|="속성값"] : 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택 속성값이 정확하게 일치하거나 속성값 다음 -으로 시작하는 요소만을 선택 [속성명^="속성값"] : 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택 [속성명$="속성값"] : 특정 속성의..
선택자(selector) : 스타일을 적용할 대상을 선택하는 방법 1. 전체 셀렉터 - html 문서 내부의 모든 요소를 선택하여 스타일을 적용시킬 때 사용 2. 요소 셀렉터 - 스타일을 적용할 대상으로 html 요소명을 직접 입력 3. 아이디 셀렉터 - 특정한 아이디 이름을 가지는 요소만을 선택한다 - 2개 이상은 사용하지 않는것이 좋다 - html/css에서는 하나의 웹 페이지에 여러 요소에 같은 아이디 이름을 사용해도 별다른 문제없이 동작 하지만 Javascript로 이벤트를 제어하려고 하면 에러가 발생하기 때문에 ID는 중복을 피해서 쓰는것이 좋다 4. 클래스 셀렉터 - 특정한 집단의 여러 요소들을 한번에 선택할 때 5. 그룹 셀렉터 - id, 클래스도 그룹으로 묶을 수 있다 6. 자손 셀렉터(e..
의사 클래스 : 선택하고자 하는 html요소의 특별한 상태를 명시할 때 1. 동적 의사 클래스(a 태그 상태) - link - visited - active - focus - hover 2. 상태 의사 클래스 - checked : 체크된 상태의 input요소 선택 - enabled : 사용할 수 있는 input요소 - disabled : 사용할 수 없는 input요소 3. 구조 의사 클래스 - first-child : 모든 자식요소 중 맨 앞에 위치하는 자식요소를 모두 선택 - last-child : 모든 자식요소 중 맨 마지막에 위치하는 자식요소를 모두 선택 - ★nth-child : 모든 자식요소 중 n번째에 위치하는 자식요소를 모두 선택 - first-of-type : 모든 자식요소 중 맨 처음으로..