kimyws

■ flex box란? ○ flex box란?- 행 또는 열을 주축으로 설정하여 웹 요소를 배치 정렬 하는 1차원 레이아웃 방식- flex 방식에서, 요소의 배치와 정렬은 flex container와 flex item 간의 상호작용- flex 방식을 사용하기 위해서는 display: flex 사용 ○ flex container- flex box 방식으로 레이아웃을 결정할 요소 ○ flex item- flex container 내부에서 flex box 방식으로 배치되는 요소- flex item은 기본적으로 container의 높이에 맞춰 나온다. ○ flex 축방식- 주축이 가로방향의 행으로 좌우라면 교차축은 세로방향의 열로 위아래  ■ flex-direction ○ 주축의 방향성을 결정하는 속성 ○ 행은..

■ grid layout ○ grid layout이란 - 이름 그대로 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식 - 그리드 아이템의 배치와 정렬은 컨테이너 내부 행과 열의 상호작용을 통해 결정 - flex는 주축과 교차축을 가지고 정리한다고 한다면 gird는 상호작용을 통해 결정 - grid container : 레이아웃을 그리드 방식으로 결정할 요소 - grid item : 컨테이너 내부에서 그리드 방식으로 배치 ○ 사용법 grid container에서 display속성의 값에 grid 사용 div{ diplay: grid; } ■ grid-template-columns,rows ○ grid-template-columns - grid container 트랙 중 열 내 아이템들의 크기를 지정할 ..

■ css 적용방법 ◎ html에서 연결방법 ) div > .클래스명 {} div내부에 있는 클래스인데 div의 바로 아래있는 클래스만 선택해 준다. 인접 형제 선택자 (+) div h1+h2 {} div > h1+h2 {} div내부에 있는 자손 h1의 바로 밑의 형제 h2를 선택해 준다 div바로 아래 있는 h1의 바로 밑의 형제 h2를 선택해 준다 그룹 선택자 (,) .클래스1, .클래스2 {} 클래스 1과 클래스 2를 모두 선택해 준다. 속성 선택자([]) [target] {} a[target] {} a [target] {} [target="_blank"] {} [class^="list"] {} 그외 추가적으로 속성이 target이 있는 것을 선택 a태그의 속성 target이 있는 a태그 자손중에..

■ 서체와 글 스타일 기본 ○ 기본체와 동일한 경우 서체 불러오는 방법 body { font-family:'돋움',dotum, helvetica, sans-serif } '돋움' = 서체값이 두단어 이상이거나 영어가 아닌 경우 따옴표 dotum = 영문윈도우 기반 helvetica = 맥 os기반의 컴퓨터 대비 ○ 웹에 올려 연결하는 방법 @font-face를 지원한다. @font-face{ font-family: '폰트명'; src: url(폰트경로); } ○ 구글 폰트 사이트 (http://www.fonts.google.com) html head와 head사이에 넣어야 한다. font-fmily : "xx", sans-seif; CSS에 넣어 줘야 한다. @import url(''); CSS에 넣어 ..

■ HTML 기본 템플릿 생성 ! 태크 추가 div*3 자식요소 태그 추가 div>div*3 순서대로 태그 생성 div+p+span 태그에 클래스 넣어서 만들기 div.itme*3 태그에 속성 넣어서 새로 만들기 div[class]*3 태그에 클래스 넣어서 번호매기기 div.item$@*3 태그에 아이디 넣어서 번호매기기 div#item$@*3 태그에 내용 넣어서 번호매기기 div{안녕$@}*3 안녕1 안녕2 안녕3 역순으로 넣어만들기 div{안녕$@-}*3 안녕3 안녕2 안녕1 아이디, 클래스 가진 div 태그 생성 #a$@*3 .a$@*3 ■ CSS w10 width: 10px; h10 height: 10px; m10 margin: 10px; p10 padding: 10px; t10 top: 10px..

■ CSS 란? CSS의 역할 ○ CSS (Cascading Style Sheets) - Cascading : 계단식 위에서 흐르는 - Style : 양식 - Sheets : 판, 한장 - 계단식으로 스타일을 정의하는 문서 - HTML 문서에 스타일을 더해준다. HTML은 계단식 구조를 지니고 있다. ○ CSS 기본문법 - 선택자 : 어떤 요소에 스타일을 적용할지 정보 - {중괄호} : 선택한 요소에 적용할 스타일을 정의 하는 구간 - 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 - 속성값 : 어느정도의 수치에 맞게 정의하고 싶은지에 대한 정보 ○ html에서 연결방법 ○ CSS주석처리 p{ background-color: blue; /* p태그에 파랑 넣기 */ } ○ HTML에 CSS를 더해..

■ HTML이란? ○ HTML : HyperText Markup Language - HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트 - Markup : 표시 (콘텐츠를) - Language : 언어 > 하이퍼 텍스트와 콘텐츠를 표시해주는 언어 > 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어 ○ HTML은 콘텐츠를 정의 - 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함 - 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다. - HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. ○ HTML 문서 : 확장자가 HTML - 텍스트 편집기 : Brackets, VScode ..

■ EMMET 약어 태그  ■ Webstroyboy ■ HTML기초 - 링크 ■ CSS기초 - 링크 - Flex Froggy : 기본 플렉스 문제- Flex Defense : 플렉스 심화 문제- Flex Playground : 플렉스 전반적인 내용 ■ Layout ■ image 태그■ 메뉴바 - 2차시험 결과형식  ■ 3차 웹페이지 구성 ■ JQuery - 형태■