모스카토

[배경지식] 1. 웹사이트 제작할 때 고려할 사항 1. 웹 표준 : 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격 * 잘지키면 검색엔진에서 상단에 노출될 확률이 높아진다. 2. 웹 접근성 : 사용자의 장애여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식 3 . 크로스 브라우징 : 모든 브라우저의 종류, 버전 또는 모든 기기에서 사이트가 제대로 작동하도록 하는것. 2. html문서 기본구조 html5 언어로 구성돼있다고 선언. 모든 내용을 감싸는 태그 -> 문서의 시작과 끝을 의미 웹사이트의 간단한 요약정보, 사용자에게 보여지지 않는다. character setting : 문자열 설정 / UTF-8 : 모든 문자코드를 보여줄 때 주는 속성. 한글이 깨질때 확인하기 상단탭 제목 웹..

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 (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! 박스 태그는 박스형태..

1. 정의 html = hypertext markup language 인터넷 페이지를 열고 F12 를 누르거나, 오른쪽 마우스 클릭 + 검사 를 누르면 나오는 페이지에서 Elements 라는 태그를 클릭하면 나오는 글자들이 html이다. 웹페이지를 만드는 것이 다 글자임을 알 수 있다. 2. visual studio code 에디터 프로그램. 다른 언어도 사용할 수 있지만 html을 사용할 땐 주로 vsc를 사용한다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linu..