Mo's Develog

꾸밈을 담당하는 css에서 색깔은 중요한 요소 중 하나일 것이다. css에서 색을 사용하는 방법은 몇 가지로 나눌 수 있는데 하나씩 간단하게 살펴보자. 1) 기존에 내장된 색을 사용하기 ▲ 우리가 가장 쉽게 접근하는 내장된 색을 쓰는 것이다. 종류는 스크롤을 내리면 정말 많이 있는 것을 볼 수 있다. 하지만 우리가 원하는 색깔이 위와 같이 naming되어 저장되어 있지 않다면 어떻게 해야할까? 2) 16진수 컬러(hexadecimal color) ▲ 디자이너 분들이 쓸만한(?) 위와 같은 형태로 색을 정의하는 것을 16진수 컬러라고 한다. 3) RGB ▲ 위와 같이 색의 삼원색을 나타내는 RGB(Red, Green, Blue)를 조합해서 색을 만드는 방법이다. 우리가 직접 값을 넣어서 조절 할 수 있다...

이번 포스팅에서는 Pseudo Selector중에서 중요한 State(상태)들을 몇가지 알아보자. 1) active ▲ 먼저 버튼을 하나 만들자. 그리고 아래와 같은 코드를 사용해보자 ▲ Pseudo Selector를 이용해서 button: 라고 한 뒤에 active기능을 사용해보자. 결과는 아래와 같다. ▲ 마우스 커서가 보이지 않지만 지금 내가 버튼위에서 마우스로 클릭'중'인 상태이다. 즉 마우스 왼쪽버튼으로 Hello라는 버튼을 누르고 있는 상태인 것이다. 아직 마우스 왼쪽버튼을 놓지 않은 상태 즉, 버튼이 활성화 된 상태 즉, active된 상태에서 원하는 효과를 주는 것이 Pseudo Selector 'active'의 기능이다.' 2) hover ▲ hover 기능을 사용해보자. 결과는 아래와 ..

Attribute Selector(특성 선택자)는 말 그대로 '어떤 코드가 가지고 있는 특성을 선택하는 도구'이다. 바로 예제를 보면서 알아보자. ▲ 사용자의 입력을 받을 수 있는 input을 만들었다. 이제 각각의 input에 어떤 효과를 주고 싶다면 어떻게 해야할까? 일반적으로 쓰는 Class를 지정해서 해야겠다라고 생각이 먼저들 수 있다. 하지만 class를 사용하지 않고 CSS만으로도 각각의 코드에 원하는 효과를 줄 수 있다. 이때 사용하는 것이 바로 Attribute Selector이다. ▲ 위 코드를 말로 풀어보자면 'input타입의 tag중에 required을 가지고 있는 녀석에게 다음과 같은 효과를 주고 싶어' 즉 여기서 대괄호는 Attribute Selector로 사용이 되며 대괄호 안에..

▲ div안에 span과 p를, 그리고 p안에 다시 한번 span을 넣었다. 출력결과는 아래와 같다. 1) 부모와 자식의 관계 만약 우리가 p안에 있는 span에만 background-color를 다른색으로 주고 싶다면 어떻게 해야할까? ▲ 위와 같은 형태의 코드를 사용하면 p안에 있는 span에만 적용되는 스타일을 사용할 수 있다. 위에서 p는 부모selector이고 이어지는 span은 자식selector이다. ▲ 마우스를 가져다대면 어떤 형태인지 보여준다. 보다시피 p안에 들어있는 span이라는 것을 볼 수 있다. 결과는 아래와 같다. 2) 부모와 직속(Direct) 자식의 관계 그렇다면 p안의 span이 아니라 div안에있는 span 즉, p에서 독립되어 있지만 div에는 소속되어 있는 span에만..

Pseudo Selectors는 element를 좀 더 세부적으로 선택하게 해주는 기능이다. 예제를 보면 훨씬 이해가 잘 될 것이다. ▲ 우선 span을 몇개 만들었고 배경은 초록색으로 만들었다. 아래와 같이. 이제 여기서 나는 맨 마지막 span을 다른 색으로 하고 싶다. 이럴 때 쓸 수 있는 것이 바로 pseudo selector이다. ▲ pseudo selector를 사용하기 위해서는 data type 에다 중괄호가 아닌 콜론( : )을 써야한다. ▲ 콜론 뒤에는 많은 옵션들을 사용할 수 있다. 우리는 이중에서 마지막 span을 지정할 것이기 때문에 last-child라는 옵션을 선택했다. 출력결과는 아래와 같다. ▲ span들 중 마지막 span을 가리켜 지정할 수 있다. 다른 예시1) 결과) ▲..

