본문 바로가기

CSS

(14)
CSS -12 - transformCSS transform의 정의transform은 단어 뜻 그대로 요소의 모양, 크기, 위치, 회전을 시각적으로 변경할 때 사용하는 속성입니다.이 속성의 가장 큰 특징은 요소가 페이지의 일반적인 흐름(레이아웃)을 방해하지 않으면서 시각적으로만 변화를 준다는 점입니다.따라서 다른 주변 요소들에 영향을 주지 않고도 자유롭게 변형할 수 있어 애니메이션 구현에 매우 효율적입니다. transform의 중요 함수 (Functions)transform 속성 뒤에는 다양한 함수를 붙여 어떤 변형을 줄지 결정합니다.translate(x, y): 요소를 현재 위치에서 지정한 거리만큼 이동시킵니다.scale(x, y): 요소를 지정한 배수만큼 확대 또는 축소합니다. (1보다 크면 확대, 작으면 축소)ro..
폰트 레퍼런스 소개 - 애플메인 폰트 (영문 / 숫자) - SF PRO메인 폰트 (국문) - Apple SD 산돌고딕 NeoApple (대한민국) Apple (대한민국)Apple이 제시하는 혁신적인 세상을 만나고, iPhone, iPad, Apple Watch, Mac, Apple TV 등을 구입하는 것은 물론, 액세서리, 엔터테인먼트, 전문가 기기 지원에 대해서도 살펴볼 수 있습니다.www.apple.com - 삼성전자메인 폰트 (영문 / 숫자) - Samsung Sharp Sans메인 폰트 (국문) - SamsungOne Koreanhttps://www.samsung.com/sec/ Samsung 대한민국 | 모바일 | TV | 가전 | IT모바일 | TV | 가전 | ITwww.samsung.com - LG전자메인..
CSS - 11 - 자연수와 정수의 정의와 차이자연수의 정의자연수는 1, 2, 3, 4, ... 처럼 1부터 시작해서 끝없이 이어지는 양의 정수를 말해요. 보통 "셈할 때 쓰는 숫자"라고 생각하면 쉬워요. 즉, 0은 자연수에 포함하지 않고 1부터 시작하는 경우가 많아요. (단, 수학자에 따라 0을 포함시키기도 해요.)정수의 정의정수는 음수, 0, 양수 모두 포함하는 수의 집합이에요. ... -3, -2, -1, 0, 1, 2, 3 ... 이런 식으로 음수와 양수가 모두 포함되죠. 소수나 분수는 포함 안 되어요.차이점자연수는 보통 양수만 포함하지만, 정수는 음수, 0, 양수를 모두 포함해요.자연수는 수를 셀 때 주로 쓰이고, 정수는 음수와 양수를 모두 다뤄야 할 때 쓰여요.표현 상 정수에는 자연수가 모두 포함되지만, 자연..
CSS - 10 - Combination Selector 자손 선택자 (Descendant Selector)특정 요소 내부에 포함된 모든 해당 요소를 선택합니다. 공백( )으로 구분합니다.설명: 부모 안에 있기만 하면 자식이든, 손자든 상관없이 모두 선택합니다.용도: 특정 구역(예: 메뉴바) 안에 있는 모든 링크 스타일을 바꿀 때 유용합니다.CSS /* div 안에 있는 모든 p 태그를 선택 */div p { color: blue;} 자식 선택자 (Child Selector)특정 요소의 직계 자식만 선택합니다. 꺽쇠 기호(>)를 사용합니다.설명: 바로 아래 계층에 있는 요소만 선택하며, 손자나 그 아래 계층은 무시합니다.용도: 구조가 복잡할 때 의도치 않은 하위 요소까지 스타일이 먹히는 것을 방지합니다.CSS /* d..
CSS - 9 - Flexbox정의 (Definition)플렉스박스(Flexbox)는 'Flexible Box'의 줄임말로, 행(Row) 또는 열(Column)을 주축으로 하여 요소를 배치하는 1차원 레이아웃 모델입니다.복잡한 계산 없이도 요소의 크기를 유동적으로 조절하고, 정렬하며, 빈 공간을 배분할 수 있도록 설계된 인터페이스입니다. 특징 및 장점 (Key Features & Advantages)방향의 자유로움: 가로(행) 또는 세로(열) 중 원하는 방향으로 요소를 쉽게 나열할 수 있습니다.유동적인 크기: 컨테이너의 크기에 맞춰 자식 요소들의 너비나 높이를 자동으로 늘리거나 줄일 수 있습니다.간편한 정렬: 과거 float이나 inline-block으로 구현하기 힘들었던 '수직 중앙 정렬'이나 '균등 분할'을 단 한..
CSS - 8 - RWDRWD(Responsive Web Design, 반응형 웹 디자인)란 하나의 웹사이트가 접속하는 기기(PC, 태블릿, 스마트폰 등)의 화면 크기에 반응하여 레이아웃을 자동으로 최적화하는 기술을 말합니다.반응형 웹을 만드는 3가지 핵심 요소반응형 웹은 마법처럼 작동하는 것이 아니라, 세 가지 기술적인 약속을 기반으로 만들어집니다.그리드 시스템 (Fluid Grid): 요소를 배치할 때 px 같은 고정 단위가 아니라 %나 vw 같은 상대 단위를 사용합니다. 덕분에 화면이 넓어지면 넓게, 좁아지면 좁게 비율에 맞춰 늘어납니다.유연한 이미지 (Flexible Images): 이미지의 가로 크기를 최대 100%로 설정하여, 화면이 작아져도 이미지가 화면 밖으로 삐져나가지 않고 부모 요소의 크기에 맞춰 함..
CSS - 7 - CSS Backgrounds property개별 배경 속성들배경을 세밀하게 제어하기 위한 주요 속성들입니다.background-color: 요소의 배경 색상을 지정합니다.background-image: 배경에 넣을 이미지 경로를 url() 함수로 지정합니다.background-repeat: 이미지의 반복 여부를 결정합니다. (repeat, no-repeat, repeat-x, repeat-y)background-position: 이미지의 시작 위치를 설정합니다. (top, center, bottom, left, right 또는 px, %)background-size: 이미지의 크기를 조절합니다.cover: 비율을 유지하며 요소를 꽉 채웁니다. (이미지 일부가 잘릴 수 있음)contain: 비율을 유지..
CSS - 6 - CSS Padding property 이미지 출처https://codingeverybody.kr/css-margin-%EC%86%8D%EC%84%B1/정의 및 특징배경색의 영향: 요소에 배경색(background-color)이 지정되어 있다면, 패딩 영역까지 그 색이 채워집니다.음수 값 불가: 마진(Margin)과 달리 패딩에는 음수 값을 사용할 수 없습니다. 개별 속성과 축약형 (Shorthand)상, 하, 좌, 우 방향을 개별적으로 설정하거나 한 줄로 줄여서 쓸 수 있습니다. 개별 속성padding-top: 위쪽 여백padding-right: 오른쪽 여백padding-bottom: 아래쪽 여백padding-left: 왼쪽 여백 축약형 작성법값을 적는 개수에 따라 시계 방향순으로 적용됩니다.CSS/..
CSS - 5 _ 2 - 리스트 스타일 (list-style)👉 리스트 앞에 붙는 점(●)이나 숫자를 꾸미는 기능✔ list-style-type (모양) 순서 없는 리스트 () disc → ● (기본)circle → ○square → ■none → 없애기순서 있는 리스트 ()decimal → 1, 2, 3ower-alpha → a, b, c upper-roman → I, II, III 👉 비유➡️ “문장 앞에 붙는 번호나 체크표시를 바꾸는 것”✔ list-style-position (위치)outside → 글 밖 (기본)inside → 글 안쪽 (마커가 본문 영역으로 들어옴, 줄 바꿈이 되면 마커 바로 아래까지 글자 채워줌👉 비유➡️ “글 앞에 붙을지, 글 안으로 들어갈지 정하는 느낌”✔ list-style (한 줄로..
CSS - 5 -CSS list-style propertylist-style-type (마커의 모양)목록 아이템 앞에 붙는 마커(불릿이나 숫자)의 종류를 지정합니다.순서 없는 리스트 (): disc(기본 원형), circle(빈 원형), square(사각형), none(제거) 등을 사용합니다.순서 있는 리스트 (): decimal(숫자), lower-alpha(소문자 알파벳), upper-roman(대문자 로마자) 등을 사용합니다. list-style-position (마커의 위치)마커가 목록 아이템의 안쪽(inside)에 위치할지, 바깥쪽(outside)에 위치할지 결정합니다.outside: 마커가 본문 영역 밖에 위치합니다. 글자가 길어져 줄 바꿈이 되어도 마커의 위치는 고정되어 깔끔하게 정렬됩니다. (기본값)i..