CSS 플렉스박스, flexbox 1. flex 박스란 박스 속 각 요소들의 공간 배분과 정렬 기능을 제공하는 1차원 레이아웃 모델이다. flex 컨테이너라고도 부른다. 즉 그 속에 요소들을 포함하고 그 요소들 간의 레이아웃을 결정하는 역할을 한다. flexbox를 1차원 모델이라 부르는 이유: 레이아웃을 한 번에 하나의 차원만을 다루기 때문이다. 즉 행 또는 열 만을 다룬다. flex 박스가 행을 다룰 때는 요소를 가로 방향으로 진행 시키고 열을 다룰 때는 요소를 새로 방향으로 진행 시킨다 2. 구문 flex 컨테이너를 만들기 위해서는 컨테이너에 디스플레이 속성에 속성값 flex를 적용한다. display: flex; 3. flex 박스 적용방법 1) 적용전 컨테이너 div(네모 상자 4개를 포함하고 ..

1. 상속 inherit, initial, unset 상속(inherit)은 하위 요소가 상위 요소의 스타일 속성 값을 물려받는 것이다. html 문서는 태그가 태그를 포함하는 방식이므로 그 결과 요소가 요소를 포함하는 구조로 웹 콘텐츠가 브라우저 화면에 표시된다. 예를 들어 ul 요소(순서 없는 목록)는 ul 요소 안에 li 요소(리스트 item)를 다수 포함하는 형식으로 만들어지고 표시된다. 이때 ul은 li의 상위 요소이고 li는 ul의 하위 요소이며, 이때 부모 요소와 자식 요소 간에 상속이 발생한다. 2. 상속(inherit)되는 속성과 상속되지 않는 속성 1) 상속(inherit)되는 속성 이름 속성값 초기값(Initial value) 'border-spacing' | inherit 0 'co..

