클로리셔 작은 공간

웹사이트를 퍼블리싱 하다보면 이미지 태그를 사용해야할때가 자주 나온다. 이미지를 표현하는 방법 HTML에서 로 경로를 연결해서 사용하는 방법 CSS에서 background-image{ url(...)}로 경로 연결해서 불러오는 방법 작업을 하다보면 이 이미지가 HTML 태그로 이미지를 넣어야할지 CSS 속성으로 백그라운드를 넣어야할지 고민하게 되는데 어떤 경우에 어떠한 방법을 사용해서 퍼블리싱을해야 더 시멘틱하게 작업하는건지 알아보도록 하자. 그 전에, 배경 이미지는 무엇인가? 이 용어는 용어 그대로 배경 이미지기에 에러가 나든 말든 상관이 없는 것이다. 즉, 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 SEO, 성능 등 많은 면에서 효율적인 태그를 쓰고, 그렇지 않으면 backgroun..

폼(form) 요소는 알게 모르게 웹에서 많이 사용한다. 사용자의 정보를 알기 위한 입력할 틀로 사용되기 때문이다. form 요소를 사용하여 사용자로부터 입력을 받을 수 있고 사용자가 입력한 데이터를 서버로 보낼 때도 form 요소를 사용한다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 즉, 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식으로 전달된다. 1. 폼 태그 동작방법 1. 폼이 있는 웹 페이지를 방문한다. 2. 폼 내용을 입력한다..

1. 태그 속성 form 관련 요소들은 동적인 웹 페이지를 위해서는 반드시 필요한 요소들이다. 로그인, 회원가입, 글쓰기 등 관리할때 사용되는 즉, 폼안에 입력된 데이터를 서버로 전달해서 처리하도록 만들어주는 태그다. 1-1. form 속성 method : 폼을 전송할 방식으로 'post' / 'get' 두 가지가 있다. name : 하나의 웹 문서안에 여러 개의 폼이 있을 수 있으므로 폼을 식별하기위해 폼의 이름을 지정한다. action : 폼을 전송할 서버의 스크립트 파일을 지정한다. onsubmit : action 속성을 활용하지않고, onsubmit 이벤트를 활용해서 스크립트로 처리가 가능하다. target : 스크립트 파일을 현재의 창이 아닌 다른 위치에서 열리도록 지정할 수 있다. autoco..

사용자의 정보를 입력할 때 사용하는 input 태그는 자주 쓰이는 type 유형들이 있어 잘 숙지하고 넘어가야한다. 1. select 요소 사용자가 폼에서 옵션의 목록에서 선택 할 수 있도록 보여주는 폼 요소이다. 라디오 타입의 input과 비슷한 역할을 가지고 있지만 라디오 타입의 input은 다 펼쳐서 보여지는 반면에 select 요소는 옵션들을 모두 숨기고 선택된 한 가지만 보여준다. 또한 한 가지 선택이 아닌 복수로 선택할 수도 있다. select 요소는 내부에 한개 이상의 option 요소를 가지고 있다. 사용자는 option을 선택하고 선택된 option 요소의 값은 서버로 전송하게 된다. 점수 선택 A B C D 1-1. select 요소의 속성 ▶ multiple 속성 기본적으로 selec..

폼[form]은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 한다. 단순히 텍스트 내용만 보여주는 페이지말고 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 태그 요소이다. ex. 아이디와 비밀번호는 태그가 자신의 내부에 있는 정보를 넘기는 것 1. 폼(form) 속성 종류 알아보기 action : 폼 내부에 데이터를 보내는 목적지 url을 지정한다. actocomplete : HTML5에 추가되었으며 양식의 자동완성을 지정한다. enctype : 넘기는 content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용. entype="multipart/form-data"로 지정해서 사용한다. method : 폼을 서버로 전송하는 http 방식을 지정. POST와 GET이 있다...

페이지를 코딩해서 링크를 걸 때 아무거나 링크로 만드는 것이 아니라 용도에 맞게 사용하는 것이 중요하다. 페이지 링크를 걸 때 문서간의 url을 '연결'하기 위해 주로 사용되는 일반적인 방식 url을 연결하지않고 단순하게 사용자 인터페이스만을 '조작'하기 위한 버튼. type을 명시하지않으면 submit 으로 실행하기때문에 반드시 type="button"으로 지정해야한다. 사용자의 입력을 서버로 '전송' 하기 위한 버튼으로 전달하는값을 받거나 전달할 때 사용하는 마크업 1. 태그 요소의 어원은 앵커(anchor-닻)으로써 문서간의 url을 '연결'하기 위한 버튼이 목적이다. 기본 링크들은 a 요소로 마크업하고, 기능을 구현하기 위해서 (ex. 팝업창 띄우기, 어떤 요소를 숨기거나 보이게 하기 등등) 클릭..

리셋(reset) 개념 reset = 재설정 이라는 의미. 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 처음부터 초기화를 시킨다는 의미. 대표적인 브라우저로는 IE(익스플로러), Firefox(파이어폭스), Chrome(크롬), Safari(사파리), Opera(오페라)가 있다. 각 브라우저를 코드 작성에 화면을 띄우게 되면 table / body 등의 태그들의 margin, padding을 적용했을 때 브라우저마다 기본값이 다르기때문에 사용자가 화면을 보았을때 간격들이 브라우저마다 다르게 보이게 된다. 그래서 리셋(reset)을 통해서 모든 브라우저에서 통일된 화면을 볼 수 있도록 margin / padding 등의 값을 기본값으로 초기화를 시킨 후 작성을한다면 어떤 브라우저에서도 동일한 결..

동기적 (Synchronous ) 일반적으로 프로그래밍에서 코드의 실행은 작성된 코드의 위에서 부터 아래로 진행된다. 이처럼 코드가 위에서부터 아래로 내려가면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리라고한다. 비동기적 (ASynchronous ) - 이벤트가 언제 일어날지 프로그래머가 전혀 알 수 없는 이벤트를 말한다. 즉, 연속적으로 발생하는 이벤트를 담은 후 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않는 것. 사용자의 마우스 클릭도 비동기적 이벤트의 일종이다. 사용자의 마음에 들어가지 않는 한 언제 클릭할지 알 수 없기때문이다. 비동기적 처리가 필요한 이유는? 원하는 데이터를 서버로부터 받아오는 방식의 어플리케이션을 만들었다고 가정해보자. 서버로부터 데이터를 받아서 해당 ..

CSS selector 개념 잡기 CSS(Cascading Style Sheets)는 HTML 요소의 스타일(design / layout)을 정의해요. 이때 필요하게 되는 것이 Selector 입니다.. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다. 1. 기본 셀럭터 선택 CSS Hello World! This paragraph is styled with CSS. - - result - - Hello World! This paragragh is styled with CSS. 2. 태그 셀렉터 Heading paragraph 1 paragraph 2 paragraph 3 - - result - - Heading paragraph 1 paragra..