Frontend/CSS (5) 썸네일형 리스트형 [CSS] flexbox flexbox란? 박스 내 요소 공간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다. flexbox를 flex 컨테이너라고도 한다.(요소들을 포함하기 때문) flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 한다. flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있다. flex-direction 속성 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다. - row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일 - row-reverse : 주축은 행이고 방향.. [CSS] 배치 - display, position, float 박스의 유형 제어 1) display : block - 블록 박스 항상 새 라인에서 시작 / 블록 박스 내에만 배치 / 옆에 다른 요소 배치 불가능 / width와 height로 크기 조절 / padding, border, margin 조절 가능 2) display : inline - 인라인 박스 새 라인에서 시작 못함. 라인 안(inline)에 있음. / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가능 / width와 height로 크기 조절 불가능 / margin-top, margin-bottom 조절 불가능 3) display : inline-block - 인라인 블록 박스 (inline 속성) 새 라인에서 시작 못함. 라인 안에 있음 / 모든 박스 내 배치 가능 / 옆에 다른 요소 배치 가.. [CSS] 박스 모델 구성 속성 - padding, border, margin CSS의 박스 모델 각 HTML 태그 요소를 하나의 박스로 다룬다. 예) DIVDIVDIV → div 영역의 박스 구성이 보이지 않지만, 사실 박스로 구성되어 있음 박스 모델을 구성하는 프로퍼티 박스 모델의 색, 테두리, 단축프로퍼티 border : 3px dotted blue; * 테두리 종류 둥근 모서리 테두리 만들기 : border-radius 배경 다루기 background-color background-image background-position background-position : center center; /* 박스 중간에 이미지 출력 */ background-repeat background-repeat : repeat-y; /* 위에서 아래로 이미지 반복 출력 */ [CSS] 텍스트 꾸미기 속성, 폰트 제어 속성 텍스트 꾸미기 속성 들여쓰기 (text-indent) text-indent : | ; 정렬 (text-align) text-align : left | right | center | justify; 텍스트 꾸미기 (text-decoration) text-decoration : none | underline | overline | line-through; ex) text-decoration 프로퍼티로 하이퍼링크에 밑줄 제거 네이버 ex) 3글자 들여쓰기 text-indent : 3em; 폰트 제어 속성 폰트 종류 (font-family) font-family : Arial, "Times New Roman", Serif; 폰트 이름에 공백이 낀 경우 " "로 묶어야 함 Arial 폰트가 없는 경우 "Times.. [CSS] 선택자(selector) 정리 선택자란? 어떤 요소에 스타일을 정의할 것인지에 대한 정보 기본 선택자 1. 전체 선택자 : 모든 요소 선택한다. *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다. * { color:blue; } → 문서 내 모든 요소의 글자 색을 파란색으로 정한다! 2. 태그 선택자 (유형 선택자) : 주어진 이름을 가진 요소를 선택한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다. p { color:blue; } → 문서 내 모든 p태그 요소의 글자 색을 파란색으로 정한다! 3. 클래스 선택자 : 주어진 class 속성값을 가진 요소를 선택한다. 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다. .text { color:blue; } → 문서.. 이전 1 다음
