본문 바로가기

멀티캠퍼스 풀스택 과정/프론트엔드53

프론트엔드1-5. CSS 기초(선택자, position, background) CSS HTML로는 웹 사이트의 내용을 나열하고 CS로는 웹 문서의 디자인을 구성한다. 스타일의 형식 CSS의 기본 선택자 종류 형태 사용 예 전체 선택자 * * 태그 선택자 태그 h1 아이디 선택자 #아이디 #id 클래스 선택자 .클래스 .header 후손 선택자 선택자 선택자 header h1 자손 선택자 선택자 > 선택자 header > h1 문서 안에서 여러 번 반복할 스타일이라면 클래스 선택자로 정의(여러 번 표기 가능) 문서 안에서 한번만 사용한다면 id 선택자로 정의 후손 선택자와 자손 선택자 h1 h2 li1 li2 li3 자손 후손 div 태그를 기준으로 바로 한 단계 아래에 위치한 h1, h2, ul div 태그 아래에 위치한 모든 태그 h1, h2, ul, li 1. 속성 선택자 in.. 2022. 2. 5.
프론트엔드1-4. <div> HTML의 대표적인 공간 분할 태그: div 태그와 span 태그 div 블록 형식으로 공간 분할 span 인라인 형식으로 공간 분할 1 2 3 4 1 2 3 4 블록 형식 태그 인라인 형식 태그 , ~, , 목록, 테이블 , , , 글자형식태그, 입력양식태그 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지 2022. 2. 4.
프론트엔드1-3. 기본태그(form과 input, 그 외 태그들) [form 태그] 사용자로부터 입력을 받을 수 있는 HTML 입력 폼(form)을 정의할 때 사용한다. 폼과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들인데 이런 작업은 모두 데이터베이스를 기반으로 한다. 태그의 속성 method 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정한다. method에서 사용할 수 있는 속성값은 get과 post이다. get: 데이터를 256~4,096byte까지만 서버로 넘길 수 있다. 주소에 데이터를 직접 입력해 전달한다. post: 별도의 방법을 사용해 데이터를 해당 주소로 전달 name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정한다. action 태그 안의 내용을 처리해 줄 서버 프로그램을 지정한다. targe.. 2022. 2. 4.
프론트엔드1-2. 기본태그(글자,목록,테이블,미디어,MAP) [1. HTML 기본 태그] 구분 태그 설명 글자태그 h1~h6 제목 글자생성 p(단락), br(줄바꿈), hr(수평줄) 본문 생성 a 하이퍼링크 생성 b, i, small, sub, sup, ins, del 글자 모양 지정 목록태그 ul/ol, li 순서가 없는/있는 목록 생성, 목록 요소 생성 테이블태그 table, tr, th, td 표 생성 미디어태그 img, audio, video 이미지, 오디오, 비디오 삽입 [1-2 앵커태그] a태그는 anchor를 의미 하고 href는 hyper reference를 의미 출력글자 1. 특정 웹 페이지에 연결하기 네이버/br> 2. 같은 폴더에 있는 페이지에 연결하기 1) 상대주소 참조 - 상대주소 입력하는 법: cmd에 입력하는 것과 비슷함 ex) .. :.. 2022. 2. 4.
프론트엔드1-1. 웹서버, 아파치 톰캣, 환경변수 설정하기 [1. Apache Tomcat 설치하기] Apache Apache HTTP Server(아파치 소프트웨어 재단에서 만든 웹서버 프로그램) 클라이언트에서 요청하는 HTTP 요청을 처리하는 정적인 데이터를 처리하는 웹서버 웹서버(Web Server) 1) 웹 서버 소프트웨어와 웹 사이트의 구성 요소 파일을 저장하는 컴퓨터(HTML 문서, 이미지, CSS 스타일 시트 및 JavaScript파일) 2) 소프트웨어 보통 HTTP 서버를 의미함 URL(웹 주소) 및 HTTP(프로토콜 주소)를 이해하는 소프트웨어 저장하는 웹 사이트의 도메인 이름을 통해 액세스 할 수 있고 이러한 호스팅 된 웹 사이트의 콘텐츠를 최종 사용자의 장치로 전달한다. - HTTP란? 클라이언트와 서버가 웹에서 웹 페이지를 주고받기 위해 지.. 2022. 2. 4.