CSS 스타일 적용 방법
- 내부 스타일
- 인라인 스타일
- 외부 스타일
1. 내부 스타일
- <head> 태그 안쪽에 <style> 태그 사용
- 선택자로 요소 선택 후 스타일 적용
2. 인라인 스타일
- 스타일 적용할 태그 안에서 바로 style 적용
3. 외부 스타일
- 스타일 관련 내용 적용한 css파일을 만든 뒤 파일 참조하여 사용
3-1 .CSS파일 만들기
3-2 <head> 파일 내에 <link> 태그로 연결시켜주기
3-3 만든 CSS파일 적용시켜주기
- ../ 상위디렉토리
- ./ 현재 디렉토리
- 현재 같은 디렉토리라서 생략 가능하지만 확실히 해주려면 ./ 추가
# 우리는 내부 스타일 방식으로 쭉 실습해볼 예정
- 내부 스타일 내용을 외부 파일로 만들어서 참조시켜주면 그것이 외부 스타일
- 실무에선 CSS 파트 담당자가 있어서 파일 외부 스타일로 주로 사용한다 하심
CSS 스타일 실습
1. 글꼴 관련 스타일
font [ -family , -size , -weight , -variant , -style ]
1-1 font-family : 여러 가지 글씨체 지정
##내 컴퓨터에 없는 글씨체 가져와보기
- 1. googlefont검색 - 글씨체 고르고 - 다운로드 X – select this style
- 2. Select this style - link에 있는 거 복사해서 head태그 집어넣어 주기
- 3. CSS rules로 복사해서 사용
1-2 font-size : 글씨 크기 지정
- px, em, rem, % 등 여러 가지로 크기 지정 가능
- 기본 사이즈는16px
- em은 현재 폰트 사이즈에서 몇 배 크기로 지정
- 현재 폰트 size는? 부모에게 적용된 폰트 size -- 없다면 기본 사이즈로
- rem은 루트 폰트 사이즈에서 몇 배 크기로 지정
- 루트 폰트 size는? html에 적용된 폰트 size
1-3 font - weight : 글씨 굵기 지정
- normal이 기본 값
- 숫자로는 500 기본값 - (100~900 숫자로도 지정가능)
1-4 font-variant : small-caps와 사용
- 기본값은 normal
- small-caps : 현재 글씨 크기보다 작게 + 모든 영문자 대문자로 변경
- 영어만 적용 가능
1-5 font - style : 기울임, 비스듬히 같은 효과 줄 수 있다.
- 기본값은 normal
2. 텍스트 관련 스타일
[ color ] , [ line-height ]
text [ -decoration , -transform , -shadow , -align ]
2-1 color : 텍스트 색 지정
- rgb / rgba (a는 투명도 )
- a의 값은 0부터~1까지 ( 0은 완전 투명 – 1은 불투명 )
2-2 line-height : 라인 높이 조절
2-3 text-decoration : 텍스트 선 긋기
- overline - 윗줄
- underline - 아랫줄
- line-through - 취소선
+@ 기본으로 설정되어있는 태그의 스타일도 변경 가능
- # <a> 기본 설정 스타일 먼저 체크
- 밑줄 그어져 있고, 마우스 커서가 손가락 모양(포인터 모양)으로 바뀐다.
+ text-decoration : none; 지정
2-4 text-transform : 텍스트 폼 변경
- lowercase : 소문자로 변경
- uppercase : 대문자로 변경
- capitalize : 파스칼 케이스처럼 ( 하이픈으로 단어 구분해줌 )
2-5 text-shadow: 텍스트 그림자 지정
- text-shadwo : x축, y축, 번짐 정도, 그림자색상 형식
#1 -x축 y축 값만 입력
- 번짐정도 생략 시 --- 선명한 그림자
- 색상 생략시 --- 글자색 그대로
#2 - 모든 값 입력해보기
- x축, y축, 번짐 정도, 그림자 색상
#3 - “,”를 사용하여 여러 개 작성 가능
2-6 text-align: 텍스트 정렬
- left - 왼쪽 정렬
- right - 오른쪽 정렬
- justify - 양쪽 정렬
- center - 가운데 정렬
## 한글 입숨 검색 – 긴 글 얻어오기
review
CSS 스타일 부분 첫 시간이었다.
꽤 많이 실습한 거 같은데
아직 20% 정도 진행되었다고 하신다...
으악
java는 이해하고 활용하는 부분이 어려웠지만
HTML/CSS부분은
어렵진 않은데 알아야 할 것이 너무 많다.
정리 잘해놓으면
나중에 이런 게 있었는데 하면서
내 글을 찾아볼 수 있을 것 같아서
복습 블로그 포스팅하는
동기는 더 생기긴 하지만ㅎㅎ
후후 프론트 엔드 남은 부분도 화이팅 하자!