본문 바로가기

728x90
반응형

전체 글

(265)
[HTML] 양식(2) - input ▶ 사용자에게 입력 받을 데이터의 양식. 속성 autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지의 여부를 설정. - on, off 값 지정. 기본값: on. - cf. 에서 autocomplete 속성 설정 시 범위 내의 모든 데이터 양식에 설정되는 데 비해 의 경우 해당 요소 하나에 대해서만 설정됨. autofocus: 페이지가 load될 때 특정한 양식 부분에 자동으로 포커스 처리 여부 설정. - boolean값. - focus는 한 곳만 가능하기 때문에 문서 내 고유해야 함. checked: 양식이 선택되었음을 표시. - boolean값. - type 속성의 값이 radio, checkbox일 경우만 해당. readonly: 수정 불가한 읽기 전용 설정. - b..
[HTML] 양식(1) - form ▶ 웹 서버에 정보를 제출하기 위한 양식의 범위를 정의. - 아이디와 비밀번호를 입력 및 로그인 상태를 유지할 것인지 여부를 체크하고 모든 입력이 끝났다는 의사 표시로 로그인 버튼을 클릭해 해당 정보를 브라우저에 전달함. - 화면에는 여러 양식이 존재하는데 은 이러한 입력 양식들을 wrapping함(입력 양식의 범위를 지정). - 이후 양식의 정보를 특정 페이지나 주소로 전송하는 데 사용됨. 은 다른 을 자식 요소로 포함할 수 없음. 속성 - action : 전송한 정보를 처리할 웹페이지의 URL을 명시. 은 사용자에게 정보를 입력 받고 그것을 다시 웹 서버로 제출함. 해당 정보가 제출될 페이지가 action의 URL. - autocomplete : 사용자가 이전에 입력했던 값으로 자동 완성 기능을 사용..
[HTML] 표(2) - caption, colgroup, col, thead, tbody, tfoot ※ 이전글인 HTML 표(1)에서의 관련 태그들은 표를 만들기 위한 필수적인 태그에 해당한다. - https://developing-move.tistory.com/50?category=884479 HTML 표(1) - table, tr, th, td ▶ , , , 표의 기본 뼈대를 잡는 데 사용되는 태그. 데이터 표( )의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row: tr, Table Header: th, Table Data: td) : 표를 만들 때 사용. : 행/줄을 만듦. , :.. developing-move.tistory.com 이 글에서는 표를 보조하는 역할로 활용되는 태그들을 소개하려 한다. ▶ 표의 제목을 설정. 내에서 가장 먼저 작성되어야 함. 열리는 ..
[HTML] 표(1) - table, tr, th, td ▶ , , , 표의 기본 뼈대를 잡는 데 사용되는 태그. 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row: tr, Table Header: th, Table Data: td) : 표를 만들 때 사용. : 행/줄을 만듦. , : 열/칸을 만듦. - 일반적으로 를 사용하고 제목의 역할을 담당하는 경우 를 사용함. diplay 속성 - table { display: table; } / tr { display: table-row; } / th, td { display: table-cell; } - 일반적인 block 요소나 inline 요소의 방식으로는 표를 만들 수 없기 때문에 브라우저 내부에서 table이라는 display 속성을 통해 만들 수 있다고 선언되어 ..
[HTML] <noscript> ▶ 스크립트를 지원하지 않는 환경에서 삽입할 HTML을 정의. - 자바스크립트가 동작하지 않는 환경에서는 이러한 내용을 실행해달라는 요청. 지금은 흔치 않지만 예전에는 자바스크립트가 동작하지 않는 브라우저도 있었음. cf. 의 sandbox 속성을 통해 자바스크립트 환경을 막는 것도 가능. - 위의 예시에서는 자바스크립트가 실행 가능한 환경이기 때문에 내의 텍스트는 실행되지 않음. - noscript.html 추가 후 으로 기존의 index.html 가져옴. - 이후 sandbox 속성을 추가해 자바스크립트가 동작할 수 없는 환경 구성 시 내의 텍스트가 노출됨. ∴ 를 통해 자바스크립트가 실행되지 못하는 환경에서 화면상에 출력할 내용을 에 지정하는 것.
[HTML] <script> ▶ 스크립트 코드를 문서에 포함하거나 외부 스크립트 참조. - Javascript 내용을 삽입하거나 외부의 스크립트를 src 속성을 통해 가져오는 경우 사용. - cf. css를 가져올 때는 사용. 속성 async : 스크립트의 비동기적(Asynchronously) 실행 여부를 설정. boolean값. 사용 시 src 속성 필수. defer : 문서 파싱(구문 분석) 후 작동 여부 지정. boolean값. 사용 시 src 속성 필수. ※ 스크립트의 실행 시점 제어 - 자바스크립트 실행 시 HTML에 있는 내용을 자바스크립트로 찾아 실행해야 하는 경우가 있는데, 이때 자바스크립트의 코드가 언제 동작하느냐에 따라 HTML의 내용을 제대로 실행할 수도, 그렇지 않을 수도 있음. - 위 실행 화면에서의 에러는 ..
[node] 템플릿 상속 템플릿 상속은 이전 포스트인 nunjucks와 이어진다. 지난번에 생성한 template 하위 요소에 layout 폴더를 생성하고 base.html 파일을 생성한다. 생성한 파일에 아래와 같이 코딩한다. {% block content %}{% endblock %} 위의 이미지의 {} 안에 수정할 products.html의 파일의 내용이 들어간다. 완료 되었으면 아래의 소스코드를 products.html 파일에 넣어준다. {% set title = "관리자 리스트" %} {{ message }} {% extends "layout/base.html" %} {% block content -%} 제목 작성일 삭제 제품 이름 2020-03-07 삭제 작성하기 {% endblock %} 이렇게 하면 jQuery나 ..
[node] View Engine - Nunjucks 관련 게시글 nunjuck macro developing-move.tistory.com/88?category=883220 [node] nunjucks macro base.html에 아래의 소스를 추가한다. {{ title }} List Write {% block content %}{% endblock %} 이 후 http://localhost:3000/admin/products/ (자신이 지정한 y와 같이 자신이 지정한 포트의.. developing-move.tistory.com vscode tempate 폴더 생성 이때 템플릿 구조도 url의 구조를 따라가야 한다. template 라는 폴더를 만들고 그 하위 폴더 admin을 생성한 후 admin 폴더에 products.html 이라는 파일을 생성한다..

728x90
반응형