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

안녕하세요. 오늘은 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 position에 알아볼게요. positionposition 속성을 사용하면 웹 문서에서 요소의 위치를 지정해요. position 속성 배치 방법을 지정을 해서 웹 문서 안의 요소를 배치해요. 텍스트나 이미지를 나란히 배치하거나 원하는 위치 선택이 가능해요.;" style="width: ;height: ;">종류설명;" style="width: ;height: ;">static문서의 흐름에 맞춰 배치 : 기본값;" style="width: ;height: ;">relativestatic + 위칫값 지정;" style="width: ;height: ;">absoluterelative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치;" style="width: ;heig..

안녕하세요. 오늘은 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 Box-Model에 알아볼게요. CSS Box-Model 웹 문서에서 내용 배치 시 각 요소를 박스 형태로 구성해요. 각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성할 수 있어요. 블록 레벨 요소 & 인라인 레벨 요소 블록레벨(Block-level) 요소는 태그를 사용해 요소 삽입 시 혼자 한 줄을 차지하는 것으로 해당 요소의 너비가 100%라 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수가 없어요. ex - , , 아래는 블록 레벨 요소 예제예요. 롯데 자이언츠 2023 프로야구 정규시즌우승팀은 롯데 자이언츠 인라인 레벨 (inline-level) 요소는 태그를 사용해 요소 삽입 시 해당 콘텐츠만큼 영역을 차..

안녕하세요. 오늘은 CSS의 값과 단위인 Values와 Units에 알아볼게요. CSS Values & Units 들어가기 앞서서 CSS 기본 속성(properties)과 값(values)에 대해 먼저 짚고 넘어갈게요. 속성은 변경하고자 하는 스타일의 종류를 지정해줘요. 예시를 들자면 텍스트의 색상, 텍스트의 크기, 여백, 배경 색상이 있어요. ex - (color, font-size, margin, background-color ) 그리고 CSS 규칙 내에서 선언되고, 콜론(:) 뒤에 해당 속성에 적용할 값을 지정해요. 값은 속성에 할당되어, 그 속성이 어떻게 적용될지를 구체적으로 명시함으로써 속성이 실제로 어떤 스타일을 나타낼지를 결정해요. ex - (red, 12px, 20%, #22ff2..