New 병아리 개발자

*html/css 자간, 줄 간격

1. 자간

- 글자의 간격 조절은 letter-spacing, word-spacing 사용

- 글자 간격 조절 : letter-spacing

- 단어 간격 조절 : word-spacing

- td, div, span 등에서 사용가능(단위 : px, %, em 등 모두 사용 가능하다.)

2. 줄 간격

- 줄 간격 조절은 line-height 사용

- td, div, span 등에서 사용가능(단위 : px, %, em 등 모두 사용 가능하다.)

*HTML, CSS 내용이 크기를 벗어났을 때(넘쳤을 때) 방법

- overflow : auto / scroll / hidden / visible / initial / inherit 등을 이용하여 처리 가능하다.

1. auto

- 박스를 넘어가지 않으면 스크롤 바가 생성되지 않고, 박스를 넘어가면 스크롤 바가 생성된다.

2. scroll

- 박스를 넘어가는 것과 관계없이 스크롤 바가 나온다.

3. hidden

- 박스를 넘어간 부분은 보이지 않는다.

4. visible

- 박스를 넘어가도 보여준다.

5. initial

- 기본값으로 설정한다.

6. inherit

- 부모 요소의 속성값을 상속받는다.

*HTML, CSS 반응형 이미지 만들기

- style="max-width:100%; height:auto;" 를 추가해 줌으로서 반응형 이미지를 만들 수 있다.

<a target="_blank" href="#">
    <img class="moon" src="images/moon1.jpg" style="max-width:100%; height:auto;"alt="달덩이">
</a>

a : 링크 태그
target="_blank" : 새 창에서 열기
href : 주소
img scr : 이미지 주소(이미지가 존재하는 경로)
style="max-width:100%; height:auto;" : 반응형 역할을 하게 해주는 태그, 가로 100%, 세로 자동

*HTML/CSS폰트 그라데이션 설정

- background: linear-gradient( 방향, 시작 색상, 끝 색상); (방향에는 top, right, bottom, left 및 50deg 등의 설정이 가능하다.)

- -webkit-background-clip: text; 적용 시 텍스트에만 백그라운드 적용

- -webkit-text-fill-color: transparent; 적용 시 텍스트를 투명하게 만든다.

background: linear-gradient( to right, rgb(0, 247, 255), yellow ); // 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;