클로리셔 작은 공간

1. 태그 속성 종류 ● href : 연결하고 싶은 주소를 지정한다. ● target : 링크 클릭 시, 창의 형태를 지정한다 [ _blank, _self, _top, _bottom ] ● title : 링크에 대한 설명을 넣는다. 2. 태그의 href 속성 href = Hypertext Reference의 약자 - href="연결 주소" 주소 링크를 넣어서 속성의 값으로 경로를 이동시킨다. 코딩을 하다보면 href 안에 #, #none, / 넣는경우가 있는데 차이점을 알아보자. ◎ # : 아무것도 실행하지 않지만 페이지 최상단으로 이동 ◎ #ID : 지정된 id 값으로 포커스 이동 ◎ #none : 아무것도 실행하지 않고 페이지 최상단으로도 이동하지 않는다. ◎ javascript:; : 자바스크립트라..

1. 그룹 태그에 링크 넣기 예시 01) 박스 링크 걸기 예시 02) 그룹박스 링크 걸기 사이트 바로가기 현대자동차 현대컬렉션 N 브랜드 ------ 사이트 리스트 ------ 현대자동차 현대컬렉션 N 브랜드 롯데 롯데시네마 구글 네이버 다음 태그는 예시 01 처럼 리스트로 만들 수 있고 예시 02처럼 그룹화 리스트를 만들 수 있다. ● 그럼, 리스트에 링크를 거는 방법은? ------ 관련 사이트 ------ 코센(KOSEN) 국가정책연구포털(NKIS) East Asian Economic Review 한국과학기술정보연구원 경제인문사회연구회 대외경제정책연구원 구글 네이버 다음 태그에 window.open(value,'_blank'); 넣어주고 에 value="링크 주소" 입력하면 된다.

1. 라디오 버튼 (Radio Button) 라디오 버튼 특징은 여러 라디오 버튼 중 하나만 선택 가능하다. 인라인 태그에 있는 'checked'는 라디오 박스에 기본값으로 체크 된 상태에서 로딩하라는 표시이다. 라디오 버튼는 여러개 중 하나만 선택되어야 하는데 name 값이 같지 않거나 없다면 제 기능을 발휘하지 못한다. 만약 라디오 버튼 속성에 name 없으면 모두 체크하거나 해제할 수 있는데 그것은 라디오 버튼라고 할 수 없다. 남성 여성 그럼 여기서 체크 값을 가져오는 스크립트를 알아보자. 매우 그렇다. 그렇다. 보통이다. 일단 체크 값들에게 값(value)을 부여한다.그리고 라디오버튼의 name 고통적인것을 이용해서 스크립트를 짠다. $("input[name='radio_answer']").ea..

:: 제목태그 - 종류와 개념 태그는 문서의 제목을 표시할 때 사용하는 태그로 'heading'의 의미를 가진다. 제목의 크기별로 부터 까지 사용이 가능하다. 이 가장 상위 계층의 제목을 표시할 때 사용되며 이 가장 작은 소제목을 표시할 때 사용한다. 즉, 태그의 숫자가 커질수록 제목 글자의 사이즈는 작아진다. 제목1의 크기입니다! 제목2의 크기입니다! 제목3의 크기입니다! 제목4의 크기입니다! 제목5의 크기입니다! 제목6의 크기입니다! 제목의 표현이라는 기능 외에도 다른 중요한 역할을 하는데 여러 검색엔진은 각 웹사이트의 내용을 바로 이 태그를 이용하여 키워드를 수집하고 내용을 파악한다. 그래서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색 될 확률을 높일 수 있다. *..

1. ID 선택자 #아이디 { 속성1: 속성값; 속상2: 속성값; } id는 한페이지에 단 한번의 정의로 고유한 하나의 태그만 사용할 수 있다. 그리고 하나의 태그에 id 속성은 하나만 가질 수 있다. 동일한 것이 없는 고유한 태그기 때문에 라고도 표현할 수 있다. 로고, 상단메뉴, 하단정보 같은 스타일을 정의할 때 id를 사용한다. 2. CLASS .클래스명 { 속성1: 속성값; 속상2: 속성값; } class는 한페이지에 반복적으로 사용되는 스타일을 정의할 수 있다. 또한 하나의 태그에 class 속성은 여러개 가질 수 있다. 똑같은 형태로 꾸밀건데 하나씩 만든다면 엄청 불편하겠죠? 그럴때 그룹처럼 묶어서 똑같은 스타일을 지정해주고 뿌려준다면 아주 편할것이다. 3. 스타일 선언의 우선순위 !impor..

Skip Menu / Skip Nav를 왜 사용하는가? - 사용자 편의 및 웹 접근성을 위해서다. 웹접근성이라하면 마우스가 고장났다던가, 키보드를 사용 못하는 경우 등 정상적으로 쓸 수 없는 상황에 대해서 편의를 고려해서 제작하는 방법이다. 엄청난 컨텐츠 영역을 가지고 있는 홈페이지에서 원하는 영역에 도달하고 싶을때 Tab 키를 수 없이 눌러야 할것이다. 그런 불필요한 액션을 없애기 위해 스킵메뉴(Skip menu)를 제작한다. 스킵 메뉴를 만들면 해당 영역으로 즉시 갈 수 있는 라고 생각하면 된다. 웹접근성 맞게 스킵메뉴 만들어보기 - 스킵네비게이션은 다음으로 나오는 것이 가장 적절합니다. 본문 바로가기 #skipNav{position:relative;z-index:9999;} #skipNav a{po..

웹사이트를 퍼블리싱 하다보면 이미지 태그를 사용해야할때가 자주 나온다. 이미지를 표현하는 방법 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..