728x90
728x90
공부방2022. 11. 15. 20:58(5) 구조의사 클래스 사용해보기(2)

See the Pen Untitled by magic (@mag11c) on CodePen.

공부방2022. 11. 15. 20:58(4) 구조 의사 클래스 사용해보기

See the Pen Untitled by magic (@mag11c) on CodePen.

공부방2022. 11. 15. 20:56(3) flex 활용 배치

See the Pen Untitled by magic (@mag11c) on CodePen.

공부방2022. 11. 15. 20:55(2) 의사클래스 활용

See the Pen Untitled by magic (@mag11c) on CodePen.

공부방2022. 11. 15. 20:52(1) layout 나누고 기타작업

See the Pen Untitled by magic (@mag11c) on CodePen.

공부방2022. 11. 14. 14:03css(17) text-transform

text-transform : 입력된 글자들을 대문자 또는 소문자로 변경 1. none : 입력된 그대로 출력 2. capitalize : 단어의 첫번째 글자를 대문자로 바꿈 3. uppercase : 모든 글자를 대문자로 바꿈 4. lowercase : 모든 글자를 소문자로 바꿈 5. initial : 기본값으로 설정 6. inherit : 부모 요소의 속성값을 상속받음 See the Pen Untitled by magic (@mag11c) on CodePen.

공부방2022. 11. 13. 11:53css(16) flexable box layout (flex)

플렉서블 박스 레이아웃 - 플렉스박스 혹은 플렉스라고 부르며 CSS3부터 나온 레이아웃 모델 - 해당 요소의 display 속성을 설정함으로써 시작(dlsplay:flex, inline:flex) - 플렉스는 오직 플렉스 요소가 컨테이너 내부에서 어떻게 위치하는가만 정의하기 때문에 요소 내부의 스타일은 평소처럼 동작한다 1. flex-direction - 플렉스 컨테이너 내부에서 플렉스 요소가 배치될 방향을 설정 ⓐ row : 기본값, 플렉스 아이템들은 왼쪽에서 오른쪽으로, 위에서 아래로 배치 ⓑ row-reverse : 플렉스 아이템을 오른쪽에서 왼쪽으로 배치 ⓒ column : 위에서 아래로 ⓓ column-reverse : 아래에서 위로 2. justify-content - 플렉스 아이템의 수평방향..

공부방2022. 11. 13. 11:49css(15)attributeselector

속성 선택자 : 특정속성, 속성값을 가지고 있는 html요소를 선택하는 방법 ex) [속성명] 선택자 [속성명="속성값"] 선택자 1. 문자열 속성 선택자 [속성명~="속성값"] : 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택 속성값에 -이 들어가 있으면 선택되지 않는다 속성값이 정확하게 일치하거나 띄어쓰기를 기준으로 속성값과 동일한 단어인 요소를 선택한다 [속성명|="속성값"] : 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택 속성값이 정확하게 일치하거나 속성값 다음 -으로 시작하는 요소만을 선택 [속성명^="속성값"] : 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택 [속성명$="속성값"] : 특정 속성의..

728x90
728x90
image