web9 CSS - Flexbox 플렉스 박스 Flexbox CSS3 의 최신 레이아웃 모델. Display 속성을 사용함. float 를 대체하며 더 효율적으로 사용. 가로 세로로 아이템들을 정렬. 아이템들의 순서나 비율등을 쉽게 적용. flex: 200px; 각 요소에 적어도 200px 너비가 지정되었다는 의미 flex-direction row , row-reverse, column, column-reverse HTML 삽입 미리보기할 수 없는 소스 flex-wrap wrap, wrap-reverse (자리가 없으면 내려감) nowrap flex-flow: row wrap; flex-direction, flex-wrap 으로 대체 flex-direction: row; flex-wrap: wrap; align-items 정렬 제어 align-ite.. 2022. 3. 31. CSS - 기본 정리 CSS /* */ 주석 초기화 코드 Eric Meyer’s Reset CSS HTML5 Doctor CSS Reset YUI reset CSS id 선택자 하나의 요소 #header{ ...} 값 클래스 .클래스 { .. } .container > .child-box li.select { color: red; } // li 태그중 class 속성이 select를 가지는 태그 // 선택자 * 모든 태그 선택 / CSS reset file에서 주로 사용 선택자 { 스타일속성 : 스타일 값; } 선1, 선2 ...{ margin:0; padding:0; } 속성 선택자 선택자[속성] 선택자[속성="값"][속성="값"] input[type="test"]{ background: red; } //input 태그 중.. 2022. 3. 30. HTML - 태그 Visual Code 태그 생성 간단 단축키 body + tap키 -> li*20 -> li 20개 생성 li>a*20 -> li속에 a 태그 20개 생성 (li>a)*20 -> li에 a 가 포함 nav#navId -> 아이디 생성 nav.navClass -> 클래스 생성 li.item$3*5 -> 클래스명 3부터 5개 공간태그 div block span (줄안)inline 일렬로 글자형태 text h1 h2 h3 h4 h5 제목글자 b 굵은 글자 강조 글자 노랑색 배경 i 기울어진 글자 small 작은 글자 sub 아래 달라붙 sup 위에 달라붙 ins 밑줄 글자 del 가운데에 줄 p 본문 글자(텍스트 단락) 2022. 3. 9. 장고(django) 블로그 글 검색(Search) - 파이썬 장고를 활용한 쉽고 빠른 웹 개발 프로그래밍 1. URLconf 코딩하기 blog/urls.py ... # /blog/search path('search/',views.SearchFormView.as_view(), name='search') # 검색 ] 2. HTML 폼 태그를 클래스로 정의 blog/form.py # HTML 폼 태그도 클래스로 정의 # 폼 클래스 표현 from django import forms class PostSearchForm(forms.Form): # 테이블의 모델 클래스를 정의하는 방법과 매우 유사 # CharField 필드는 TextInput 위젯으로 표현, label='Search Word' 는 폼 위젯 앞에 출력 되는 레이블 # 결국 HTML 요소 2022. 1. 23. [웹] 데이터 공유와 쿠키 범위, 생명주기 page < request < sessing < application 세션 범위 : 브라우저 당 생성되는 객체 ex) 하나의 차에서 로그인 하면 다른 탭을 열어도 여전히 로그인 상태 유지 세션 기술 - 세션 관련 정보를 웹 서버에 저장 쿠키 기술 - 세션 관련 정보를 클라이언트에 저장 데이터 공유 쿠키 예) // ... /scope?m=c&id=kim& ... @WebServlet("/scope") public class Controller extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {.. 2020. 5. 24. [웹] 서블릿 초기화 파라미터 유지 보수 관점에서 변경 가능한 파라미터를 DD(Deployment Descriptor) 읽어 들어 사용 서블릿 초기화 파라미터 : 해당 서블릿만 접근 가능 Context 초기화 파라미터는 웹 어플리케이션을 구성하는 모든 컴포넌트 Context 초기화 파라미터 adminEmail admin@admin.com String contextEmailcontextEmail= getServletContext getInitParametergetInitParameter("adminEmailadminEmail"); out .printf("contextEmailcontextEmail: % s", contextEmailcontextEmail); helloWorld com.web.servlet.HelloWorld .. 2020. 5. 22. [웹] JSP 파일에 서블릿 적용하기 1 적용시킬 클래스 준비 public class MemberRegister extends HttpServlet{ @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out = resp.getWriter(); String userId= req.getParameter("userid"); //name 에 맞게 가져온다. String pwd = req.getParameter("pwd"); String age = StringUtils.defaultIfEmpty(req.getParameter("age"), "0"); out.print.. 2020. 5. 20. [웹] 서블릿 시작하기 / 세팅 / NULL처리 웹 서버 구조 웹 클라이언트 - 요청 - >[WAS] {Server Application (servlet)} 동적 페이지 생성코드 실행환경(컨테이너) DB ] 웹 클라이언트 servlet,java -> 컴파일 : .clsss -> 등록 -> 서블릿 컨테이너 웹 클라이언트 서블릿 컨테이너 DB 이벤트 생명주기 메소드 실행 서블릿 초기화 init() 초기에 한번 요청/응답 service() doGet() doPost 스레드를 통해 동시에 서블릿 종료 destroy() 종료할때 한번 서블릿 클래스 -> (인스턴스화) -> 서블릿 객체 -> (초기화) -> 서블릿 -> service() -> get일경우 doGet() , post일 경우 doPost() 정적 페이지 ( 이미지 html css javascript.. 2020. 5. 19. 웹(web) 을 시작하다 / VS Code 파일 생성 HTML5 + CSS3 을 시작하게 됐습니다/~ 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 백엔드 스택 옵션 배울게 정말 많다,,, HTML5 CSS3( 부트스트랩 ) 자바스크립트 JS.. 2020. 3. 24. 이전 1 다음
