베짱이와 노는 개미

오늘부터 드디어 미니홈피 프로젝트를 시작해보겠다. 일단 지금까지 배운 css파일 작성법, position속성 사용법 등을 활용하여 기본 레이아웃먼저 배치해보겠다. 복습하는 방식으로 글을 써보겠다. 이번 포스팅에서는 결과물 먼저 보여주는게 좋을것같다. 이렇게 만들것이다. 거창하게 시작했는데 단촐해 보인다... 자일단 배경에 보이는 체크무늬먼저 이미지 파일로 저장해줘야겟지 아무거나 이미지파일을 저장한후에 static폴더 생성하고 그안에 images 폴더 만들고 그 안에 체크무늬 이미지를 넣어둔다 이렇게 폴더를 만들어주면 되는것이다. 그리고 복습하나!! 외부 css파일로 적용하는 방법에서 제일 중요한것은 html파일에서태그에 css파일의 경로를 추가해줘야한다는점이다. 다시말해서 이 코드를 꼭 명시해줘야한다. ..

오늘은 본격적으로 position속성에 대해서 알아보겠다. position속성이란 무엇인가? 웹사이트를 꾸미는 요소들(태그)의 위치를 결정할때, 다시말해서 화면 레이아웃을 만들때 사용되는 속성 이다. 예를들어 유튜브에서 영상을 보다가 댓글을 읽기위해서 스크롤을 내린다고 할때 화면 맨위에있는 검색창은 그대로 위에 고정되어있다. 이런것이 바로 포지션속성으로 설정해준것이다. 포지션속성에는 5가지가 있다. (static, relative, absolute, fixed, sticky) 하나씩 알아보자 (#알고 넘어가야할것!! 포지션은 태그가 아니라 태그에 들어가는 속성이라는것!!) 1. static static값은 모든 태그의 기본 포지션 속성이다. 다시말해서 position값을 따로 설정해주지 않았을때의 디폴트..