클로리셔 작은 공간

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

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

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..

엔티티(Entity) HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티 문자 엔티티 이름 엔티티 문자 엔티티 이름 « « > Ⓒ Ⓒ & & Ⓡ Ⓡ ÷ ÷ @ @ × × ★ ★ " " ☆ ☆ ' ' ✓ ✓ © © # # ® ® * * ¥ ¥ $ $ £ £ : : ¢ ¢ _ _ € € | | ( (..

빈 요소 (Empty Element) content를 가질 수 없는 요소를 빈 요소(Empty element or Self-Closing element)라 한다. 아래의 예와 같이 빈 요소는 content가 없으며(필요가 없다) 어트리뷰트(Attribute)만을 가질 수 있다. 빈 요소 중 대표적인 요소는 아래와 같다. br hr img input link meta [참고사이트] https://poiemaweb.com/

세상이 변화하는 발전의 속도보다 조금 더 빠르게 웹은 발전하고 있습니다. 특히 그 중에서도 CSS의 활용도가 높아지면서 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. 코드의 재사용성을 위해 쉽게 유지보수 하기위해 확장을 가능하게 하기위해 클래스명으로도 무슨 의미인지 예측 가능하도록 하기위해 SMACSS (Scalable and Modular Architecture for CSS) 정의 CSS에 대한 확장형 모듈식 구조 (by Jonathan Snook) CSS의 프레임워크가 아닌 하나의 스타일 가이드 사용목적 Class명을 통한 예측 재 사용 쉬운 유지보수 확장 가능 SMACSS의 유의사항 파생된 CSS 셀렉터 사용금지 ID 셀렉터 사용금지 !important 사..