단단히

버튼을 누르면 자동으로 만들어진 혹은 만들 예정인 파일들로 이동하는 방법을 정리해본다. js코드를 html 코드 내부에 쓰는 방식이다. 특정한 값(value)을 전송하는 것이 아니다. html 기본구조 .. main 코드.. main 코드 작성 Main 입력 조회 수정 button은 3가지로 입력 / 조회 / 수정 버튼으로 나눴다. 입력을 누르면 회원을 등록할 수 있는 화면이 나오게 할 것이고 조회를 누르면 회원 목록을 확인할 수 있도록 할 것이다. 수정은 회원의 특정 정보를 수정할 수 있는 화면과 연결하고자 한다. 우선 button>을 3개 만들어준다. 특정한 기능을 하는 것이 아닌 누르면 이동하는 버튼을 만들어줄 것이다. 즉, type = "button"으로 통일한다. 이때 누르는 이벤트가 발생할 경..

레이아웃 ( Layout ) 블록 레벨 요소를 사용하여 결과 화면에서 2-3열 구조를 만들거나 특정 공간에 배치하는 것. id속성을 주로 사용하며 필요하면 class속성을 사용한다. 요소 내용 header 머리글 영역 nav 전체메뉴 또는 부분메뉴 영역 전체 메뉴를 GNB(Global Navigation Bar), 부분 메뉴를 LNB(Local Navigation Bar)이라고 한다. 줄여서 모두 내비게이션 메뉴라고한다. main 본문 영역 aside 본문영역이 아닌 보조 영역 footer 바닥글 영역 div 시멘틱 요소로 명확하게 지정할 수 없는 영역에 사용 2022.07.27 - [HTML,CSS/개념 정리] - Semantic(시맨틱) 요소 Semantic(시맨틱) 요소 HTML 코드를 작성하다 보..

Some Useful HTML Character Entities https://www.w3schools.com/html/html_entities.asp HTML Entities W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com HTML에서는 다중 공백을 무시한다. 그래서 &nbsp와 같이 특수기호를 사용해서 공백을 만들기도 한다. 이 표시 말고도 다양한 표시가 특수기호가 있..

긴 html 코드에 선택자를 올바르게 적어야 CSS가 원하는 대로 적용이 된다. 그래서 선택자 사용법을 정확히 이해하고 넘어가는 게 중요하다. 선택자의 기본 사용 - 전체 선택자에서 * 표시를 all, 아스테리스크, 아스 크릭스라고 읽는다. 슈도 클래스 선택자 구분 사용법 보기 차일드 클래스 선택자 :first-child 자식 대상중 첫번째 요소 :nth-child(n) 자식 대상중 n번째 요소 :last-child 자식 대상중 마지막 요소 링크 클래스 선택자 :link a요소에 href속성이 있을 때 방문 클래스 선택자 :visited 링크가 설정된 a요소를 클릭했을 때 하버 클래스 선택자 :hover 마우스를 요소에 위치했을 때 액티브 클래스 선택자 :active 링크가 설정된 a요소를 press했을 때

CSS 개념 HTML요소를 스타일링과 레이 아웃하는 코드이다. ◎ 스타일링 : 요쇼의 내용(이미지, 글씨.. 등)에 관한 색깔, 크기, 모양, 형태, 효과, 장식을 적용하는 것을 의미 ◎ 레이아웃 : 전체적인 위치, 크기, 배치 등에 관하여 설정하는 것을 의미 CSS 코드 위치 1) 인라인 CSS 인라인 css 2) 내부(Inner) CSS 내부 css 3) 외부(Outer) CSS 인라인 css @charset "UTF-8"; p { width: 200px; border: 1px solid #000 } 따로 CSS파일(.css)을 만들어서 작성한다. CSS 형식 table{ border: 1px solid #000; border-collapse:collapse; } - 요소를 선택한다. 위 형식에서는 ..

Form 요소 데이터를 입력할 수 있는 공간을 갖는 요소, 입력 양식 요소라고 한다. 기능 폼과 하위요소로 구성한 다양한 영태의 입력 양식에 데이터를 입력받아 지정된 페이지로 전송한다. 요소 세부내용 ● 속성 method ; 데이터 전송 방식을 설정한다. 내용 내용 ⊙ method="get" 전송 개체(경로)가 보인다. 데이터 전송 시 용량 제한이 있다. ⊙ method="post" 전송개체(경로)가 숨겨진다. 데이터 전송 시 용량의 제한이 없다. enctype ; 파일을 전송할 때 설정 하위요소 ◇ 1줄 텍스트 박스(text) 기본 박스 박스를 누르면 커서가 깜빡이며 데이터를 넣을 수 있다. ◇ 비밀번호 박스 비밀번호 박스 비밀번호를 작성하는 박스인데, 안에 데이터를 입력하면 눈에 보이지 않는다. ◇ ..