0. 블록레벨 & 인라인 레벨
- h2, p, div 등 => 블록레벨 -> 자동줄넘김, width100%를 차지함
- span, strong 등 => 인라인레벨
-> 블록레벨을 인라인으로, 인라인레벨을 블록으로 변경도 가능하다.
1. 컨텐츠영역 크기계산 옵션
- box-sizing: border-box => 테두리선까지 포함해 크기를 지정함.
center-box => 테두리를 제외한 크기로, 컨텐츠 내부의 크기로 지정한다. 기본값임.
2. 여백
- padding: 테두리 내부의 여백
- margin: 테두리 외부의 여백
3. 텍스트 지정 옵션
- text-align: 텍스트 정렬
- text-transform: 대소문자 변환
- text-shadow: 그림자효과
- text-decoration: none => 하이퍼링크의 밑줄을 없애는 등, 텍스트에 지정된 효과 수정.
- line-height: 줄간격
- letter-spacing: 글 자 사 이 의 간 격 지 정
- word-spacing: 단어 사이의 간격 지정
4. 목록 지정 옵션
- list-style-type: 리스트 모양
- list-style-image: 리스트모양을 이미지파일로 지정
- list-style-position: inside 목록 들여쓰기
5. <table> 속성
- caption-side: 테이블제목인 <caption>의 위치지정
- border-collapse: 표와 셀테두리간의 여백을 합침
6. 테두리 속성
- border-radius: 모서리 둥글게 만들기
7. 배치
- display: inline-block
- float: left 이미지 배치할때도 사용함.
- clear: left
( display와 float 기능의 차이는 무엇인가? )
- position: static / relative
- position: absolute -> 별도로 위치값을 지정해야함. 지정한 위치에 맞게 배치된다. (스크롤고정은 X)
- position: fixed -> 별도로 위치값을 지정해야한다. 스크롤에 상관없이, 지정된 위치에 고정됨.
8. 태그:이벤트 - 해당 이벤트가 발생할 때 태그에 css스타일을 적용함.
a:link
a:visited { color: black }
a:hover
9. 태그명 [ 속성값 ] - 해당 속성이 지정된 태그를 가져옴
input[ required ]
input[ readonly ]
'개발자 양성과정 필기노트 > WEB' 카테고리의 다른 글
WEB || DAY4 || html태그 옵션, CSS (0) | 2021.08.19 |
---|---|
WEB || DAY3 || HTML 기호, 테이블만들기, 파일경로 (0) | 2021.08.12 |
WEB || DAY2 || 회원가입창 만들기 (0) | 2021.07.29 |
WEB || DAY1 || html태그 (0) | 2021.07.29 |
댓글