웹표준
CSS
CSS3가 지원하는 스타일 속성과 스타일 값을 활용_ 레이아웃을 잡는다.
CSS3 내용 :
박스 속성, 가시 속성, 배경 속성, 글자 속성, 위치 속성, 유동 속성
그림자와 그레이디언트 속성
- 선택자의 용도와 사용법
- 기본 선택자 / 속성 선택자
- 후손 선택자와 자손 선택자
- 반응, 상태, 구조 선택자
- CSS 단위
CSS 개요
- 선택자 : CSS3에서 특정 HTML 태그를 선택할 때 사용
h1 { color : red; }
선택자 { 스타일속성 : 스타일값 }
- 스타일시트
: CSS 로 작성된 코드
: <style>.....</style>
CSS 선택자 종류
- 전체 선택자 : *
- 태그 선택자 : 태그 // h1 { }
- 아이디 선택자 : #아이디 // #id
- 클래스 선택자 : .클래스 // .header
- 속성 선택자 : 선택자 [속성 = 값] // input[type = text]
(~=, |=, ^=, $=, *=)
: div[class^='btn'] { } : 시작 문자열의 클래스에 속성적용 //
: div[class$='btn'] { } : 마지막 문자열의 클래스에 속성적용 //
: div[class~='btn'] { } : 문자열에 클래스명이 표함되어 있다면 속성적용 //
: div[class*="tn re"] { /*class 속성의 문자열 중 tn r 로 일치하는 클래스가 있으면 적용 */
- 후손 선택자 : 선택자 선택자 // header h1
- 자손 선택자 : 선택자 > 선택자 // header > h1
- 반응 선택자 : 선택자: active // div:active || 선택자:hover // div:hover
- 상태 선택자 : checked (checkbox, radio)/ focus / enabled / disabled /
- 구조 선택자 : first-child / last-child /nth-child(수열) / nth-last-child(수열)
박스 속성
- 웹 페이지의 레이아웃을 구성할 때 가장 중요
박스 크기와 여백
- width와 height 속성 : 글자를 감싸는 영역의 크기를 지정
- border 속성 : 테두리 두께 지정
- margin : 테두리와 다른 태그의 간격을 지정
- padding : 테두리와 바깥쪽 여백을 지정
박스 크기와 패딩 조정
- 웹 브라우저에서 검사로 코드 분석
- 태그 전체의 크기 구하기
: margin, border, padding 속성은 양쪽에 위치하므로 2를 곱함.
= 전체 너비 : width + 2 *(margin + border + padding)
= 전체 높이 : height + 2 *(margin + border + padding)
박스 여백 부분 조정
- margin 속성과 padding 속성은 두 가지 방법으로 상하좌우를 각각 지정할 수 있음.
*** 네 방향 속성의 순서는 : 위쪽 오른쪽 아래쪽 왼쪽의 순서로 단위를 지정할 수있다.
ex ) margin: 0 30px 0 30px;
*** 두방향씩 속성지정 : 네 방향을 2개씩 묶어 지정 <위아래> <왼쪽오른쪽>
ex ) margin: 0 30px;
박스 테두리
- border-width : 테두리 두께
- border-style : 테두리 형태
- border-color : 테두리 색상
- border : border-width, border-style, border-color 속성을 한 번에 입력할 수도 있음
<style>
.box {
border: thick dashed black;
}
</style>
: 상하좌우 속성을 각각 입력할 수 있음.
박스 둥근테두리 만들기 border-radius///
가시 속성
- 태그가 화면에 보이는 방식을 지정
- display 속성
키워드 설명
none 화면에 보이지 않음
block 블록 박스 형식으로 지정
inline 인라인 박스 형식으로 지정
inline-block 블록과 인라인의 중간 형태로 지정
display 속성
none 키워드 적용 - 태그가 화면에서 보이지 않음.
block 키워드 - #box 태그의 display 속성을 block 키워드로 바꿈
inline과 inline-block 키워드
- inline과 inline-block 적용
- block 형식, inline-block 형식
: margin 속성, padding 속성을 상하좌우 네 방향으로 지정할 수 있음
- inline 형식
: margin 속성, padding 속성을 왼쪽과 오른쪽으로만 지정할 수 있음
배경 속성
background-image 배경 이미지 삽입
background-size 배경 이미지의 크기 지정
background-repeat 배경 이미지의 반복 형태 지정
background-attachment 배경 이미지의 부착 형태 지정
background-positon 배경 이미지의 위치 지정
background 한 번에 모든 배경 속성 입력
배경 이미지 삽입과 크기 지정
- background-image 속성
: 배경 이미지 지성
: URL, 그레이디언트 입력
-background-size 속성
: 배경이미지 크기
배경으로 사용할 이미지 파일 준비하기
: 배경이미지와 작성할 HTML 페이지를 같은 폴더에 넣기
...
배경이미지 반복과 부착 형태, 위치
- background-repeat 속성
: 배경 이미지의 반복 형태 지정
: repeat-x : X축 방향으로만 이미지 반복.
: repeat-y : Y축 방향으로만 이미지 반복.
- background-attachment 속성
: 배경 이미지를 화면에 고정
- background-position 속성
: 배경 이미지의 배치 위치 지정
: background-position: 키워드;
: background-position: X축 위치;
: background-position: X축 위치 Y축 위치;
배경 이미지 반복 없애기
: background-repeat : no-reapeat;
스크롤이 가능한 분량의 텍스트 추가하기
: background-attachment : scroll;
배경 이미지 화면에 고정시키기
: background-attachment : fixed;
배경 이미지 위치조정
: background-attachment : buttom; (top, left, right, top-left, top-right.....)
: backgroudn-attachment : 0px 50%;
글자 속성
- 글자 크기와 글꼴
font-size 속성 : 글자 크기
font-family 속성 : 글꼴
generic-family - 다국적 사용자 대상용 글꼴
font-style 속성 : 글자 스타일
font-weight 속성 : 글자 두께
- 두께를 지원하지 않는 글꼴은 font-weight 속성을 사용해 두께 조정 불가능
'Hello World > Frontend Study' 카테고리의 다른 글
| Web - HTML, CSS, JavaScript html5 입력 양식 태그와 구조 [개발스터디 기몬] (0) | 2023.05.25 |
|---|---|
| jQuery - 제이쿼리 연습 W3Schools try it yourself [개발스터디 기몬] (0) | 2023.05.18 |
| Bootstrap - 부트스트랩 링크 스트립트 추가 Bootstrap link/ script add HTML [개발스터디 기몬] (0) | 2023.05.10 |
| Web - 'World wide web' HTML5, CSS, JavaScript basic memo [개발스터디 기몬] (0) | 2023.05.04 |
| JavaScript - javascript basic memo 2 . [개발스터디 기몬] (0) | 2023.05.04 |
댓글