본문 바로가기

HTML

 (16)
[Todolist_Basic] Step 3. 동적인 부분에 대해서 사용자 경험 높이기 Step 3. 동적인 부분에 대해서 사용자 경험 높이기Step 2 에서 멈추면 사용자에 대해 너무 야박한 서비스이다. 왜냐하면, 입력하기 위해서 커서를 input 태그에 찍어야 하고, 입력을 하기 위해 다시 손을 마우스로 옮겨서 New item 이라는 버튼을 클릭해야하니 말이다! 또 새로운 값을 입력하려고 이전에 입력했던 것을 다 지워야 한다. 이를 위해 다음 세 가지를 추가로 설정해보자. 1> Enter키를 통해 값을 입력하자. 2> 웹 애플리케이션을 시작했을때 자동으로 input 태그로 커서를 위치시키자. 3> 입력을 하고 나서는 백스페이스를 입력할 필요가 없도록 입력한 값을 블록설정해주자. 이렇게 기능을 추가하는 과정에서는 코드가 추가도 되겠지만 삭제될 수도 있다. 엔터키로 입력할 것이니 더이상 버..
[Todolist_Basic] Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 기본적인 틀을 어느 정도 잡았으니,input 태그로부터 값을 받아 append로 달아보자.그러기 위해서는 input 태그를 추가해야 한다. index.html code>12345678910111213 To do List New Item Colored by Color Scriptercs 그리고 이제 자바스크립트 코드를 보자. listItem.innerText 값에 Hello 대신에, input 태그로부터 들어온 값을 주면 될 것 같지 않은가? 일단 input 태그를 잡자. var inputText = document.getElementById(‘inputText’); 그리고 input 태그로부터 들어온 값을 받는다. 이때는 .value를 사용한다. ..
[Todolist_Basic] Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기. Step 1. 기본적인 HTML/CSS/Javascript 구조 갖추기 우선, 웹 페이지 구성의 기초가 되는 html code를 구성해보자. index.html code>123456789 To do List New Item Write First item Colored by Color Scriptercs 현재는 체크 박스를 할 수 있고 없고 정도만 웹 페이지에서 우리가 할 수 있다. HTML 코드를 간략히 설명하면, To do List 라는 제목이 있고, 버튼을 추가했다. (id = “btnAdd”) 그리고 앞으로 li 태그를 추가해나갈, ul 태그를 삽입하고 id를 todolist라고 했다. 약간의 CSS를 입히고 시작하자. 그래야 진행되는 맛이 있으니까. style.css code>12345678910..
TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript) 자바스크립트 연습 프로젝트 자바스크립트를 공부하면서 뭔가를 만들어보면서 하고 싶어졌는데,가장 유명한 것이 To do list를 만드는 것이다.검색해보니 난이도가 너무 높고, 이해도 안되고, (외국 사이트의 경우)심지어 코드를 그대로 입력했는데 동작하지 않았다.그러면서 여기 저기서 입수한 정보를 토대로 나만의 독자적인 To do list를 만들어가게 되었다. 이 포스팅은 그 프로젝트를 정리한 내용이다.정말 기초적인 내용을 연습하는 프로젝트이다. 프로젝트 대상은 누구인가?HTML과 CSS에 대한 기본적인 Markup Language에 대한 이해를 갖추주고 있고,JavaScript 이론 공부에 대해서 한 번 정도 진행된 사람 준비해야할 사항| Chrome Browser 프로젝트가 크롬을 기준으로 진행되기 때문..
5. background 속성을 알아보자 / 그럴듯한 웹페이지 만들기 background image와 transparent만 잘 알아도 그럴듯한 웹 페이지를 구성할 수 있다. #image{ background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(/img/baby1.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; } background: linear-gradient 속성과 url 속성을 살펴보자. url을 통해 원하는 image를 로드한다. 그리고 linear-gradient를 통해서, 그라데이션을 주는데, 여기서 중점을 둬야할 곳은 ..
4. Pseudo Class 와 Pseudo Element 활용하기 Chapter 4. Pseudo Class와 Pseudo Element 활용하기가상 요소만 잘 알고 활용해도, 인터랙티브한 웹 페이지를 구성할 수 있다.Pseudo Class Pseudo Class는 단순한 선택자(simple selector)로는 표현할 수 없는 어떤 것을 select하는 선택자이다. 특정한 상태말고 규칙에 따라 상태가 바뀌는 요소를 선택할 때 사용하는 것이다. 종류 Dynamic pseudo-class :hover :visited :link :active :focus 위 네 개는 anchor tag(a태그)와 함께 자주 쓰인다. 그리고 focus tag는 input tag와 함께 쓰인다. UI element states pseudo-class :enabled :disabled :che..
[HTML/CSS] 1. Box Model / Block Element, Inline Element 각각 갖고 있는 Box Model이 다르다.Block Element / Inline Element Block Element는 독자적인 영역을 차지하고 있다.그렇기 때문에 위에서 아래로 배열된다.ex) h1, h2, h3, ... , div, p, ul, li, form Inline Element는 content area의 영역만 차지하고 있다.그래서 웹 페이지의 영역이 되는데로 좌에서 우로 배열된다.ex) a, img, span, em, input 위 두 가지 속성은 style의 display를 통해서 변환시킬 수 있다.추가적으로 inline-block이라는 속성이 있다.inline 요소는 Box Model 을 통해 제어할 수 있는 margin 값이 적용이 안될 때가 있는데,이 부분을 보완하기 위해서 등..
[HTML] 0. HTML/CSS의 기본과 웹사이트 개발에 대해서 HTML(Hyper Text Markup Language)“연결된" “문자"를 “markup"하는 “언어" markup이란 요구사항을 위해 주석, 메모를 다는 것을 의미한다. HTML의 핵심은 구조화이다. 이 문서의 title, subtitle, list, table은 무엇인지를 설정 구조화를 제대로 해서 마크업을 해줘야 웹 문서의 의미가 살아난다. 이렇게 의미론적으로 구조가 갖춰져있는 웹을 시맨틱(Semantic) Web이라고 한다. 왜 의미에 맞는 태그를 사용해야 하나요?위에서 말했듯이 HTML 태그에 맞게 작성된 웹을 Semantic Web이라고 한다.div로 템플릿을 설계할 수도 있지만 왜 각 태그를 내용에 맞게 설계해야 하는가? 우선, 단편적으로 검색에 노출될 수 있게 하는 이유가 있다.내용에 ..

티스토리툴바