CSS (3) 썸네일형 리스트형 CSS flexbox CSS flexbox 1. display 대부분 요소들의 레이아웃 구성은 수직 구성으로 좀 더 간편하게 수평 레이아웃을 구현하기 위해 display 속성을 사용할 수 있습니다. display: flex; block 요소들의 구성을 쉽고 빠르게 수평적으로 구현할 수 있습니다. 2. flex-direction flex container 에서 중요한 개념은 바로 Axis(축)입니다. 어떤 축을 기준으로 정렬할지를 정하는 속성이 바로 flex-direction이다. 기본값은 row이며 column으로 세로로 요소들을 쌓을 수 있습니다. row-reverse, row-column와 같이 작성할 경우 요소들은 배열 순서를 역방향으로 구현 할 수 있습니다. 3. flex-wrap 요소들의 여러 줄 묶음(줄 바꿈을)을.. CSS 속성, 선택자 css 속성 , 선택자 1. class 와 id 스타일을 지정시 사용하는 속성 ★ 생성 규칙 1. 영문자로 작성 2. 첫번째 글자는 숫자가 들어갈 수 없음 3. 특수문자는 "_" , "$" 2가지만 사용 1-1 class 여러 태그들을 그룹으로 묶어 스타일을 지정시 사용하는 속성입니다. 스타일 지정시 .class명으로 작성합니다. 1-2 id 스타일을 지정시 하나의 태그만 지정해서 사용하는 속성입니다. 하나의 문서에서 고유한 id명만 사용이 가능합니다. 스타일 지정시 #id명으로 작성합니다. 2. 선택자 2-1. 전체 선택자 패턴 * 를 사용하여 내부의 모든 요소를 선택하여 스타일을 지정할 수 있습니다. 예시1) * { margin: 0; padding: 0; } 2-2. 태그 선택자 HTML의 기본 요.. HTML & CSS 주요 속성 정리 HTML 주요 태그 1. 기본 태그 : 헤드 : 타이틀 (헤드 안의 속함) : 문서의 본문 - head 와 body 사이에는 아무것도 들어 갈수 없음 ~ : 제목 : 단락 : anchor. 링크를 통해 다른 문서에 연결 : 수평줄 : 줄바꾸기 2. div / span / 아무것도 나타내지 않는 콘텐츠 영역(꾸미는 목적) ● 가로폭을 전부 차지함 (block element) ● 폭과 넓이 지정 가능 ● 박스 형태의 영역으로 설정됨 ● 줄 사이에 끼워 놓는 요소 (inline element) ● 주로 컨텐츠 안에 강조하고 싶은 부분에 사용 ● 크기 설정 불가 ★ 헷갈리는 포인트 1. 여러 개 나열시 div는 자동 줄바꿈이 발생 span은 줄바꿈이 일어나지 않고 가로로 나열 2. 여백 설정(margin) di.. 이전 1 다음
