본문 바로가기

멀티캠퍼스 풀스택 과정170

프론트엔드1-7. CSS 외부 스타일 시트 적용하기(Link와 @import) 스타일 시트 인라인 스타일 스타일 시트(CSS)를 사용하지 않고 스타일을 적용할 대상에 직접 표시 스타일을 적용하고 싶은 태그에 style 속성을 사용해 style=”속성:속성 값”; 형태로 스타일 적용 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것(html문서의 사이에 넣고, 여러 를 삽입할 수 있다. 와 함께 사용하는 속성 href 연결할 곳의 주소(절대주소, 상대주소 모두 가능) rel 현재 문서와 연결 문서의 관계 표시(stylesheet, alternate, author, help, license, search 등) type 연결 문서의 MIME 유형(href 속성이 설정될 때만 사용함 css 파일-> text/css, js 파일 -> text/javascript, xm.. 2022. 2. 5.
프론트엔드1-6. CSS 메뉴 만들기 실습(가상클래스, text-decoration) 메뉴 예쁘게 만들어보기 1. ul과 li생성. img넣기 TV 여행/맛집 푸드 만화/웹툰 2. margin padding 0으로 하고 색 넣기 TV 여행/맛집 푸드 만화/웹툰 3. 메뉴를 가로로 쭉 늘이고 정렬시키고 li의 점 없애기 4. 글자를 가운데 위치시키고 글자 크기를 키우기 #menu>li { background-color:#EFEFEF; float:left; list-style-type:none; width:25%; height:40px; text-align:center; line-height:40px; /*inlinebox의 높이를 설정*/ font-size: 1.3em; /*px, pt(point),%, mm, cm, in(inch), em..(16px*n)*/ } 가상 클래스 사용자 동작.. 2022. 2. 5.
프론트엔드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.