프로그래밍 공부 노트

inline display 속성이 inline으로 지정된 엘리먼트는 줄 바꿈 없이 컨텐츠가 옆으로 나란히 나열된다. 대표적으로 <span> 태그가 inline 속성을 가진 태그이다. display: inline 속성을 사용할 때 주의할점이 있는데 width와 height 속성을 적용하더라도 무시된다. inline  속성은 무조건 해당 컨텐츠 크기만큼 width와 height가 고정이기 때문이다. 또한 margin과 padding 속성운 좌우에만 적용이 가능하고 상하에는 적용하더라도 무시된다. block display 속성이 block으로 지정된 엘리먼트는 해당 컨텐츠가 한줄을 모두 차지해 다른 컨텐츠가 줄바꿈이 되도록한다. 대표적으로 <div> 태그가 block 속성을 가진 태그이다. display: block 속성을 사용할 때는 inline 속성과 달리 width, height 그리고 margin, padding 속성이 좌우상하 모두 적용 가능하다. inline-block display 속성이 inline-block으로 지정된 엘리먼트는 위 두 속성(inline, block)을 하이브리드한 속성이다. 외부적으로 보여지는 표현되는 방식은 inline 속성과 같이 동작하지만 block 속성에서만 적용할 수 있었던 witdh, height, margin, padding 속성 적용이 가능하다. 즉, 외부적으로는 inline 속성처럼 동작하지만 내부적으로는 block 속성처럼 동작한다. 대표적으로 <button>, <input>, <select> 태그 등이 있다.

플렉스 박스  레이아웃이란 그리드 레이아웃을 기본으로 하여 박스들을 원하는 위치에 위치하도록 하는 것이다. 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 : 플렉

display 속성을 이용하면 블록 레벨 요소도 인라인 레벨 요소로 변경이 가능하며 반대로도 변환이 가능하다. display 속성의 경우 여러 경우에 사용되지만 일반적으로 세로로 출력되는 목록을 가로 네비게이션 메뉴로 바꿀때 사용한다. { display : block; } 블록 레벨 요소는 해당 컨텐츠의 크기가 아닌 해당 컨텐츠가있는 해당 행을 모두 차지하며 다른 컨텐츠가 추가되면 줄바꿈이 발생하게 된다. { display : inline; } 인라인 레벨 요소는 해당 컨텐츠의 크기 만큼만 화면에서 차지한다. 그래서 추가적으로 컨텐츠가 추가되어도 같은 행에 출력될 수 있다. 예시로 보면 <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Document </ title > < style > #block img { display : block ; margin : 5px ; } </ style > </ head > < body > < p > inline 방식 </ p > < div id = "inline" > < img src = "./images/pic.png" alt = "초록색 사진" /> < img src = "./images/pic.png" alt = &qu