의사 요소(Pseudo-elements): 사이비 요소, 가짜 요소 의사 요소는 선택자에 특정 키워드를 추가하여 요소의 특정 부분에 대한 스타일을 정의할 수 있다. 예를 들어 요소의 첫 번째 문자 또는 첫 번째 줄에 스타일을 지정할 수 있고, 요소 앞이나 뒤에 특정 내용을 삽입할 수 있다. 구문론 selector::pseudo-element { property : value ; } 의사요소 사용 방법 의미 ::first-letter p::first-letter {color : red; font-size: 3em; } 첫 번째 글자 빨간색, 글자 크기는 3배로 디스플레이하기(아래 그림) ::first-line p::first-line { color : red } 첫 번째 줄 빨간색으로 디스플레이하기(아래 ..

의사 클래스 Pseudo-classes 의사 클래스는 가상 클래스라고도 불린다.(사이비 클래스, 가짜 클래스) 의사 클래스는 선택자에 추가할 수 있는 키워드로 사용자가 요소 위에 마우스를 올리거나 버튼을 누를 때 요소의 스타일을 지정하는 등 요소의 특수 상태를 정의하는 데 사용된다. 사용자가 어떤 메뉴를 선택하거나 입력 필드의 내용을 입력하는 등 다양한 형태의 상호작용을 하는 시점마다 스타일을 다양하게 적용할 수 있도록 도와주는 것이 의사 클래스이다. 1. 의사 클래스의 구문론(syntax) 선택자:의사 클래스{ 속성명:속성값;} h1:hover {color:red;} h1요소 위로 마우스 포인터가 헤매면(hover) 글자 색을 빨간색으로 한다. 의사클래스 사용 예시 내용 hover h1:hover{ c..

특성 선택자(CSS Attribute Selectors), 결합 선택자(CSS Combinators) 1. 특성 선택자(Attribute Selectors) 속성 선택자라고도 부른다. 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택하는 선택자이며, 대괄호로 묶는 것이 특성 선택자의 기본 형태이다. 구분 특성 선택자 내용 [속성] [class]{ background-color: tomato; } [attribute] 선택자: ① 특정 속성을 가진 요소를 선택한다. 즉 클래스 라는 속성이 있으면 어떤 속성값을 가지더라도 요소를 선택. a[target]{background-color:yellow;} target ① 속성이 있는 모든 요소를 선택 [속성="값"] [class="item"]{ backgrou..

CSS 선택자(Selector) 선택자란: 어떤 요소에 style을 적용할 것인가, 스타일을 적용할 요소에 대한 정보. css 기본 문법, 즉 선택자{ 속성명: 속성값; }, 즉 중괄호 안에 그 정보를 표시한다. 선택자의 종류 기본 선택자: 단순 선택자(simple selectors = 이름, 아이디, 클래스 기반) 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 1. 기본 선택자 1) 전체 선택자(universal selector) 전체 선택자는 html 웹 문서를 구성하고 있는 모든 요소를 선택한다. 기호 애스터리스크(* 기호)는 css에서 문서 안의 모든 요소를 지시하는 css 기호이다. * { text-align: center; color: green; } 2) 태그 선택자(eleme..

1. 블록 요소(Block-level Elements)와 인라인 요소(Inline Elements) 모든 HTML 요소는 디스플레이 값을 갖는다. 디스플레이 값에는 블록 레벨 요소와 인라인 레벨 요소가 있다. 1-1. 블록 레벨 요소(Block-level Elements)와 인라인 요소(Inline Elements)의 차이 구분 블록 레벨 요소 인라인 요소 사용가능한 너비(width) div, p 등: 자기가 속한 영역의 너비를 모두 차지하여 블록을 만든다. 사용가능한 최대 너비(full width available)를 가진다. span, a 등 : 자기에게 필요한 만큼만 공간만 차지한다. 새 줄 시작 언제나 새 줄에서 시작한다 새 줄에서 시작하지 않는다. 상단 하단 여백 상단 및 하단 여백(top an..

background background는 콘텐츠의 배경을 정의한다. 색상, 이미지, 반복 등 하위 속성을 정의할 수 있으며 단축 속성을 사용할 수 있다. background의 하위 속성 background-color : 배경 색을 정의한다. background-image : 배경 이미지를 정의한다. background-repeat : 배경 이미지의 반복 방법을 정의한다 background-position : 배경 이미지의 초기 위치를 정의 background-size : 배경 이미지의 크기를 정의 1. background-color background-color 속성의 속성값 지정 방법은 color 속성의 속성값 지정방법과 똑같다. 색상 네임으로 색상을 정의할 수도 있고 RGB 색상 코드, 16진수 헥사..

box-sizing box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 정의한다. box-sizing 속성값 속성값으로는 content-box와 border-box 두 가지가 있다. 1. content-box 기본값(디폴트)이며 콘텐츠 영역만 너비와 높이에 포함한다. 요소의 실제 너비(actual width of element)= 콘텐츠의 width + padding + border 요소의 실제 높이(actual height of element)= 콘텐츠의 height + padding + border (1) 아래 div1과 div2는 컨텐츠 크기가 똑같다. 다만 패딩의 크기가 다를 뿐이다. (2) div1의 경우 컨텐츠의 크기는 300*100픽셀이고 실제 크기는 320*120픽셀이다. 실제..

1. margin, padding 하위 속성 margin과 padding에 top, right, bottom, left 등을 붙여 하위 속성을 만들 수 있다. 이것은 마진과 패딩에 동일한 방법으로 적용된다. 1) margin의 하위 속성 margin-top margin-right margin-bottom margin-left 아래 (그림 1)처럼 위, 우측, 아래, 좌측에 속성값을 주고 구글 크롬 개발자 도구로 출력하면 그 아래 (그림 2)와 같다. 아래 (그림 2)를 보면 패딩이 상, 우, 하, 좌측의 패딩이 20픽셀, 30픽셀, 40픽셀, 50픽셀로 지정되었다. 2) padding의 하위 속성 padding-top padding-right padding-bottom padding-left paddin..