korin

선택자(Selector) 선택을 해주는 요소 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있다, HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택 가능 Hello World 아이디 선택자 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. # 사용 Hello World> 클래스(class) 선택자 특정 집단(class) 의 여러 요소를 한 번에 선택할 때 사용한다. Hello World Hello> 그룹(group) 선택자 여러 선택자를 같이 사용할 때 사용한다. 여러 선택자를 쉼표(,)로 구분하여 연결한다. 전체 선택자 요소 내부의 모든 요소를 선택한다. 일치 선택자(Basic Combinator) A와B를 동시에 만족하는 요소 선택 #AB { ma..

Position HTML 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. Position 속성은 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용된다. static(기본) : viewport의 순서대로 박스를 연결 relative : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로 현재 박스 위치 지정 (상대위치) absolute : 특정 HTML요소를 기본위치로 잡고 그 위치를 기준으로 현재박스 위치를 지정 (절대위치) --> 상위태그 위치를 기준으로 지정(상위태그가 없다면 상단좌측 고정) fixed : 뷰포트(viewport)를 기준으로 위치를 설정 Relative 요소를 일반적인 문서 흐름에 따라 배치한다. 요소 자기 자신의 원래 위..

Flexbox - 설정하고 싶은 요소들이 들어있는 박스 태그에 display :flex; 를 선언한다. .flex { display: flex; } - flexbox는 기본축과 반대축으로 이루어져있다. - 기본적으로 기본축은 가로줄, 반대축은 세로줄이다 (속성을 이용해 바꿀 수 있다.) 기본 축 방향 설정 - flex-direction flex-direction : row (기본값) 왼쪽에서 오른쪽으로 정렬 flex-direction : row-reverse 오른쪽에서 왼쪽으로 정렬 flex-direction : column 위에서 아래로 정렬 flex-direction : column-reverse 아래에서 위로 정렬 줄 바꿈 설정 - flex-wrap flex-wrap : nowrap(기본값) 한 줄..