민톨이의 개발기록장

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

웹사이트 폰트 적용하기 1.원하는 사이트 들어가기 2. f12 - search - @font-face 3. font-face 첫번째거 누르고,, 홈페이지 주소 + font-face 부모 폴더(/ + 폴더명) 차례대로 적고 폰트 적기 https://www.outback.co.kr+ /asset + /common +/font/Akrobat-ExtraBold.woff ex) 아웃백 'Akrobat' 폰트 적용 https://www.outback.co.kr/asset/common/font/Akrobat-ExtraBold.woff

-한 속성에 대해 여러개의 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 파일 내에서 이렇게 처리해버린다 그러몬 이렇게 된다 !

-width : 너비 -height : 높이 -border : 테두리 (ex. border: 10px(두께) solid(테두리스타일) black(색)) border-top: 0px -> 상단 테두리 x border-width: (값1 값2 값3 값4까지 가능) : 값1 - top / 값2 - right / 값3 - bottom / 값4 - left ㄴ border-width를 2개의 값으로 설정하면 ( 값1 : top/bottom - 값2 : left/right) -padding : 값을 주면 안쪽 여백이나 테두리 사이 간격 추가 / p와 border사이의 여백 -margin : 경계선 바깥쪽이 경계선 / border와 바깥쪽과의 여백

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..

-중괄호 앞에 있는 녀석 ex) h1 { color:red } 에서 h1 처럼 ,, class Selector "." + class명 + {css} class : 요소들을 그룹화 ex) css : .green-text{ color:green; } -태그가 달라도 같이 그룹화 설정 가능하다 (ex. / Id Selector "#" + id명 + {css} - class와 마찬가지로 요소들을 그룹화 ex) green ==> css : #main{ color:green; } Difference between Class selector and Id selector Class selector 여러 요소에 적용 가능 Id selector 단일 html 파일의 한 요소에만 적용 / 고유 / 파일과 클래스당 하나의 요..

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