choco's story

특성 선택자특성 선택자의 특징특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택합니다.ex) 클래스 속성을 가진 요소 선택하기[class]{ background-color: tomato;}ex) 클래스가 "item"인 요소 선택하기[class="item"]{ background-color: tomato;}특성 선택자의 값 확인특성 선택자는 기호를 추가하여 요소를 선택하는 방식을 다양하게 만들 수 있습니다.ex) 클래스 값에 "it"가 포함되는 요소 선택[class *= "it"]{ color: white; }ex) 클래스 값이 "it"로 시작하는 요소 선택[class ^= "it"]{ color: white; }ex) 클래스 값이 "it"로 끝나는 요소 선택[class ..

flexbox 관련 속성flexbox는 아래와 같은 속성들을 함께 사용할 수 있습니다.주축 배치 : justify-content교차축 배치 : align-items교차축 개별 요소 배치 : align-self줄바꿈 여부 : flex-wrap하나씩 살펴보도록 하겠습니다.flexbox의 justify-contentjustify-content 란?: flex 컨테이너 내에서 요소들이 배치되는 주축(main-axis)을 기준으로 어떻게 정렬할지를 지정해 주는 속성flex-direction을 통해 주축(main-axis)으로 배치되는 요소들을 어떻게 정렬할지 따로 또 세부적으로 설정하는 속성이 justify-content 입니다.justify-content는 아래와 같은 5개의 속성값을 가집니다.flex-star..

flexboxflexbox 란?박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델여기서 flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원만 다루기 때문입니다.즉 한 번에 행, 또는 열 하나만 다룹니다. (동시에 X)flexbox 만들기flexbox는 flex 컨테이너라고도 불립니다. (= 요소들을 포함)flexbox를 만들기 위해선, 컨테이너가 되는 요소에 display: flex;를 적용하면 됩니다.ex)flexbox 적용 전... 요소1 요소2 요소3 flexbox 적용 후 요소1 요소2 요소3 각 요소가 개별로 취급되어 위에서부터 하나씩 쌓이던 것을 di..

positionposition 이란?: 요소의 위치 지정 방식을 설정하는 속성position이 요소의 위치를 어떻게 배치할 지 먼저 방법을 정합니다.그리고 그 다음 top, bottom, right, left가 각각의 값을 통해 세부적으로 요소의 위치를 조절하여 결정합니다.position : 요소의 배치 방식top : 위에서부터 얼만큼 떨어뜨릴지 값 지정right : 오른쪽에서부터 얼만큼 떨어뜨릴지 값 지정bottom : 아래에서부터 얼만큼 떨어뜨릴지 값 지정left : 왼쪽에서부터 얼만큼 떨어뜨릴지 값 지정position의 배치 방식에는 다음과 같은 키워드들이 있습니다. 속성값 의미 static 기본값, 요소를 일반적인 문서 흐름에 따..