나디아 성장 일기

📌 position 속성: 요소를 배치하는 방법을 지정한다.top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.  - static: 마크업 순서에 따라 배치 기본값 top/right/bottom/left 속성이 무효가 됨  - relative: 기존의 자기 위치를 기준으로 이동 top/right/bottom/left 속성 사용  - absoulte: 부모 요소(자신의 컨테이닝 블럭 요소)를  기준으로 이동 width 값을 설정하지 않을 시 컨텐츠 크기만큼 작아지면서 뜬다. (= float와 유사) 상위 컨텐츠 중 static이 아닌 요소(relative/absoulte/stick)를 기준으로 삼음=> 일부러 부모 요소에 position을 설정하기도 함 ..

스크린 리더가 읽는 순서 확인하기taba11y taba11yVisualise tab order with easechromewebstore.google.com     기본 마크업 보기Web DeveloperCSS ➡ Disable All Styles Web DeveloperDownload the Web Developer extension for Chrome and Firefox.chrispederick.com     페이지의 제목(heading) 구조 확인하기HeadingsMap HeadingsMapTo show, browse and audit (for accessibility and SEO) the headings structurechromewebstore.google.com

📌 CDN (Content Delivery Network): 전 세계에 분산된 서버 네트워크로 구성되어 사용자에게 빠르고 효율적으로 콘텐츠를 전달하는 시스템 최종 사용자와 가까운 곳에 콘텐츠를 캐시하는 지리적으로 분산된 서버 그룹 서버들은 데이터의 중복 복사본들을 저장하여, 서버가 최종 사용자와 가장 가까운 서버를 기준으로 데이터 요청을 처리한다.  CDN을 사용하면 HTML 페이지, JavaScript 파일, CSS 파일, 이미지, 동영상 등 인터넷 콘텐츠를 로드하는 데 필요한 자산을 빠르게 전송할 수 있다. 장점 👍 웹사이트 로드 시간 개선 대부분의 CDN들은 전 세계에 서버를 가지고 있다. 사용자에게 가까운 CDN 서버를 사용하여 웹사이트 방문자에 가까운 콘텐츠를 제공하므로 페이지 로드 시간이 ..

📌 @at sign 규칙: @(at sign) 기호로 시작하는 CSS 문법 @charset: 문자의 인코딩 방식을 지정한다.- 스타일 시트의 첫 번째 요소로 온다.@import: CSS 엔진에 외부 스타일 시트를 포함하도록 알린다.@namespace: CSS 엔진에 모든 콘텐츠가 XML 네임 스페이스로 시작하는 것이 고려되어야 함을 알린다.@media: 장치가 미디어 쿼리(media query)로 정의된 조건에 만족하면 해당 콘텐츠를 적용한다.- 반응형 웹을 만들 때 사용된다.@document: 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용한다.@page: 문서를 출력할 때 적용되는 레이아웃 변화의 양상을 설명한다.@font-face: 웹 폰트를 적용할 수 있다.@ke..

📌 선택자(Selector)  * : 전체 선택자 (universal selector)* { color: blue;} 태그명 : 해당 태그들만 선택전체 선택자(*)보다 태그명 선택자가 더 셈(중복일 시 태그명 선택자가 실행됨)p { color: blue;}  #id명: 해당 id를 가진 태그 선택중복 불가능 ❌#num { color: blue;}   .class명: 해당 class를 가진 태그 선택중복 가능 ⭕id선택자보다 class가 더 셈(중복일 시 class 선택자가 실행됨).num { color: blue;}   🔺 선택자 그룹핑콤마(,)로 선택자 나열.header, .visual, .main, .slogan, .footer { width: 940px; margin: 0 au..

