예습/웹표준 수업(22.2.28 ~ 22.4.25)
내일배움카드(재직자) 웹표준 수업 / 3월23일 (수) 9회차
밀김
2022. 3. 22. 20:45
728x90
<문장을 꾸며주는 CSS>
▶text-decoration: 속성값
글자의 선을 표시 해준다
*속성값: none 밑줄 제거 (링크에 해당)
underline 밑줄
overline 윗줄
line through 가운데줄,취소선
underline solid 한줄 밑줄(solid 생략 가능)
underline double 이중 밑줄
underline dotted 점선 밑줄
underline dashed 파선 밑줄
▶text-align
*속성값: left 왼쪽정렬(생략가능)
center 가운데맞춤
right 오른쪽맞춤
justify 양쪽에 딱 붙게 간격을 맞춤
▶vertical-align : 속성값
세로정렬(이미지,폼요소[input])
* 속성값: top : 박스 상단에 배치
middle : 박스의 세로 중앙에 배치
bottom : 박스의 하단에 배치
(적용시 바디 태그 안에 원하는 본문 내용 적고 span으로 감싼다음 class나 id로 값을 부여하고
그 값으로 css에서 버티칼 얼라인 먹여줘야함)
버티컬 얼라인 상세설명: https://youtu.be/gkyxAkA-6oU
실습예시
<div>
<span class="text">레드벨벳 노래 짱쥬아</span>
<span class="sub">Feel My Rhythm</span>
</div>
.text{ background-color: aquamarine;}.
.sub{ background-color: coral; font-size: 0.3em; vertical-align: middle;}
▶text-indent : 속성값
첫줄 들여쓰기(글자의 앞을 지정한 간격만큼 띄어줌)
*속성값: 단위(px,em,%..)
▶letter-spacing : 속성값
글자 사이 간격 떨어트림
*속성값: 단위(px,em,%..) > 가급적이면 em 사용을 권장한다 (폰트가 바껴도 사이 간격이 유지됨)
▶text-shadow : 속성값
( 그림자표시 )
*속성값: 가로간격 세로간격 퍼지는정도 색
2px 2px 1px red
가로간격 세로간격 퍼지는정도 색, 가로간격 세로간격 퍼지는정도 색 (그림자 이중으로 표시. 쉼표만 찍으면 됨! 생략 원하는건 0px로 쓰는게 좋다. 걍 안써도 되긴 하는데 안써버릇하면 자꾸 까먹어서..차라리 0px로 쓰는걸 추천)
*Html/css 오류 검사하기*
1. 문서작성
2. https://jigsaw.w3.org/css-validator/
3. 파일업로드: html,css파일
4. 검사클릭
5. 오류가 없으면 '축하합니다'ㅋㅋㅋㅋ / 오류가 있으면 줄번호와 설명이뜸
<목록을 꾸며주는 css : list-style>
*순서가 없는 목록(ul)
ul{list-style-type: 속성값;}
속성값 ▷ none: 기호없음
▷ disc: 속이 찬 원형
▷ circle: 속이 빈 원형
▷ square: 속이 찬 네모
*순서가 있는 목록(ol)
ol{list-style-type: 속성값;}
속성값 ▷ none: 기호없음
▷ decimal: 1부터 시작하는 십진수(생략 가능)
▷ decimal-leading-zero: 숫자앞에 0이 붙은 십진수
▷ lower-roman: 소문자 로마숫자
▷upper-roman: 대문자 로마숫자
▷lower-alpha 또는 lower-latin: 소문자 abcd
▷upper-alpha 또는 upper-latin: 대문자 abcd
▷armenian: 아르메니아 숫자
▷georgaina: 조지왕조 시대 숫자
*리스트에 기호나 숫자 대신 이미지 표시
ol{ist-style-image: url("이미지 주소")}
*목록 들여쓰기 효과
ol{list-style-position: 속성값;}
속성값 ▷outside: 기본 상태(생략가능)
▷inside: 안쪽으로 들여쓰기
*Span/strong: 줄은 안바뀌는데 구분이 가능한것 문장묶을때 많이씀
*div:문단 구분
728x90