부루의 코드 갤러리

2013년 10월 2일 수요일

[10주차 3일] CSS - position

- position: absolute;
: absolute 조상의 좌표(없다면 body)를 기준으로 삼는다.

- position: fixed;
: 브라우저의 내용창 좌표를 기준으로 삼는다.

- position: relative;
left: 100px;
: float처럼 띄우지 않고 위치를 이동할 수 있음.

2013년 10월 1일 화요일

[10주차 3일] CSS - Color

- backgroud-color: rgb(80%, 60%, 40%);

- backgroud-color: rgb(204, 40, 0);

- backgroud-color: #cd4f3a;

- backgroud-color: #df7;
== backgroud-color: #ddff77;

- font-family : Verda, Geneva, Arial, sans-serif;

Verada를 찾아보고 없으면 Geneva를 찾고 없으면 Arial을 찾고 없으면 sans_serif로 설정한다.

첫번째는 윈도우용
두번째는 맥or리눅스용 으로 설정하는것이 적합하다.

- Sans-serif (고딕)
: 끝이 깔끔한것
ex) 굴림, 맑은고딕

- serif (명조)
: 끝이 꺽여있음
ex) 바탕, 궁서

- monospace
: 가로 간격이 일정한것

- 판타지 패밀리
: 희안한 글씨체들

- 사이즈 지정
px: 픽셀
%: 퍼센트
em: 몇배

가급적 지정된 사이즈를 사용하는것을 추천한다.
기본사이즈를 small으로 추천 한다.

body에 기본 사이즈를 지정 하고 상대사이즈로 설정하는것을 추천 한다.

[10주차 3일] CSS

/*
selector {
스타일명 : 값;
스타일명 : 값;
}

1. selector
- 스타일을 적용해야할 대상을 가르킴

1) 태그명
p {}
h1, h2 {...} // h1과 h2

2) 스타일 분류명(스타일 클래스명)
.클래스명 {...}

[html]
<div class="header">...</div>
<div class="content">...</div>
<span class="artist">홍길동</span>, 가을인가?, <span class="ent">비트음반</span>
<span class="artist">임꺽정</span>, 오호라, <span class="ent">강남음반</span>
<div class="tail">...</div>

[css]
.header {....}
.content {....}
.tail {....}
.artist {....}

3) 태그 아이디
[html]
<div id="header">...</div>
<div id="content">...</div>
<span class="artist">홍길동</span>, 가을인가?, <span class="ent">비트음반</span>
<span class="artist">임꺽정</span>, 오호라, <span class="ent">강남음반</span>
<div id="tail">...</div>

[css]
#header {....}
#content {....}
#tail {....}
.artist {....}

4) 여러개의 태그 지정
h1, h2, p {...}

5) 자식 태그 지정
부모 > 자식 {....}

[html]
<div>
<p>
<a>aaa</a>
</p>
<a>bbb</a>
<div>

div > a {,,,,}

6) 자속태그 지정
조상 자존 {...}

[html]
<div>
<p>
<a>aaa</a>
</p>
<a>bbb</a>
<div>

div a {,,,,}

7) 자식태그와 클래스의 합작
태그.클래스 > 자식태그 {...}

ex) div.c1 > a {...}

8) 자손태그와 클래스의 합작
조상태그.클래스 자손태그 {...}
ex) div.c1 a {...}

[html]
<div>
<a>aaa</a>
</div>
<div class="c1">
<a>bbb</a>
<p>
<a>okok</a>
</p>
</div>
<div class="c2">
<a>ccc</a>
</div>

*문제.
div#okok a {...}

2. pseudo-selector (별정 셀렉터)
div:first-child {...}

[html]
<body>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
</body>

.c1 a {...}

3. 스타일 값 설정 방법
1) border: 1px; // 12시,3시,6시,9시(top, right, bottom, left)
2) border: 10px, 20px; // top/bottom, right/left
3) border: 10px, 20px, 30px; // top, right/left, bottom
4) border: 10px, 20px, 30px, 40px; // top, right, bottom, left

5) border-top: 1px; // top

6) border-width: 1px;
border-color: red;
border-style: sold;

border: 1px red solid;
border: red 1px solid;
border: solid 1px red;

4. 스타일의 상속
- 스타일의 일부는 자식 앨리먼트에 상속된다.(메뉴얼 확인 필요)

body {
font-size: 10px;
}

[html]
<body>
<div>
<p>...</p>
<p>...</p>
<p>...</p>
<p>
....
<a>...</a>
</p>
</div>
...
...
</body>

부루의 코드 갤러리

2013년 10월 2일 수요일

[10주차 3일] CSS - position

2013년 10월 1일 화요일

[10주차 3일] CSS - Color

[10주차 3일] CSS - Font

[10주차 3일] CSS

[10주차 3일] URL

[10주차 3일] HTML

[참고] @SessionAttributes 와 @ModelAttribute 참고 블로그