목록HTML, CSS (11)
개발자 끄적끄적
[미션] index.jsp 페이지의 layout을 grid 속성을 사용하여 배치하시오 href='./css/index4.css?version= box-sizing은 padding 속성때문에 설정해야한다 position:absolute, bottom:5px, right:3px->web browser를 기준(0,0)으로 display:block 설정O->CSS 앵커태그에 가지 않고 근처에 가도 손가락 모양으로 바뀐다(앵커태그를 감싸는 효과) display:block 설정X->CSS 앵커태그에 가야 바뀐다 (책에 없는 내용) [미션2] html, css와 관련된 컨텐츠를 통합 페이지에 표시 할 때 불필요한 css가 적용되는 파일을 찾아 원인 분석 및 조치 ------------------------------..
- 속성 - flex : Block 특성의 Flex Container를 정의 - inline-flex : Inline 특성의 Flex Container를 정의 : Flex Items의 주 축(main-axis)을 설정 - row : Items를 수평축(왼쪽에서 오른쪽으로)으로 표시 - row-reverse : Items를 row의 반대 축으로 표시 - column : Items를 수직축(위에서 아래로)으로 표시 - column-reverse : Items를 column의 반대 축으로 표시 : Flex Items의 여러 줄 묶음(줄 바꿈) 설정 - nowrap : 모든 요소들을 한 줄에 정렬 - wrap : 요소들을 여러 줄에 걸쳐 정렬 - wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬 ..
CSS 선택자 1) 태그{ }=>p{ } 2) 클래스명{ }=>.here{ } 3) 아이디명{ }=>#here{ } 4) 상위선택자>자손선택자{ }==>div>span{ } ex)(기준) hong -1(깊이가 1단계) gil -2(깊이가 1단계) -3(깊이가 1단계) dong -4(깊이가 2단계) - div태그 안에 자식span은 선택이 된다(1, 2)->div>span{ }/3도 선택가능 - div태그에서 4은 후손이기 때문에 적용이 되지 않는다=>p>span{ }은 가능 5) 상위선택자 후손선택자{ }==>div span{ }=>깊이가 1단계 이상 6) 선택자+선택자{ }==>div+span{ } : div태그 바로 뒤에 있는 span=>1 7) 선택자~선택자{ }==>div~span{ } : div..
동적삽입 - 오늘 할 일 1) index.jsp 파일 추가 생성 2) html, css_exam에 들어 있는 파일들을 부메뉴 형태로 제작 3) 반응형 웹 구현 - 서버 랭귀지(page language)는 java로 이루어져 있다 - contentType의 유형(=mine유형)은 html로 만들어진 text이다 - 문자들은 UTF-8로 구성되어있다 - pageEncoding은 UTF-8으로 구성되어있다 파라메터(parameter) - 어떤 도메인(jotc.kr)이 있을 때, 파라메터는 '?'로 시작한다 ex) ?p1=hong&p2=111 - 'p1'=파라메터변수 - 'hong, 1111'=파라메터 변수값(파라메터 값) - '?'=파라메터의 시작을 의미 - '&'=파라메터의 연결을 의미 변수=값을 담을 수 ..
.main>div{ [border:4px solid #00f; width:400px; height:200px; margin:20px;] } ----- C! C2 C3 C4 C5 - main이라는 class 안에 있는 자식 div에 [...]가 적용된다->class=c1,c2,c3,c4,c5가 작용 - .abs>div : class가 abs안에 있는 자식 div가 적용된다(단, 손자는 아님 다시 지정해줘야한다) ------------------------------------------------------------------------ box-shadow:20px 40px 0 #77f; - x축 그림자의 길이->20px - y축 그림자의 길이->40px - 퍼진 정도->0 - 그림자의 색깔->#77f ..
background-image 고양이 ------------------- - background-image:url(../images/pink.jpg);->이미지가 반복된다(이게 기본속성) - background-repeat:no-repeat;->이미지가 반복되지 않고 1개반 이미지 삽입(position은 (0,0)에 위치한다) - background-position:right(bottom/left/top/center);->이미지 위치시키기 - backgorund-position: right(or left);->중앙의 right, left로 위치한다 - background-postion:50px 100px;->x축으로 50px만큼, y축으로 100px만큼 이동해서 위치시킨다 - background-size..
SELECTOR MID hong gil dong 010-1111-1111 -------------------------------------------------------------- div.c1과 .c1의 차이점 div.c1==div들 중에서 class가 c1인 요소 .c1==class가 c1인요소 ex) 이라는 태그가 있고 -'x'라 가정 이라는 태그가 있다고 가정 할 때 -'y'라 가정 css정의는 div.c1{color : red;} == div등 중 class가 c1인 요소들이 적용 대상자 따라서 x는 적용하지 않으며, y는 적용 c1.{font-weigt : border;} == class가 c1인 요소들이 적용 대상자 따라서 x, y함께 적용 id속성과 class속성의 차이점 - id는이름..
[공지] 2/15(화) - 요구사항 확인(평가) : 14:30~15:20 - 미대면 상담(설문지) - 개인톡으로 답변 * 모두의 HTML...(PDF)다운 용량은 100MG(흑백으로) - 타인에게 배포 금지(불법) [복습] form태그 - 역할 : 서버에게 값을 전달하기 위해 쓰인다 - 특징 : 하나의 페이지에서 여러 개 사용 가능하지만 중첩 사용은 불가(form 태그 안에 form 추가가 불가) - method a. post : 전달 값이 보이지 않으며 길이 제한이 없다 b. get : 전달 값이 보이며 길이 제한이 있다 - n개 중에 n개를 선택할 때 name값이 동일하면 그룹이 생성 - 서버에 값이 전달 될 때는 체크된 요소만 전달 - checked 속성을 사용하여 기본적으로 체크되도록 한다 ex)..
*파일 가져오는 방법 - import->workspace 경로 찾아가기->나 같은 경우 'aaa'->반드시 프로젝트 목록에 내가 원하는 프로젝트가 보여야한다 (if 목록이 안나온다면, 폴더 잘못 선택 or 프로젝트가 깨진경우(치명적인 경우)) - 프로젝트를 USB, 외장HDD(SSD)에 workspace를 지정(USB는 비추천) *웨장하드에 워크스페이스 지정방법 - Switch Workspace->other->새로운 폴더를 만든다('my workspace'폴더명은 가능하면 영어로)->재부팅->my workspace폴더에 프로젝트 aaa복사 import project->General->existing projects into workspace->select root directory->my workspac..
build path->project facets 1.8버전이면 3.0으로 선택 *Null Point Except-Java에서 가장 많이 차지하는 오류(70%~80%) 정의 : NullPointerException is a runtime exception in Java that occurs when a variable is accessed which is not pointing to any object and refers to nothing or null. *Runtime Exception ->실행 중 발생, 시스템 환경적이나 인풋 값이 잘못된 경우, 프로그래머가 잡아내가 위한 조건등에 부합할 때 발생 html 기본골격을 지키지 않고 "이해선"이라고 쓰면 브라우저에 표시는 되지면 글자가 깨짐(비정상->웹 ..
tomcat은 window에서 설치불가 내 컴퓨터의 ip주소 확인 방법 >cmd>ipconfig실행 프로그래밍 파일 삭제 ->설정 앱에서 삭제->클릭->삭제->제거 학생 관리 프로그램 1)요구조건 분석(마인드 맵) 2) 4대 기능 1.Create(입력) 2.Read(조회) 3.Update(수정) 4.Delete(삭제) newproject-dynamic web project select a wizard->web->dynamic web project dynamic web module version(4.0) X표시는 무시 New-html-파일이름my_info 학생관리-usecase 사람,기계,프로세스 기능function:입력,수정,삭제,조회 엑터actor(사용자,누가 사용하는가):학생,관리자,프린터,스캐너 레..