ilsancityboy

이번 글에서는 html , css , js 를 사용하여 투두리스트 페이지를 만들어 볼 것이다. 대략적인 순서는 이렇다. Html 작성 ( 타이틀 , 할 일을 적어 넣는 필드 , 할일 목록 ) CSS 작성 ( 각 요소들을 보기 좋게 꾸며주기 ) JS 작성 ( 페이지에서 동적 행동이 필요한 요소들을 찾아내고 동작 코드 넣기 ) HTML 작성 To do List 오늘 해야할일은~ 입력! body 부분을 하나씩 살펴보자. 먼저 태그는 다른 컨텐츠의 코드들과 섞이지 않기 위해 구분을 짓는데 쓰이는 태그이다. 태그 안의 코드들은 하나의 컨텐츠를 위해 쓰인것으로 보여지게끔 구분했다. 웹 페이지에 보여지는 제목 즉, 타이틀을 걸어둘 예정인데 이또한 태그를 사용해 보기좋게 요소들을 나누어 구분한다. 태그는 아무런 기능을..

는 "division" 을 의미하며 html 문서에서 레이아웃을 구성하기 위한 컨테이너 역할이다. 제목 내용 내용 내용... 위 내용에서는 content 클래스를 가진 div 즉, 컨테이너 요소로서 내용에는 제목과 속 내용이 포함되어있다. 앞으로 자주 쓰일 것 같다.

사이트를 보면 제일 상단에 위치하며 메인로고와 각종 버튼들이 있다. 또한 사용자가 스크롤을 내려도 해당 바는 사라지지 않고 사용자의 이동을 따라다닌다. 해당 기능은 HTML 문서 내에서 기능을 구현할 수 있고 CSS도 기본적으로 받쳐줘야한다. 이 기능에 대해 기본 구조를 알아보자. HTML //HTML 문서 구조-- 로고 홈 서비스 포트폴리오 연락 CSS /* 네비게이션 바 스타일링 */ header { background-color: #333; /* 네비게이션 바 배경색 */ color: #fff; /* 텍스트 색상 */ padding: 20px 0; /* 위아래 패딩 */ position: fixed; /* 화면 상단 고정 */ width: 100%; /* 너비 100% */ top: 0; /* 화면..