모스카토

pseudo selector는 태그가 어떤 특정 상태일 때의 스타일을 지정하는 방법이다. button:hover{background-color:red;} 위 코드와 같이 button에 마우스가 올라간 상태일 때 button의 배경색을 빨갛게 해줄 수 있다. pseudo selector 종류 1. pseudo class : 태그의 상태에 따라 선택한다. :hover 마우스를 올린 상태 :focus 키보드 tab으로 선택되어 있는 상태 :focus-within 자식이 포커스된 상태 :active 클릭된 상태 :visited 방문한 링크일때 :link 방문하지 않은 링크일때 :first-child first child 일때 :last-child last child 일때 :nth-child(n) n번째 chil..

크기단위 1. px : 픽셀 - 1px :화소 1개. 해상도에 따라 상대적인 크기. 2. % : 지정된 사이즈에 상대적인 사이즈. 3. em : 배수단위(중첩된 요소 안에 사용하면 배수도 중첩.) 4. rem : 최상위 요소 기준 배수. 5. vh = viewport height : 스크린 높이, 100vh = 스크린높이의 100% vw = viewport width : 스크린 넓이 색상표현단위 1. 키워드 : blue; 2. rgb() : rgb(192, 35, 35); 3. rgba() : rgb에 투명도포함. 4. HEX 코드단위 : #6495ed; 셀렉터 1. * { css } 2. #아이디 { css } 3. .클래스 { css } 4. 태그[어트리뷰트="값"] { css } 어트리뷰트와 값이 ..

inline-block은 박스들을 원하는 위치에 정렬하기 힘들고, 간격을 수동적으로 맞춰야 한다는 단점이 있다. 이를 보완하기 좋은 레이아웃이 flex이다. body 안에 div 4개를 만들었다. div는 block 이므로 위와 같이 세로로 정렬된다. div안에 쓴 숫자도 왼쪽 위에 정렬된다. 여기에 display : flex; 를 적용하면 block 인 div를 옆으로 정렬할 수 있다. flex를 사용하는 방법 1. 박스들의 부모요소에 display:flex; 적용 => 부모요소가 flex container가 됨. div 박스들을 flexbox로 만들기 위해서는 모든 div의 부모요소에 display:flex;를 줘야 한다. 현재 body 아래에 div가 있으므로 모든 div의 부모요소는 body이다...

css 의 프로퍼티 중 display에는 block이나 inline등의 값을 줄 수 있다. block 박스모양의 영역을 가지고, 같은 줄에는 아무것도 있을 수 없다. 웹페이지의 대부분은 박스로 이루어진다. 태그 하나는 박스를 이루고, 태그 안에 태그는 박스 안에 박스가 된다. 영역을 나누는 것과 비슷하게 박스를 사용한다. html > body> div > div.box2 순으로 빈 태그들이 있다. 여기에 각 태그마다 배경색이 다르게 색깔을 주면 위와 같이 각 박스 안에 박스가 들어있다. block 의 특징 width, height 가 존재 margin, padding 줄 하나에서 옆에 다른 요소가 올 수 없다. (가로 폭 전체를 차지한다.) block에 해당하는 태그 div, p, table, secti..

css (Cascading Style Sheets) = css 코드의 위에서 아래 순으로 html의 style을 정의한다. * css 문법 * 셀렉터 { 프로퍼티1 : 값1; 프로퍼티2 : 값2; } 셀렉터에는 html의 태그명, 태그의 id, 태그의 class, 태그의 어트리뷰트 등을 쓴다. 말그대로 어떤 요소에 style을 적용할지 지정하는 역할을 한다. 여러개의 셀렉터를 콤마로 구분해서 사용할 수 있다. 중괄호를 열고, 프로퍼티는 여러 개를 사용할 수 있다. 반드시 세미콜론 ( ; )으로 닫아줘야 한다. html에 css를 적용하는 방법 위 상태에 css를 적용한다. 1. inline css : This is a header Hello World! Welcome to html! 박스 태그는 박스형태..

:화면에 보이지 않는 내용, 브라우저 ① ② : 브라우저가 내용을 인코딩할 언어 ③ : 검색엔진이 찾는 태그 ④ : 탭에 표시될 로고 등 사진 type = "color" 를 주면 첫번째 박스처럼 색상표가 나오고, type = "text" 를 주면 평범한 텍스트를 입력할 수 있는 박스가 생기고, type="password" 를 주면 입력한 값이 *로 표시된다. type="submit" 을 주면 form 태그의 action에 있는 주소로 값을 전송할 수 있다. type="file" 을 주면 위 그림과 같이 로컬 컴퓨터에 있는 파일을 선택할 수 있다. type="checkbox" 는 체크할 수 있는 선택지를 만들 수 있다. type = "button" 을 주면 클릭할 수 있는 버튼이 생긴다. 외에도 많은 ty..