Relative와 Absolute는 직접 코드를 통해서 이해해보자. 백문이불여일견이니까 ▲ 크기가 300px인 div안에 크기가 100px인 초록색 div를 생성했다. 결과는 아래와 같다. - position : relative ▲ 녹색 div에 postion : relative를 사용하면 top, bottom, right, left의 기능을 사용하여 움직일 때 최초에 위치했던 위치를 기준으로 움직일 수 있게 된다. 이것이 postion : relative를 단독으로 사용했을 때의 기능이다. 출력결과는 아래와 같다. ▲ 최초의 위치를 기준으로 움직인 것을 볼 수 있다. -- position : absolute ▲ 이번에는 absolute를 사용해보자. 결과는 아래와 같다. ▲ relative일 때는 분명..

position : fixed, 어디에선가 다들 한번쯤은 본 기능이다. 화면의 스크롤을 내리거나 올려도 나를 계속 따라다니는 기능. 그것이 바로 postion fixed이다. ▲ 화면스크롤을 위해 body에 height를 1000vh로 주고 id=two의 div에 position: fixed를 줬다. 결과는 아래와 같다. ▲ 두 div가 하나의 layer(층)에 있는 모습을 볼 수 있다. 여기서 스크롤을 내리면 아래와 같은 모습을 볼 수 있다. ▲ 초록색 div는 처음위치에 고정이 되어 있고 살구색 divs는 스크롤 내려도 화면과 함께 움직이면서 고정되어 있는 모습을 볼 수 있다. 만약 여기서 postion : fixed가 되어있는 div에 top,left,right,bottom중 하나의 값만 줘도 서로..

Flexbox에는 justify-content나 align-items 말고도 몇 가지의 속성이 더 있다. Main axis와 Cross axis의 위치를 서로 바꾸고 싶을 때 사용하는 'flex-direction' https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction (flex-direction 설명) 화면의 크기에 따라 box들이 겹치지 않게 사용하고 싶을 때 사용하는 'flex-wrap' https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap(flex-wrap 설명) 더 다양한 flex 기술들이 있겠지만 초심자인 나 같은 사람은 Flexbox part1,2의 내용을 기초로 하여 지식을 늘려가자.

Flexbox는 CSS에서 정~말 필수적으로 알아야 할 개념이다. Flexbox를 사용할 때 지켜야할 규칙들이 몇가지 있는데 정말 중요하다. 만약 자식(Children) element를 움직이게 하고 싶다면 부모(Parents) element에 말해야 한다는 것이다. 자식 element에는 어떤 것도 말하면 안된다. '무슨 소리야?'라는 생각이 들 수 있으니 바~로 예시로 보도록 하자. ▲ 위처럼 박스 3개를 만들어 주겠다. ▼ 결과값은 당연히 아래와 같다. ▲ 하나의 덩어리로 보이겠지만 3개의 box가 존재하고 있는 중이다. 앞선 다른 포스팅에서도 말했듯이 box는 block 속성을 가지고 있어서 자신의 주변에 다른 누가 오는 것을 허용하지 않기에 아래로 3개의 box가 붙은 형태가 되었다. 자 이제,..

▼아래처럼 입력해서 ▼아래와 같이 출력했다. 여기서 나는 짝수번째 의 색을 다른 색으로 하고 싶을때는 어떻게 해야할까? 앞선 다른 포스팅에서 사용한 고유한 값인 id를 사용해보자 ▼ 아래처럼 두번째, 네번째, 여섯번째 에 각각 다른 id를 부여하고, 또 각각의 id에 style값을 지정하면 된다. 또는 ▼ 아래처럼 모아서 입력할 수도 있을 것이다. ▼ 그러면 아래처럼 출력될 것이다. 하지만 만약 이런 코드가 1억개가 있다고 생각한다면 코드가 너무 지저분해지고 클린하지 못할 것이다. 따라서 이럴때는 요소를 가리킬 수 있으면서도 겹쳐도 되는 방법이 있으면 훨씬 좋을 것이다. 이럴 때 사용하면 좋은 것이 바로 'class'이다! class는 유일할 필요가 없고 여려 요소에서 사용할 수 있고 많은 곳에서 원하는..