웹페이지를 디자인 할 때 우리는 수많은 레이아웃 배치상 어려움을 겪는다.이 때 아주 간편하게 레이아웃을 배치할 수 있는 position 속성에 대해 정리해보고자 한다.문서상에 요소를 배치하는 방법을 말한다.top, bottom, right, left 속성을 사용할 수
position 속성과 마찬가지로 우리는 웹 페이지를 디자인 할 때 display 속성을 굉장히 많이 사용한다.HTML의 각 태그는 inline, block 등 각각 지정된 레벨의 display 속성이 있다.예를 들어 대표적으로 inline 속성에는 <span>,
자기소개 페이지를 만들던 중 "I'm frontend developer." 라는 문구를 썼다 지웠다 하는 애니메이션을 추가하고 싶어졌다.먼저 Html에 h6 태그를 생성한 후 css를 입혀주었다.이제 css파일을 살펴보자writing \-> color : transpa
우리는 반응형 웹을 제작하고자 할 때 media query를 사용한다.사용법은 아래와 같다.위 코드는 스크린의 가로 너비가 375px 이상 400px 이하일 때 미디어 쿼리 안에 있는 css를 적용한다는 뜻이다.여기서 screen은 데스크탑 화면 or 스마트폰 화면을
우리는 웹 페이지를 제작할 때 화면을 꾸며주기 위해 css를 사용한다.그러나 수많은 id, class, 선택자 등을 사용하게 되면 css 파일이 굉장히 보기 어려워진다.이런 단점을 보완하고자 나온 것이 sass/scss이다.이는 css 전처리기이며 때문에 웹 브라우저에