나디아 성장 일기

📌 text-transform: 대소문자로 바꾸는 CSS 속성capitalize : 단어의 첫번째 글자를 대문자로 바꿈uppercase : 모든 글자를 대문자로 바꿈lowercase : 모든 글자를 소문자로 바꿈initial : 기본값으로 설정inherit : 부모 요소의 속성값을 상속 받음none : 입력된 그대로 출력#info { display: flex; justify-content: space-between; font-size: 10px; font-weight: 600; text-transform: uppercase;}   📌 font-variant: 대소문자에 대한 글꼴 설정normal: 보통 글꼴로 지정- 기본값small-caps: 소문자 크기의 대문자- 대문자는..

📌 @media : 기기 유형에 따라 화면 크기와 특성이 달라 스타일을 다르게 적용하기 위해 사용하는 속성 특정 미디어 유형과 조건을 지정하고, 해당 조건이 충족될 때 적용할 스타일을 지정한다.사용자가 글씨 크기를 조절할 수 있기 때문에 rem 단위를 사용하는 것이 좋다.@media에서 정의되지 않은 크기에선 일반 코드가 적용된다.중첩 패턴 가능- 헷갈려서 CSS에서는 잘 사용하진 않음- 다른 조건부 @규칙 내부에 중첩 가능(@supports 조건 내부에서도 @media 중첩할 수 있음)/* 미디어 쿼리 중첩*/body { background-color: yellow; /* 320px 이상 640px 이하 - 모바일 */ @media (min-width: 320px) and (max-width..

📌 :focus : 사용자가 요소를 클릭하거나 키보드 Tab 키로 선택했을 때 현재 요소를 포커스하는 속성 스타일을 추가하면 화면에 표시되기 때문에 :focus의 outline을 지우기도 한다=> 반드시 대체제인 focus-visible을 같이 사용해야 한다.:focus { outline: none;}   📌 :focus-visible : 사용자가 키보드를 사용하여 요소에 포커스를 주었을 때, 해당 요소가 실제로 포커스를 받고 있는지를 나타내는 속성마우스로 클릭 시에는 보이지 않음 (키보드를 사용하여 포커스가 주어진 경우에만 적용)=> 접근성 측면에서 사용자 경험을 개선하는 데 도움border는 사용 X, outline을 사용 Oborder는 상자 크기에 영향을 줌 ⭕outline은 상자 크기에..

📌 border: 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리  🔺 border-style: 테두리 선 모양dotted : 점선 dashed : 약간 긴 점선 solid : 실선 double : 이중 실선groove : 3차원인 입체적인 선, border-color 속성값에 영향 ⭕ridge : 3차원인 능선효과가 있는 선, border-color 속성값에 영향 ⭕inset : 3차원인 내지로 끼운 선, border-color 속성값에 영향 ⭕outset : 3차원인 외지로 끼운 선, border-color 속성값에 영향 ⭕none : 테두리 ❌hidden : 테두리가 존재하기는 하지만 표현되지는 않음   🔺 border-width: 테두리 두께단위로 설정(px, em,cm)..

📌 z-index : 요소의 쌓이는 순서 지정 의 static 외의 다른 값인 요소에서 사용 (Flex에서도 가능)화면에 떠있는 개체만 조절 가능 (Nomal Flow에선 불가능) 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.See the Pen z-index by nadia kwon (@nadia-kwon) on CodePen.  참고  z-index - CSS: Cascading Style Sheets | MDNCSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.developer.mozilla.org

📌 line-height : 텍스트 라인의 높이(텍스트 간의 간격)를 결정하는 속성 line-height가 작을수록 텍스트 요소들은 서로 더 가깝게 배치된다.line-height가 클수록 텍스트 요소들은 더 멀리 떨어져서 배치된다.값은 보통 단위를 빼고 사용 => 보통 1.2에서 1.5 사이의 값(1.2배, 1.5배)을 사용한다.절대 단위나 상대 단위를 사용해도 괜찮긴 함  * 텍스트의 line-height 값은 텍스트 요소의 글꼴 크기에 따라 상대적으로 조절된다.p { font-size: 16px; /* 텍스트의 글꼴 크기를 16px로 설정 */ line-height: 1.5; /* 텍스트 라인의 높이를 글꼴 크기의 1.5배로 설정 */}  See the Pen Untitled by nadia ..

📌 animation : 요소에 애니메이션 동작을 지정    1. animation 정의하기 @keyframes : 애니메이션 과정의 중간 절차를 제어할 수 있는 속성글자 크기 변화: font-size 상자 이동 효과: position / margin / translate / padding@keyframes 변수명 { from(0%) { ... } to(100%) { ... }} @keyframes moveEffect { 0% { font-size: 12px; } 100% { font-size: 24px; }}   2. animation 사용하기 필수값 animation-name: 애니메이션 이름 animation-duration: 애니메이션 지속 시간 .vi..

📌 linear-gradient(): 수직 그라데이션보통 background(background-image)에서 많이 사용 linear-gradient(각도(방향), 색상1 (색상 정도), 색상2 (색상 정도)...);그라데이션 방향: to top(0deg), to bottom(180deg), to left(270deg), to right(90deg) See the Pen linear by nadia kwon (@nadia-kwon) on CodePen.  * 이미지와 함께 사용 시 이미지(url)를 먼저 선언해야 한다.background: url(), linear-gradient(); 순으로 선언/* 이미지 위에 45도 각도로 그라데이션 설정 */background-image: url(../imag..

📌 clip-path : 요소를 잘라낼(cliping) 영역을 정의한다.구형 브라우저는 clip 인식, 신형 브라우저는 clip-path 인식 clip은 사용을 권장하지 않는 속성 nonemargin-box / border-box / padding-box / content-box: 박스만큼 잘라내는 속성circle(): 원circle( at );clip-path: circle(50px at 50% 50%);  ellipse(): 타원ellipse(수평 각도 XY at 수직 각도 XY);clip-path: ellipse(100px 100px at 10% 10%);  triangle(): 삼각형triangle(좌측 상단 XY, 우측 상단 XY, 하단 XY);clip-path: triangle(10% 10%..

📌 transform: 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있다.  rotate(): 요소를 회전시킨다.  rotate( angle )rotateX( angle )rotateY( angle )angle에는 각의 크기를 입력단위는 deg, rad, grad, turn 등을 사용turn은 1회전, 즉 360deg를 의미.box:hover { transform: rotateX( 180deg );}   translate(): 요소를 이동시킨다.  translateX ( ): 오른쪽으로 이동길이 단위를 음수로 지정하면 왼쪽으로 이동translateY ( ): 아래쪽으로 이동길이 단위를 음수로 지정하면 위쪽으로 이동translate( 50px, 50% )오른쪽, 아래쪽으로 이동.box:..