나디아 성장 일기

📌 vertical-align: 부모 요소의 baseline을 기준으로 inline 상자를 정렬하는 속성 inline, inline-block, 테이블 셀 요소에만 적용text-align => block 요소가 갖는 속성 top: 요소의 baseline을 부모 요소의 top 부분에 맞춤bottom: 요소의 baseline을 부모 요소의 bottom 부분에 맞춤middle: 요소의 baseline을 부모 요소의 중앙에 위치See the Pen vertical-align by nadia kwon (@nadia-kwon) on CodePen. baseline: 요소의 baseline을 부모 요소의 baseline에 맞춤 (기본값)text-top: 요소의 top 부분을 부모 요소의 top에 맞춤text-bo..

📌 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: 소문자 크기의 대문자- 대문자는..

Font Awesome : 웹에서 아이콘이 필요할 때 사용하는 라이브러리 Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com    1. html 파일의 태그 안에 태그로 CDN 서비스의 URL 지정버전마다 다름    2. Font Awesome에서 사용할 아이콘의 코드 복사, 붙여넣기오른쪽 상단 코드 모양 => 코드 복사 오른쪽 상단 다운로드 모양 => SVG 파일로 다운로드 태그 변경 가능 (ex. 등)   * 아이콘 제어하기 아이콘 코드에 class ..

📌 @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)..

[ its mime type ('text/html') is not a supported stylesheet mime type, and strict mime checking is enabled. ]   📌 현상 html 파일을 css 파일과 연결하고 css 파일엔 import로 다른 css를 불러오도록 연결했는데css 파일이 전혀 적용되지 않았다.   📌 원인css 파일 경로가 제대로 지정되지 않아서 발생한 에러였다.    👉 해결html 파일에서 css 파일 경로를 수정하여 제대로 연결했다.절대 경로로 설정하려니까 안돼서 결국 상대 경로로 지정했다.   참고  Stylesheet not loaded because of MIME typeI'm working on a website that uses G..

📌 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..