23.02.10(글자간격, border, text-shadow, float, a href="#", overflow)

😀26챕터 display로 해보기 

😀테이블 정의서 만들어보기 

어쩔때는 자식 안거치고 ??? ==> 상관없음

왜 이미지는 인라인으로 주는거임?

==> 바로 주는게 좋음 뒷배경같은걸 css에 주고 사진, 오디오, 비디오 이런건 바로 줘도됨

창이름 줘야 ==> 새 창이 뜸

./ ==> 자기 파일위치

 

relative : 본인이 걸리는거다 그래서 자연스럽게 이동

 

 

line-height: 40px;  /* 행간 설정 */

letter-spacing: -3px; /* 자간 설정 */

word-spacing: 5px; /* 단어 사이(띄어쓰기) 간격 설정 */

 

<!-- 
border 속성
- 요소의 테두리 선을 지정할 때 사용하는 속성
- 형식) border: 선의두께 선의종류 선의색상;
- 개별적으로 사용하는 방법
  * border-width : 테두리 선의 두께
  * border-style : 테두리 선의 종류
  * border-color : 테두리 선의 색상
- 사용법
  * border-style(테두리 선의 종류)
    - none : 테두리 선 없음
    - hidden : 테두리 선 없음
    - solid : 실선, 단선(일반적인 선)
    - dotted : 점선(....)
    - dashed : 파선(----)
    - double : 두줄선(이중선)
    - groove : 홈이 파여 있는 선
    - ridge : 솟은 모양의 선(groove의 반대)
    - inset : 요소 전체가 들어간 선
    - outset : 요소 전체가 나온 선
 -->

border: 5px solid blue; 

border: 5px solid; (색상 설정 안할 시 defalut: 검정색)

 

 

<!-- 
text-shadow 속성
- 텍스트에 그림자를 지정하는 속성
- 형식) text-shadow: <가로거리> <세로거리> <번짐정도> <색상>

* 가로거리
  - 텍스트로부터 그림자까지의 가로거리
  - 양수 값은 글자 오른쪽으로 그림자를 만들어 주고, 
   음수 값은 글자 왼쪽으로 그림자를 만들어 줌
   필수적으로 들어가야 하는 값
* 세로거리
  - 텍스트로부터 그림자까지의 세로거리
  - 양수 값은 글자 아래쪽으로 그림자를 만들어 주고,
   음수 값은 글자 위쪽으로 그림자를 만들어 줌
   필수적으로 들어가야 하는 값
* 번짐정도
  - 그림자가 번지는 정도를 말함
  - 양수 값을 사용하면 그림자가 모든 방향으로 퍼져 나감
   그림자가 크게 나타남
   음수 값을 사용하면 그림자가 모든 방향으로 축소가 되어 보여짐
   기본값은  0임
 -->

<style type="text/css">

#title {
	text-shadow: 3px 3px 3px gray;
}

<h3 id="title>제목</title>

 

 

<!-- 
float 속성
- 웹 문서의 요소를 떠 있게 하는 속성
- 수직적인 요소를 수평적인 요소로 바꾸어 주는 속성
- 왼쪽 구석이나 오른쪽 구석에 배치한다는 의미
- 문서의 레이아웃을 구성하기 위해서 많이 사용되는 속성
- float 속성의 종류
  * right : 오른쪽부터 차례로 왼쪽 방향으로 떠 있게 하는 속성
  * left : 왼쪽부터 차례로 오른쪽 방향으로 떠 있게 하는 속성
  * both : 양쪽 어느 쪽으로도 떠 있지 않게 하는 속성
   ==> 해제하는 속성
- float 속성을 사용한 후에는 반드시 해제(clear: both;)를 해주어야 함
 -->

<style type="text/css>

#first {
	float: left;
}

#second {
    float: left;
    margin: 150px;
}

.foot {
	both: clear;
}

 

font-family: 궁서체, 돋움체;   /* 글자체 */     /* 궁서체가 있으면 궁서체를 쓰고 없으면 돋움체를 써라 */

margin: 16px auto;

 

/* CSS3에 추가된 기능 */
/* 모서리가 둥근 4각형 */
border-radius: 0 20px 0 20px; (왼쪽상단부터 시계방향으로 모서리가 둥그래짐)

 

<!-- 
box-shadow 속성
- 그림자를 만드는 속성
- 형식) box-shadow <수평거리> <수직거리> <흐림정도> <번짐정도> <쌕상>

* 수평거리
  - 그림자의 수평 거리(얼마나 떨어져 있는지)
  - 양수값은 오른쪽, 음수값은 왼쪽으로 그림자를 만듦

* 수직거리
  - 그림자의 수직 거리(얼마나 떨어져 있는지)
  - 양수값은 아래쪽, 음수값은 윗쪽에 그림자를 만듦
  
* 흐림정도
  - 그림자의 흐림 정도를 표현함
  - 기본값은 해가 진 그림자를 표시
   값이 커질수록 부드러운 그림자를 표시함.
   음수값은 사용 불가
  
* 번짐정도
  - 긂자가 번지는 정도를 나타냄
  - 양수값은 그림자가 모든 방향으로 퍼짐
   음수값은 그림자가 모든 방향으로 축소되어 보임
 -->

 

.shadow {
	position: absolute;
    top: 10%
    left: 10%
    
    box-shadow: 20px 20px 10px 10px orange;
}

 

opacity: 0.5; /* 0~1사이의 값 */

 

 

 

😀
<a href="#">위로</a> ==> 페이지 맨 위로 이동

<a href="#a">첫번째단락</a>

<a id="a">여기가 첫번째 단락입니다</a> 

 

<!-- 
overflow 속성
요소의 크기 이상으로 내용(자식요소)이 넘쳐을 때 내용의 보여짐을 제어하는 것
 
  * visible : 넘친 부분을 자르지 않고 그대로 보여줌
  * hidden : 넘친 부분을 잘라내고, 보이지 않도록 함
  * scroll : 넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함.
  * auto : 넘친 부분이 있는 경우만 잘라내고, 스크롤바를 이용하여 볼 수 있도록 함.
 -->

부모,자식 박스 만들어서 css의 속성으로 overflow 설정