개발자 끄적끄적
글꼴, 바탕색, 자손 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*id가 mid인 요소의 문자색을 파란색으로*/
#mid{
color:#00f;
}
/* id가 irum인 요소의 문자색을 #f00으로*/
#irum{
color:#f00;
}
#phone{
color : #999;
}
/*class가 c1인 바탕색을 #ddd로*/
.c1{
background-color:#ddd;
}
/*class가 c2인 외곽선을 2px solid #aaa로 지정*/
.c2{
border:2px solid #aaa;
}
/*class가 c3인 곳에 안쪽 여백을 20px, 바탕색을 #444*/
.c3{
padding:20px;
background-color:#444;
}
/* id가 phone인 요소의 문자색을 #999로*/
</style>
</head>
<body>
<h1>SELECTOR</h1>
<div id='mid' class='c1'>MID</div>
<div id='irum' class='c2'>hong gil dong</div>
<div id='phone' class='c3'>010-1111-1111</div>
</body>
</html>
--------------------------------------------------------------
div.c1과 .c1의 차이점
div.c1==div들 중에서 class가 c1인 요소
.c1==class가 c1인요소
ex)
<span class='c1'>이라는 태그가 있고 -'x'라 가정
<div class='c1'>이라는 태그가 있다고 가정 할 때 -'y'라 가정
css정의는
div.c1{color : red;} == div등 중 class가 c1인 요소들이 적용 대상자 따라서 x는 적용하지 않으며, y는 적용
c1.{font-weigt : border;} == class가 c1인 요소들이 적용 대상자 따라서 x, y함께 적용
id속성과 class속성의 차이점
- id는이름이고 class는 별명이다(책 내용, 실제로 그러진 않음) 왜냐면 id는 한 개만 존재 할 수 있기 때문에
class는 동일한 class명으로 한 개 이상 존재 한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*id가 mid인 요소의 문자색을 파란색으로*/
#mid{
color:#00f;
}
/* id가 irum인 요소의 문자색을 #f00으로*/
#irum{
color:#f00;
}
#phone{
color : #999;
}
/*class가 c1인 바탕색을 #ddd로*/
.c1{
background-color:#ddd;
}
/*class가 c2인 외곽선을 2px solid #aaa로 지정*/
.c2{
border:2px solid #aaa;
}
/*class가 c3인 곳에 안쪽 여백을 20px, 바탕색을 #444*/
.c3{
padding:20px;
background-color:#444;
}
.other{
font-family:궁서체;
font-size:30px;
}
/* id가 phone인 요소의 문자색을 #999로*/
</style>
</head>
<body>
<h1>SELECTOR</h1>
<div id='mid' class='c1 other'>MID</div>
<div id='irum' class='c2 other'>hong gil dong</div>
<div id='phone' class='c3 other'>010-1111-1111</div>
</body>
</html>
---------------------------------------------
이런식으로 class를 추가해서 사용 할 수 있다 (.other)
html문서는 DOM구조로 표현되고 저장된다
DOM : Document Object Model
<html>
<head/>
<body>
<p/>
<h1/>
</header>
</body>
</html>
------------------
html(Root 최상위 요소)
1. head
2. body
a.header
-p(sibling 자손)
-h1(sibling)
html : 자식이 head, body를 갖고 있다
body : 자식은 header를 갖고 있다
header : 자식은 p,h1을 갖고 있다
body의 후손 : header, p, h1이 모두 포함한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/inheri</title>
<style>
header{
color : #f00;
}
</style>
</head>
<body>
<h1>게시판</h1>
<p>자유 게시판</p>
</body>
</html>
결과 : 게시판과 자유게시판 글자 색깔이 빨간색(#f00)으로 출력된다
왜냐하면 header의 후손(p, h1)까지 상속되기 때문에
----------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/inheri</title>
<style>
header{
color : #f00;
}
h1{
font-family:궁서체;
}
</style>
</head>
<body>
<h1>게시판</h1>
<p>자유 게시판</p>
</body>
</html>
결과 : 게시판만 궁서체로 변경된다
-------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/inheri</title>
<style>
header{
color : #f00;
}
.c1{
font-famil:궁서체;
}
</style>
</head>
<body>
<h1 class='c1'>게시판</h1>
<p class='c1'>자유 게시판</p>
</body>
</html>
class=.c1에 있는 요소가 정의된다
--------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/inheri</title>
<style>
header{
color : #f00;
}
h1.c1{
font-famil:궁서체;
}
</style>
</head>
<body>
<h1 class='c1'>게시판</h1>
<p class='c1'>자유 게시판</p>
</body>
</html>
class=h1.c1에 있는 요소가 정의된다
------------------------------------------------
html의 주석 : <!-- -->
css의 주석 : /* */
단위
% : 상대(가변) 크기 (ex)width:50%;)
px : 고정 크기 (ex)width:50px;)
----------------------시험 공지---------------------
<시험 주소>
https://githrd.cafe24.com/
[평가]
- usecase
- 클래스 다이어그램
- 시퀀스 다이어그램
방법론
- 객체지향 방법
- 정보공학 개발 방법론
- CBD 개발 방법론
- 애자일
- 폭포수 모델
-------------------------------시험-----------------------
1. 메모리 크기
eclipse->window->preference->general->show heap status->하단에 메모리 크기가 나온다
: 367M of 636M
2. 드라이버별 용량 크기
eclipse파일->속성->크기를 확인
:230KB
3. 운영체제의 종류
맥오에스(macOS), 윈도우즈(Windows), 리눅스(Linux) 등의 여러 운영체제에서 실행한다
:windows
자바연결
자바를 연동하기 위해서는 JDBC가 필요하며 기본적으로 오라클을 설치하면 JDBC파일이 저장되어있다
preference->Jave->installed JREs->리스트 확인(등록되지 않은 경우 add로 추가)->Java설치된 폴더 경로 선택->jdk등록된 것 확인
연결 된 자바버전
프로젝트 목록->properties->Java Compiler->자바 버전 확인
톰캣 서버 연결 확인
window->preferences->Server->Runtime Environments->Add->설치한 톰캣 버전을 선택->Brower->톰캣 경로지정->JRE부분에서 현재 자바 버전을 선택
톰캣 연결된 서버 버전
cmd->tomcat이 설치되어 있는 경로의 bin으로 이동->cmd창에 bin의 경로 검색하여 명령어 입력
한글 인코딩 변경 요소 및 방법
Windows->Preferences->General->Workspace->Workspace 설정창에서 Text file encoding 항목을 찾아 원하는 인코딩 방식(UTF-8)으로 변경
이클립스 개발툴 종류
Elipse IDE for Java Developer
이클립스 버전 확인
eclipse실행->help->about eclipse IDE->버전, 종류 확인
폭포수 모델의 특징
SW 개발을 단계적, 순차적, 체계적으로 접근한다.
각 단계를 철저하게 완료한 뒤 다음 단계를 진행하는 순차적인 특징을 가지고 있다. 개발 방법과 관리 방법론을 연계하여 효과적인 생산성 확보 여부를 판단하며, 각 단계 종료 시 검증 후 다음 단계로 진행하는 단계별 검증을 한다.
프로젝트 진행과정에 대해서 관리가 용이하지만 목표 시스템이 후반에 가서야 구체화 되므로 중요한 문제점이 프로젝트 후반부에 발견될 수 있다.
방명록에 해당하는 프로젝트를 진행하려 할 때 Actor와 Usecase를 구분하여 서술하고 Usecase를 그려 첨부하시오.
Actor : 시스템의 외부에 있고 시스템과 상호작용을 하는 사람(시스템의 기능을 사용하는 사람), 시스템(시스템에 정보를 제공하는 또 다른 시스템)을 말한다.
Usecase : 사용자 입장에서 바라본 시스템의 기능이며, 시스템이 액터에게 제공해야 하는 기능으로 시스템의 요구사항을 나타낸다.
---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css_exam/font</title>
<style>
/* 선택자{}*/
h1{
color:#ff0000;
font-family:궁서체;
}
div{
padding:10px;
border:2px solid #aaa;
width:200px;
height:80px;
}
.c1{
font-size:4em;
}
.c2{
font-style:italic; font-size:20pt
}
.c3{
color:#ff0000;
font-family:궁서체;
font-size:30pt;
}
.c4{
font-family:모른체, 아는체, 궁서체;
}
.c5{
font-size:3em;
/*font-weigh-normal;*/
font-weight:bold;
}
</style>
</head>
<body>
<h1>font</h1>
<div class='c1 other'>홍길동</div>
<div class='c2 other'>일지매</div>
<div class='c3 other'>춘향이</div>
<div class='c4 other'>향단이</div>
<div class='c5 other'>임꺽정</div>
</body>
</html>
1. h1태그의 글자를 빨간색의 궁서체로 변경
2. 모든 div에 안쪽여백(padding), 외각선을 적당히(border)
3. 모든 div에 넓이X높이를 200X80으로
4. 클래스 c1 : 글자크기를 4em으로(em은 정수도 가능 em=1.5)
5. 클래스 c2 : 글자를 20pt의 기울림체(italic)로
6. 클래스 c3 : 빨간 궁서체로 글자 크기는 30pt로
7. 클래스 c4 : 글꼴을 모른 체 아는 체 명조체로 지정한 후 관찰(모른체가 없으면 아는체로 아는체가 없으면 궁서체로)->결과는 '궁서체'로 출력
8. 클래스 c5 : 문자 굵기를 nomal, bold, 800으로 수정하면서 관찰
*단, html+css작업은 수작업을 하지 않으므로 태그를 하나 하나 모두 암기할 필요는 없다
대신 툴 없이 코드를 이해 할 수 있어야한다
------------------------------------------------------------------------------
'HTML, CSS' 카테고리의 다른 글
| Inline block mode, 배경화면 이미지 속성 (0) | 2023.03.04 |
|---|---|
| input type, 테이블 병합 (0) | 2023.03.04 |
| 폼태그, 목록태그 (1) | 2023.03.04 |