분류 전체보기 (245) 썸네일형 리스트형 [CSS] 선언 방식 ▶ CSS 선언 방식 1. 인라인(Inline) 방식 - HTML 요소(태그)의 style 속성에 직접 작성하는 방식. - 직접 작성하기 때문에 선택자를 작성할 필요가 없음. - 사용 예시 /* HTML */ hello - 반복적인 사용이 많은 경우나 유지보수 등에서 위와 같이 직접 입력하는 방식은 좋은 방법이 되지 못함. - 사용 빈도를 떠나 직접 입력하는 행위는 지양하는 것이 좋음. 2. 내장(embedded) 방식 - HTML 문서의 안에 작성하는 방식. - 사용 예시 /* HTML */ hello 3. 링크(link) 방식. - HTML의 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식. - 사용 예시 /* HTML */ hello /* main.css */ div{ color:red; f.. [CSS] 기본 문법 ▶ CSS 기본 문법 - 문법 형식 선택자{속성: 속성값; 속성: 속성값;} - 먼저, HTML의 CSS를 연결할 때 사용하는 선택자를 작성. - 중괄호를 열고 닫은 범위 내에 특정한 CSS 명령인 속성과 그 속성에 해당하는 실질적인 값을 적음. - 속성과 값은 하나의 세트. - 하지만 위의 예시와 같이 옆으로 나열하여 작성하는 방식은 코드가 많아지면 가독성이 떨어짐. - 일부 경우를 제외하고는 아래와 같이 작성. 선택자{ 속성: 속성값; 속성: 속성값; } - 선택자(Selector)의 역할 - 속성과 값을 지정할 대상을 검색. - HTML의 특정한 부분을 검색해 연결해 줌. - 속성(property)과 값(value)의 역할 - 검색된 대상에 지정될 CSS 명령. - 예를 들어 글자색을 빨간색으로 하.. [HTML] 특수기호 - HTML Entities ▶ HTML Entities - 화면상에 'Hello world!'라는 문구를 출력하고 싶은 상황을 가정. - 이때 Hello와 world! 사이에 띄어쓰기를 여러 개 넣고 싶다면? - HTML에서 띄어쓰기는 여러 번 입력되더라도 화면상에는 한 번만 압축되어 출력됨. - 는 HTML의 특수기호로 한 번의 띄어쓰기를 의미함. - 원하는 만큼의 띄어쓰기가 들어갈 부분에 를 추가하여 처리할 수 있음. - 가 하나의 제목으로 출력되기 원하는 상황을 가정. - 가장 왼쪽 이미지의 코드는 화면상에 아무것도 출력되지 않음. 가 있는 부분의 코드가 HTML이 읽혀지는 실질적인 코드로 작성되어 있기 때문. - 꺽쇠괄호()가 열리고 닫히는 부분을 포함시켜 화면상에 출력시키고 싶다면 HTML Entities로 새롭게 작성 .. [HTML] 주석 - 주석 처리 시 브라우저는 해당 부분의 코드를 해석하지 않으며, 따라서 화면에 출력되지 않음. - 화면에 출력되지 않는 영역을 주석 또는 메모 처리할 수 있음. - 주석 처리를 담당하는 특수기호는 HTML, CSS, JS 등에서 모두 상이하게 나타남. - 하지만 주석 처리에 대한 단축키는 거의 모든 에디터에서 동일하게 사용. - 주석 처리할 영역을 드래그한 후 Ctrl+/(Windows) 또는 Cmd+/(macOS) [node] 정적파일 우선 이미지를 담아둘 폴더를 하나 생성한다. 그 다음 app.js에 아래의 소스코드를 추가한다. app.use('/uploads', express.static('uploads')); 완료 후 해당 폴더의 파일명으로 url에 접근하면 이미지를 확인할 수 있다. 출처 : 본 포스트는 패스트캠퍼스의 Node 웹 프로그래밍 올인원 패키지 Online의 박준영 강사님의 강의를 보고 직접 정리한 내용입니다. [node] form(body-parser) body-parser란 form에서 넘어 오는 데이터를 body-parser라는 미들웨어로 처리하는 것을 말한다. 우선 admin.js에 아래 소스를 추가한다. router.get('/products/write', (req, res) => { res.render('admin/write.html') }); 추가하였으면 template/admin 폴더에 write.html 파일을 새로 생성하고 아래의 소스 코드를 넣어준다. {% set title = "제품 등록" %} {% extends "layout/base.html" %} {% block content -%} 제품명 가격 설명 작성하기 {% endblock %} 여기까지가 body-parser를 테스트할 기본적인 준비다. 이제 해당 포트의 해당 url에.. [node] 미들웨어(middleWare) 미들웨어는 쉽게 말해 해당 url에 접근할 때 중간 요청을 가로채는 역할을 한다고 생각하면 된다. 테스트를 진행하기 전에 cmd 창에서 logger 확인을 위해 morgan을 intall한 후에 시작한다. 설치가 완료되었으면 app.js로 들어와 아래 소스 코드를 추가한다. const logger = require('morgan') // morgan 호출 app.use(logger('div')); 추가가 완료되었으면 cmd 창에서 app.js를 실행하고 해당 포트의 url에 접속할 때마다 아래와 같이 로그가 확인된다. 기본 세팅이 완료되었고 이제 미들웨어를 만들기 위해 admin.js로 돌아간다. 미들웨어는 3개의 인자(request, response, next) 를 갖는다. admin.js에 아래와 같.. [HTML] 전역 속성(7) - tabindex ▶ tabindex 속성 Tab키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 숫자로 지정. 대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정됨. - 대화형 콘텐츠? 사용자와의 상호작용을 위해 특별하게 설계된 요소. ex) , , ... - 대화형 콘텐츠: developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%EB%8C%80%ED%99%94%ED%98%95_%EC%BD%98%ED%85%90%EC%B8%A0 비대화형 콘텐츠에도 tabindex="0"을 지정하면 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있음. tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능. - 탭 이동.. 이전 1 ··· 20 21 22 23 24 25 26 ··· 31 다음
