프로그래밍 공부 노트

 CSS 기본적인 레이아웃 잡기 우리나라 사람이라면 모두 사용해봤을 네이버(naver)를 예로들어 레이아웃을 잡아보려고한다. 네이버를 기준으로 웹사이트의 기본적인 레이아웃을 잡을때 가장 먼저 div태그로 가로 행의 갯수를 잡는다.(사이트마다 상이하다.) 대충 딱 봤을때 3등분이 되어있다는 느낌이 강하게 느껴진다. (자세히 보지않아서 모르겠지만 더 세세하게 나눠져있을 수 있다.) 총 가로 3행으로 나눈것을 볼수있다. 이럴경우  <div>1</div> <div>2</div> <div>3</div> 와 같이 화면의 가로 너비 100%를 차지하는 div태그로 나눌수있다. 컨텐츠를 직접 작성하기는 어려워 컨텐츠대신 숫자만 대입했다. 그 후 자세히 보면 가로로 3등분 되어있다는 느낌이 확든다. 공백 | 컨텐츠 | 공백 공백 | 컨텐츠 | 공백 으로 되어있는데 이것은 따로 div태그로 나눴다기보다는 데이터들을 담고있는 div태그에 가로 너비(width)를 지정하여 가운데 정렬 시킨것이다.  가운데 정렬은 style 속성으로 margin: 0 auto; 를 작성하면 가운데 정렬이 된다. margin: 0 auto; 은 margin-top, margin-bottom 은 0, margin-right, margin-left 는 auto 이다. 이렇게 div태그로 가운데 정렬된 데이터를 자세히보면 컨텐츠사이에 여백이있고 2열로 나란히 정렬되어있다는 느낌이 든다. (개발자 도구로 확인하면 2열로 나뉜다.) 이것또한 div태그로 열을 지정해준것이다.  네이버에서 지정한 크기와는 다르지만 가운데 정렬한 최상위 div태그의 너비(width)가 1000px이라고 한다면 그 최상위 div태그 안에 작성되는 div들의 너비 100%는  1000px 이다. div태그는 기본적으로 display: block; 속성을 가지고있어서 기본적으로 2열이 아닌 2행이 만들어진다. 2열을 만들고자 한다면 2개의 div태그의 속성을 displa

플렉스 박스  레이아웃이란 그리드 레이아웃을 기본으로 하여 박스들을 원하는 위치에 위치하도록 하는 것이다. 1. 플렉스 컨테이너(flex container) - 웹 문서에 텍스트, 이미지, 표 등 요소들을 플렉스하게 사용하려면 플렉스 하고자하는 요소들을 먼저 플렉스 컨테이너(최상위 태그)로 전부 묶어줘야 한다. 2. 플렉스 항목(flex item) - 플렉스 컨테이너에 담기는 요소들이다. 3. 주축(main axis) - 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이다. 주축은 기본적으로 왼쪽에서 오른쪽 방향(row)으로 배치한다.  4. 교차축(cross axis) - 교차축은 주축과 교차되는 방향이다. flex-direction이 row이면 위에서 아래 방향으로 교차축이 배치되고 flex-direction이 column이면 좌에서 우로 교차축이 배치된다. 플렉스 사용법 및 속성 display : 플렉스 박스 레이아웃을 지정하려면 콘텐츠들을 하나의 부모요소로 묶고 display 속성을 이용해 플렉스 박스 형태를 지정해야 한다. (ex. display : flex;) display 속성과 브라우저 접두사 : 대부분의 최신 모던 브라우저에서는 모두 지원되지만 플렉스 박스를 지원하는 방법이 다르므로 브라우저 접두사를 붙여야 한다. ex) .container { display : -webkit-box; /* ios 6이하, 사파리 3.1 */ display : -moz-box; /* 파이어폭스 19 이하 */ display : -ms-flexbox; /* IE 10 */ display : -webkit-flex; /* 웹킷 구 버전*/ display : flex ; /* 표준 스펙*/ } flex-direction :  자식 요소 정렬 방향 row : 왼쪽에서 오른쪽 수평방향 정렬 column : 위에서 아래 수직 정렬 flex-wrap : 플렉