내가 알아가는 내용을 같이 공유하는 공간

안녕하세요. 오늘은 CSS Transform / Transition / Animation에 대해 알아볼게요. Transform(변형) 변형은 특정 요소의 크기나 형태 등 스타일이 바뀌는 것이에요. 변형의 종류는 총 두 가지 2차원 변형과 3차원 변형이에요. 2차원 변형 2차원 변형은 x축과 y축을 사용해 요소를 변형하여 수평이나 수직으로 웹 요소를 변형해요. 크기나 각도만 지정할 수 있어요. 아래는 2차원 변형 종류예요. 3차원 변형 3차원 변형은 x축, y축 원근감을 추가하고, z 축은 앞뒤로 이동해서 사용자 방향으로 이동할수록 값이 더 커질 수 있어요. 아래는 3차원 변형 종류예요. Transition(트랜지션) 트랜지션은 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것이에요...

안녕하세요. 오늘은 CSS Grid에 대해 알아볼게요. CSS GridGrid는 웹 페이지에서 2차원 레이아웃(행, 열 모두)을 쉽게 설계할 수 있는 CSS 레이아웃 시스템이에요. Grid는 컨테이너(container)와 아이템(item)으로 구성돼요. 컨테이너와 아이템이 나오니 딱 생각하는 레이아웃이 있는데요. 바로 Flex box에요. 이 두 레이아웃의 차이점은 Flex box는 1차원(행 or 열)이지만 Grid는 2차원으로 행 열 모두 다루는 레이아웃이랍니다. 다음은 기본 구조 예시와 Grid 단위 표예요..container { display: grid; /* Grid 활성화 */ grid-template-columns: 100px 200px 1fr; /* 열 정의 */ grid-templ..

안녕하세요. 오늘은 CSS Flexbox에 대해 알아볼게요. CSS Flexbox CSS의 Flexbox(Flexible Box Layout)는 웹 페이지에서 요소들을 쉽고 깔끔하게 정렬하고 배치하기 위한 레이아웃 시스템이에요. 특히 가로 또는 세로 방향으로 정렬, 요소 간 간격 조절, 가운데 정렬, 화면 크기에 따라 자동 정렬 등을 손쉽게 할 수 있어요. Flexbox 기본 개념 Flexbox는 부모(Container)와 자식(Item)의 관계로 동작해요.html 1 2 3css.container { display: flex; /* Flexbox 활성화 */}.container → Flex 컨테이너.item → Flex 아이템 그리고 Flexbox에는 두 가지 축이 있어요.Main A..

안녕하세요. 오늘은 배경색과 배경범위를 지정하는 background에 대해 알아볼게요. CSS background 웹 문서의 전체 배경뿐만 아니라 텍스트, 목록 등 특정한 요소에도 배경 지정이 가능해요. background-color 속성 배경색 지정으로 16진수 or rgb값 또는 색상 이름 사용으로 세밀한 조절(16진수)과 투명도 조절(rgba)을 할 수 있어요./*기본형*/background-color: #000000;background-color: rgb(0, 128, 0);background-color: green;background-color는 상속되지않고 기본적으로 웹 문서 요소의 배경색은 투명이에요. ( ≠ 글꼴, 글자 크기는 하위 요소에서 스타일을 수정하지 않는 한 상속) ba..

안녕하세요. 오늘은 CSS Layout (display / float / clear)에 알아볼게요. display 속성 배치 방법 결정으로 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용이 가능해요. 그리고 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치 시 이미지를 표 형태로 배치 가능해요. 종류설명block인라인 레벨 요소를 블록 레벨 요소로 전환inline블록 레벨 요소를 인라인 레벨 요소로 전환inline-block인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 / 마진과 패딩 지정 가능none해당 요소를 화면에 표시하지 않는 속성 다음은 display 속성예제 (수평 내비게이션)이에요. menu 1 menu 2 me..

안녕하세요. 오늘은 CSS margin & padding에 알아볼게요. margin & padding 설명하게 앞서서 margin과 padding의 뜻을 알아볼게요. margin(마진)은 두 박스 모델 사이에 여백을 뜻하고, padding(패딩)은 한 박스 모델에서 테두리와 내용 사이의 여백을 뜻해요. margin 속성 margin은 요소 주변의 여백을 설정함으로 요소와 요소 사이의 간격을 조정할 수 있어요. 4 가지 방향에 한 번에 똑같이 지정이 가능하거나 특정 방향 지정이 가능해요. [예: margin - (하이픈) top, right, bottom, left]/*기본형*/margin: | | auto 너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정margin: 50px박스..

안녕하세요. 오늘은 CSS border에 알아볼게요. CSS border border는 박스의 테두리를 뜻해요. 박스모델은 테두리나 마진, 패딩 등 지정할 때 상 하 좌 우 4개의 방향을 똑같이 지정하거나 모두 다르게 지정이 가능해요. border-style 속성 border-style속성의 기본값은 none으로 속성값을 따로 지정하지 않으면 테두리 색상, 두께를 지정하더라고 화면에 표시가 안돼요. 다음은 border-style에 대한 종류와 예제예요. none테두리❌ : 기본값hidden테두리 감추기 표에서 border-collapse: collapse일 경우 다른 테두리도 표시❌solid테두리를 실선으로 표시dotted테두리를 점선으로 표시dashed테두리를 짧은 직선으로 표시double테두리..

안녕하세요. 오늘은 CSS Selectors의 마지막 고급 선택자인 가상 클래스와 가상 요소에 대해 알아볼게요. 가상 클래스 가상 클래스는 특정 상태의 HTML 요소에 스타일 적용하기 위해 사용해요. 그리고 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분해요. 1. 사용자의 동작에 반응하는 가상 클래스 선택자:link- 방문하지 않은 링크에 스타일 적용:visited- 방문한 링크에 스타일 적용:active- 웹 요소를 활성화했을 때의 스타일 적용- 사용자가 요소를 클릭하고 있는 동안 적용:hover- 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용- 요소 위로 마우스를 올렸을 때:foucs- 요소가 포커스를 받을 때(초점이 맞추어졌을 때) 스타일 적용사용자 동작에 반응하는 가상 클래스의 순..

안녕하세요. 오늘을 CSS의 선택자(Selectors) 두 번째 시간으로 이번에는 CSS 고급 선택자인 연결 선택자와 속성 선택자에 알아볼게요. 연결 선택자 연결 선택자는 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자로 특정 패턴에 따라 요소들 간의 관계를 기반으로 스타일을 적용시켜요. 연결 선택자 종류 1. 자손 선택자 자손 선택자(하위 선택자)는 부모 요소에 포함된 '모든 하위 요소'에 적용이 돼요. 선택자 A와 B 사이에 공백을 두어 사용을 하고, div 요소 내의 모든 p요소에 스타일을 적용시켜요. A B { /* 여기에 스타일을 작성하세요 */} 2. 자식 선택자 자식 선택자는 자식 요소에 스타일을 적용하는 선택자로 A의 직접적인 자식인 B요소에게만 적용이 돼요. A > B {..

안녕하세요. 오늘은 CSS의 선택자(Selectors)에 알아볼게요. CSS Selectors 스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용이 가능하기 때문에 선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 기능이에요. 선택자의 종류 전체 선택자 (universal selector) 전체 선택자는 스타일을 문서의 모든 요소에 적용할 때 사용해요. 주로 하위 요소에 스타일을 한꺼번에 적용할 때 사용하고, 별표(*)를 사용해요. /*기본형*/* { 속성: 값; ... }+) 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이 여백을 두는 속성은 마진(margin) / 패딩(padding) 이 있어요.* { margin: 0;} 타입 선..