1. 목록 관련 스타일
[ list-style-type , list-style , list-style-positon ]
1. list-style-type :목록 앞에 마커를 정하는 속성
- none; - 마커 표시 X
- disc; - 속찬 원
- circle - 속빈 원
- square - 네모
- list-style-image : url(" " ) - 이미지로도 마커 지정 가능
2. list-style : 항목 모양의 종류, 위치, 이미지 지정 가능
우리는 목록 앞 마커 지정 더 실습해보기
- lower- alpha; / upper-alpha - 대소문자 알파벳으로 표시 ( a-b-c , A-B-C )
- lower-roman; / upper-loman - 대소문자 로마 숫자로 표시 ( i-ii-iii , |-||-||| )
- decimal-leading-zero - 01-02-02 형식으로 표시
3. list-style-positon: 항목을 어느 위치에서 시잘할지 지정
- outside : 기본값으로 왼쪽에 둠
- inside : 항목과 텍스트를 들여 쓰기 함.
2. 영역 관련 스타일
[ width, height, padding, border, margin ]
1. width , height 속성
- content 영역의 크기를 지정
- 글자를 감싸는 영역의 크기를 지정 (px)
- 전체 너비 = width + 2 X (margin+border+padding)
- 전체 높이 = height + 2 X (margin+border+padding)
2. margin, padding 속성
- 패딩 : content영역을 감싸고 있는 부분
- 마진 : 요소 테두리를 기준으로 여백을 얼마나 줄 것인가.
2-1 위 오른쪽 아래 왼쪽 각각 지정 가능
- margin-top
- margin-right
- margin-bottom
- margin-left
2-2 각각 지정 안 하고 margin 속성만 사용하여 각각의 너비 별도 지정도 가능
- 4개 지정 -> 위-오-아-왼 { margin: 5px 30px 5px 30px; }
- 3개 지정 -> 위(아)-오-왼 { margin : 5px 30px 30px; }
- 2개 지정 -> 위(아)-오(왼) { margin : 5px 30px; }
- 0 auto; 값도 지정 가능 - 센터로 맞춰준다.
3. 테두리 관련 스타일
border [ -width , -color , -radius , -shadow, -style]
## 테두리 관련 스타일 [ 위 오른쪽 아래 왼쪽 ] 각각 지정 가능( shadow제외, radius기준 다름 체크 )
## 각각 지정 안 하고 속성만 사용하여 각각의 너비 별도 지정도 가능
- 4개 지정 -> 위-오-아-왼
- 3개 지정 -> 위(아)-오-왼
- 2개 지정 -> 위(아)-오(왼)
1. border-width 속성 - 테두리 두께 지정
2. border-color 속성 - 테두리 색상 지정
3. border-radius 속성 - 테두리 모서리 지정
radius 속성은
## 위아래가 한 세트가 아닌 대각선으로 한 세트!
## 모서리 깎는 것이므로 (위쪽 왼쪽 – 아래쪽 오른쪽 -> 한 세트)
3. border-shadow 속성 - 테두리 그림자 지정
- 속상값은 순서대로
- [ x축 y축 흐림 정도 번짐 정도 색상 ] 순으로 입력
4. border-style 속성 - 테두리 선 스타일 지정
5. border : 두께, 스타일, 색상 한 번에 지정 가능
- [ border : 두께 스타일 색상 ] 순서로 입력
- 한 번에 입력하는 형식으로 사용할 때는 4방향(위-오-아-왼) 적용 불가능
4. 배경 관련 스타일
background [ -color , -image , -repeat, -size, -position, -attachment , -clip ]
1. background - color : 배경색 지정
- div를 다로 만들었지만 배경색 지정 안 해주면 – body태그에 적용한 배경색 스타일이 div에도 적용된다~!
2. background - image : 배경 이미지로 채우기
- background-image : url( “ ” ;)
3. background - repeat : 한 가지 이미지가 반복되는 것이 싫다.
- 3-1 background-repeat: no-repeat; :
3-2 background-repeat: repeat-x :
3-3 background-repeat: repeat-y;
4. background - size : 배경 이미지의 크기 지정
- auto기본값
4-1 background-size : contain
- 사이즈 늘리다가 가로나 세로에 만나면 이미지 잘리지 않게 조정 - contain
4-2 background-size : cover
- 요소의 크기 꽉 채울 동안 이미지 늘림. (이미지 잘려도 꽉 채울 때까지) - cover
4-3 background-size: 1000px 800px; : 이미지 크기 정해서 고정
4-4 background-size: 50% 50%; : 요소 크기 기준 - 입력 비율에 따라서 이미지 크기 조정
5. background - positon: 배경 이미지의 위치 지정
5-1 . x축 기준 [ left/center/right ] // y축 기준 [ top/center/bottom ]
5-2 . x축 값 // y축 값
5-3. x축 % // y축 %
- x축 기준 몇% 띄우겟다 / y축~~ 비율
6. background - attachment: 배경 이미지의 스크롤 여부 정하기
6-1 background-attachment : fixed:
- fixed – 위치고정인데
- div안에 있는 요소이기 때문에 div화면 비칠경우에만 보인다.
- 6-2 scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다.
- 6-3 local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.
- 6-4 initial : 기본값으로 설정합니다.
- 6-5 inherit : 부모 요소의 속성 값을 상속받습니다.
6. background - clip: 배경을 어디에 넣을지 정하는 속성
- HTML 요소는 박스(box)로 이루어져 있다.
- 배경 이미지나 배경색을 그 박스 중 어디에 넣을지 정하는 속성이 background-clip
- 6-1 border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
- 6-2 padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
- 6-3 content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성 값을 상속받습니다.
review
목록, 영역, 테두리, 배경 관련
스타일에 대해 실습하였다.
실습한 내용을 좀 줄였는데도
양이 엄청나다 ㅇ-ㅇ
나중에 찾아볼 때는 뿌듯할 듯하다.
당장 이번 주말 과제인
사이트 만드는 과제에 활용할 수 있을 듯!
이제 CSS 남은 스타일 부분 마무리하고
레이아웃 구성하는 부분 배우면
퍼블리셔 영역은 끝난다.
그다음에는 드디어 프론트엔드 개발자 영역인
JS를 배우는데 어서 배우고 싶다.
어렵겠지만 재미있을것 같다 ㅎㅎ