CSS css box padding의 기본 원리 box-sizing: border-box; navigation은 보통 ul로 나눠지고, 그 안에 많은 li들로 구성됨 구글도 navigation을 찾아서 ul의 li에 있는 link를 가져오게끔 설정되어 있음 vscode 단축키 nav>ul>li*개수>a (이후 tab만으로 편하게 작성 가능) css box padding의 디폴트 원리 width가 200px인 box에 50px의 padding을 주면, css는 기존 box의 width를 유지하기 위해 padding의 크기만큼 박스를 늘리기 때문에 결과적으로 box의 크기는 250px이 됨 box-sizing: border-box; css에게 padding을 줘도 box 사이즈를 늘리지 말라고 하는 것

[오늘의 공부] HTML index.html 사용 이유 CSS css 방법론 - BEM 아이콘 추가 방법 css hack - space-between 대체 reset css :not() selector inherit index.html 대부분의 웹 서버는 디폴트로 index.html을 찾아보도록 설정되어 있음 영어에서 index는 첫 번째라는 의미 vscode 단축키 shift + alt + 방향키 위 아래 : 해당 라인 복붙 div class="name" → div.name div id="id" → div#id div 10개 → div*10 link:css → CSS 방법론 CSS의 class name을 어떻게 지으면 좋을지에 관한 것 CSS의 방법론 중 하나인 BEM(Block Element Modi..

CSS Transition Transformation Animation Media Query Transitions 어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화 하는 것 Go home 마우스를 올리면 색깔이 반전되지만 애니메이션은 없음 변화가 아주 갑작스럽게 일어나고 있음 서서히 변하거나 부드럽지 않고 아주 빠르게 변하고 있음 이럴 때 필요한 것이 transition transition이라는 속성은 state가 없는 요소에 붙여야 함 예제에서는 hover가 있는 쪽이 아니라 없는 쪽에 써야 함 transition: 1. 어떤 것을 변화하게 만들 것인지 써야 함 배경색에 변화를 주고 싶음 (왜 배경색이냐면 변화하는 부분이 배경색이기 때..

CSS inline / inline-block flex (justify-content, align-itmes) position selector (pseudo selector, attribute selector) state pseudo element variable Git / Github inline / inline-block inline은 높이와 너비가 없음 그래서 위, 아래에 margin을 가질 수 없음 padding은 사방에 다 가질 수 있는데 margin은 좌우로만 가질 수 있음 그래서 위, 아래에 margin을 적용하고 싶다면 inline 요소들을 block으로 바꿔야 함 디스플레이 속성 중 inline-block은 block으로 인식하게 함 높이도 가질 수 있고 사방에 margin도 가질 수 있..

웹사이트는 그냥 text 파일 브라우저가 웹 사이트를 만드는 것 브라우저는 text를 받고 웹사이트로 구현 브라우저는 인간들이 쓰는 언어를 이해 못 함 브라우저에게 콘텐츠가 뭔지 알려줘야 함 HTML로 브라우저에게 content구조가 어떤지를 설명 오직 HTML만이 브라우저에게 content가 어떻게 구성되었는지 설명할 수 있음 CSS는 HTML과 같이 사용 CSS는 브라우저에게 웹사이트가 어떻게 보여야 하는지에 대해 알려줌 HTML은 브라우저에게 웹사이트의 콘텐츠가 무엇인지에 대해 알려주는 것 HTML은 뼈대 CSS는 근육 JS는 뇌 동적 상호작용성 (interactivity) 클릭하면 어떤 일이 생김 HTML은 Markup language Markup은 content CSS는 브라우저에게 그러한 co..