📌 float과 clear float : 요소가 normal flow에서 벗어나 다음 요소 위에 띄워 이동하는 속성width 값을 주지 않으면 컨텐츠 크기만큼 작아지면서 뜬다. float된 자식 요소는 부모 요소의 높이(height)에 영향을 주지 않는다 (인식 X)부모에도 float가 적용되면 부모의 높이가 인식된다 (= display: flow-root;)float 요소는 기존에 떠있던 float 요소를 뺀 나머지 공간에서 이동한다.auto라는 기능을 인식할 수 없다.  ✨ display: flow-root; : 부모 요소가 자식 요소들을 감싸고 있을 때 자식 요소들이 부모 요소의 높이를 정확하게 반영하지 않는 문제를 해결한다.display: flow-root는 IE에서 지원 Xdisplay: fl..

📌 box-sizing: 요소의 너비와 높이를 계산하는 방법을 지정  - content-box : 요소의 설정된 너비에 + 테두리와 안쪽 여백이 더해진다.기본값(default) width와 height 속성에 콘텐츠 영역만 포함, 안팎 여백과 테두리는 포함하지 않는다.  (ex. box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비(width) = 370px) 요소의 크기: 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이테두리와 안쪽 여백은 식에 포함하지 않는다. - border-box : 테두리와 안쪽 여백을 추가하면 콘텐츠 영역이 줄어든다.width와 height 속성에 안쪽 여백과 테두리는 포함, 바깥 여백은 포함하지 않는다.  안쪽 여백과 테두리가 ..

실무에서 쓰이는 약어  CL (Changelist)코드 변경 단위 버전 관리 시스템(git)에 제출되거나 코드 리뷰 진행중인 독립된 변경 단위 PR(Pull Request) 보낼 때 변경된 코드  Nit (nitpick)하찮은 일로 트집잡다  중요하지는 않지만 더 나은 방법이 있다는 의견을 남기고 싶을 때 사용 코드에 (치명적인)문제는 없지만 코드 스타일, 들여쓰기 등을 말할 때 사용  LGTM (Look good to me )내가 보기엔 괜찮아Github에 PR(Pull Request)을 리뷰어에게 요청 시 리뷰어가 특별히 문제 없음을 의미하는 말  SGTM (Sounds Good to Me )나에게는 좋아보여PR(Pull Request)를 날리면 Reviewer가 LGTM 대신 SGTM으로 작성하는 ..

📌 display 속성display : 화면에 렌더링 방법을 결정하는 속성block: Nomal flow에 따라 block 요소처럼 동작, 요소 앞 뒤로 줄바꿈을 생성함기본값none: 객체가 만들어지지 않음 (화면에만 안보이는게 아님, DOM Tree에서 없어짐)flex: 요소가 flex 컨테이너가 됨 (부모 요소에 선언) inline-flex: inline 요소처럼 동작, flex-box 모델에 따라 콘텐츠를 배치함flow-root: 부모 요소가 자식 요소들을 감싸고 있을 때, 자식 요소가 부모 요소의 크기를 정확하게 반영하지 않는 문제가 발생하는데 이러한 문제를 해결함  📌 flexflex 요소 가로 배치inline 요소로 변경됨 (크기가 자기 컨텐츠만큼만 설정)  flex-container: 자..

📌 Flow Layout 🔺 Nomal Flow: CSS에서 요소들이 문서 내에서 기본적으로 차지하는 공간과 배치되는 방식 블록 수준 요소와 인라인 요소들이 문서 흐름에 따라 배치되는 방식을 의미 - 블록 수준 요소: 한 줄에 하나씩 차지- 인라인 요소: 컨텐츠만큼의 크기를 갖고 배치  🔺 Block Flow: 위에서 아래로 진행  🔺 Inline Flow: 왼쪽에서 오른쪽으로 진행  📌 논리적 속성: 블록과 인라인 차원에 시작과 끝 속성을 정의한다. inline-size (= width): 가로 크기 block-size (= height): 세로 크기  inset-block-start(= top): 위를 기준으로 배치 inset-block-end(= bottom): 아래를 기준으로 배치   i..