민톨이의 개발기록장

행(row) 또는 열(column)을 주축으로 설정하여 웹 요소를 배치/정렬하는 1차원 레이아웃 요소의 배치/정렬은 플렉스 컨테이너 & 플렉스 아이템간 상호작용을 통해 결정 ㄴ 플레스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소 ㄴ 플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소 사용방법 : display: flex; 를 적용하면 플렉스 컨테이너가 만들어진다. (+ 플렉스 컨테이너는 기본적으로는 박스레벨요소) display: inline-flex; => 인라인레벨요소의 플렉스 컨테이너 -플렉스박스 방식은 두 개의 축(행(x축),열(y축))이 있다. -동시에 두축을 제어하는 방식은 없다. (둘 중 하나만) => 1차원 레이아웃 방식 -기본축은 가로축인 x축 flex-..

-한 속성에 대해 여러개의 class가 있다면 우선적으로 적용되는 것은 나중에 오는 것이다 ex) Hello .a-class { color: green; } .another-class { color: blue; } => 이 경우에 우선적으로 적용되는 것은? 더 나중에 적힌 코드인 another-class이다. blue 적용 ! -id가 class보다 우선적용 ex) Hello .a-class { color: blue; } #an-id { color: green; } => 이 경우에 우선적으로 적용되는 것은? id 선택자인 후자의 것이다. green 적용!

ol / li 를 출력하면 이렇게 된다. 색상을 바꾸기 위해 style.css파일을 만들고 연결하여 이렇게 실행하면? 이렇게 1,2,3이 일괄적으로 빨간색으로 변한다 그렇다면 하나만 바꾸기 위해서는 어떻게 해야할까? html 파일 내에서 이렇게 처리해버린다 그러몬 이렇게 된다 !

Hex codes ex) h1 { color:#5D3891 } background-color color : h2태그의 글자색 변경 background-color : h2태그의 배경테두리색 변경 Font properties Font Size 1px : 1/96th inch 1pt : 1/72nd inch 1em : 100% of parent - 상대적인 크기 1rem : 100% of root Font Weight 글꼴 두께 normal/bold : Keywords lighter/bolder : Relative to parent number : 100-900 Font Family 글꼴 이름+ 쉼표 + 백업 일반 글꼴 h1 { font-family: Helvetica, sans-serif } h2 { fon..

Iinline 특정 섹션에 사용 / 테스트/ html 단일 요소나 한 줄에만 사용되길 원할 때 사용 Internal 여닫는 style태그 안에 css를 추가하는 방식 / head 내에 작성 External