css

html 화면을 구성하는 요소는 모두 CSS로 표현이 될때 Box로 구성이 됩니다. 이 Box들의 구조 Model은 크게 4가지로 구분됩니다.Content는 실질적인 Box의 내용물을 나타냅니다.Padding은 테두리와 Content 사이의 간격을 나타냅니다.Borde

html 요소들은 각각 기본적으로 display 속성을 가지고 있습니다.display 의 종류는 block, inline-block, flex 등의 종류를 가지고 있습니다.우선 block 속성의 특징입니다.html이 위에서부터 요소들을 채워나갈때 요소의 display

display:block; 의 기본 성질은 면적을 나타내는 영역으로 표시가 됩니다.따라서 width, height, border, padding, margin과 같은 box model의 기본 속성을모두 사용 가능했습니다.하지만 inline의 경우 선처럼 옆으로 흐르는

display:block; 의 단점은 위아래 요소들을 배치하기는 수월하지만 옆에 다른 요소들이 오지 못하게 막는다는 단점이 있습니다.display:inline; 의 단점은 양옆으로 요소들을 배치하기 수월하지만 위아래로 영역을 정하기 어렵다는 단점이 있습니다.displa

\- float는 block 요소들을 가로로 배치하기 위해 사용합니다.float을 사용하면 inline, inline-block, block 모두 block 속성으로 변합니다.inline 속성인 span 태그를 사용하면 display 속성이 inline이 기본 값으로

float을 사용하게되면 아래와 같이 작성된 화면이(float 사용하기 전)이처럼 전체적인 화면이 바뀌게 됩니다.block요소들은 float을 없는 존재로 여겨서 부모 태그인 parent의 height값이 자식태그들의 height의 합인 600이 아닌 0이 됩니다.그리

position은 요소를 원하는 위치에 위치시키는 속성입니다.position에는 relative, static, absolute, fixed, sticky 총 5가지 속성이 존재합니다.sticky는 아직 지원하는 브라우저가 많지 않기때문에 relative, static

position:absolute;float속성을 적용했을때와 비슷한 효과가 생깁니다.2\. display가 inline을 기본 속성으로 가지고 있는 span 태그의 position을 absolute로 적용하면display 속성이 block으로 변하는 것을 알 수 있습니

flex를 사용할때 확인할점은 1.flex를 어디에 선언할 것인가2.가로방향, 세로방향3.한줄에 모두 정렬할 것인지 아닌지크게 세가지로 나눌 수 있습니다.flex는 정렬하고자 하는 요소들을 감싸고 있는 부모 요소에 display:flex;를 적용해야 합니다.flex를

flex를 사용해 정렬할때 main axis 축을 따라 정렬을 해주기 위해선 justify-content를 사용합니다.justify-content:center; 는 가운데 정렬justify-content:flex-start;는 flex-direction이 시작되는 지점

미디어 쿼리는 콘텐츠 렌더링이 사용자가 사용하는 브라우저의 사이즈 사용자의 기기 해상도 같은 다양한 조건에 적응할 수 있도록 하는 CSS3의 기능입니다. 다음과 같은 화면에 media query를 적용시키게 되면적용된 media query따라서 화면이 변하는것을 알 수

폰트 사이즈로 16px이 적용됩니다.부모태그의 폰트값으로 16px이 주어지고 자식태그인 p태그의 폰트값으로 2em이 주어지자 16 \* 2 를 한 32px이 폰트값으로 주어진것을 볼 수 있습니다.html 자체의 폰트값으로 20px의 값이 주어지고 p태그의 폰트값으로 2

hex, rgb, rgba 크게 3가지로 바꿀 수 있습니다.hex로 배경색상을 준 모습입니다.rgb의 값을 이용해서 색상을 꾸민 모습입니다.rgba의 마지막 값은 투명도를 나타냅니다 낮을수록 투명해집니다.image를 사용할때는 url()에 주소를 넣어서 표시해줍니다.n

태그의 클래스에 active가 추가되면 폰트의 사이즈를 바꾸도록 설정했습니다.active가 추가되자 폰트의 사이즈가 바뀌는 것을 알 수 있습니다박스 태그의 클래스에 active가 추가되면 폰트 사이즈, 색상 요소 모두3초에 걸쳐서 바뀌도록 설정했습니다.클래스에 acti

transition은 요소의 속성변화를 자연스럽게 만들어 주는데 사용하고 animation은 요소의 움직임을 나타낼때 사용합니다.@keyframes 이름{ } 형식으로 animation의 이름을 정해주고 animation의 이름과 지속시간을 animation이 적용될