텍스트 스타일링에 알아보자
텍스트 정렬
<style>
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
</style>
클래스 선택자로 각종 텍스트들의 정렬 위치를 만들었다
text-align 속성은 텍스트 정렬 속성
<body>
<!-- 기본적인 텍스트 관련 스타일링 -->
<!-- 텍스트 정렬 -->
<h1 class="text-center">가운데 정렬</h1>
<h1 class="text-right">오른쪽 정렬</h1>
</body>
.text-blue {
color: blue;
}
텍스트 색상
<!-- 텍스트 색상 -->
<h1 class="text-blue">파란색</h1>
색상값은 rgb, HEX 값들을 쓸 수 있다
텍스트 장식선
/* 밑줄 */
.underline {
text-decoration: underline;
}
/* 윗줄 */
.overline {
text-decoration: overline;
}
/* 취소선 */
.delline {
text-decoration: line-through;
}
/* 장식선 없는 텍스트 */
/* <a href=""> 같은 태그의 경우 기본적으로 밑줄이 있음 */
.plain {
text-decoration: none;
}
<!-- 텍스트 장식선 -->
<p class="underline">밑줄을 가진 글씨입니다.</p>
<p class="overline">윗줄을 가진 글씨입니다.</p>
<p class="delline">취소선을 가진 글씨입니다.</p>
<p>
<a href="" class="plain">링크인 a 태그의 기본 값인 밑줄을 없앤 글씨입니다</a></p>
각종 텍스트 장식선의 속성들이다
하나의 text-decoration 안에 서로 다른 4가지의 속성값을 넣을 수 있다
/* text-decoration */
/* 4가지 하위 프로퍼티 */
/* text-decoration-style : 장식선 스타일(직선, 점선 등) */
/* text-decoration-line : 장식 종류(밑줄, 윗줄, 가운데줄 등) */
/* text-decoration-color : 장식선 색상 */
/* text-decoration-thickness : 장식선 두께 */
하나의 text-decoration 으로
점선으로 된 밑줄과 윗줄이 있는 텍스트를 만들어 보자
.underover {
text-decoration: dashed underline overline;
}
이렇게 클래스 선택자를 만들었다
속성값의 dashed 는 점선 이라는 뜻
underline 밑줄
overline 윗줄
이렇게 세가지의 값을 주었다
<p class="underover">윗줄과 밑줄 글씨입니다</p>
이렇게 class=""속성을 입히면
하나의 text-decoration 으로 세가지의 값을 적용한걸 볼 수 있다
텍스트 변환
/* 모든 알파벳 문자를 대문자로 변환 */
.uppercase {
text-transform: uppercase;
}
/* 모든 알파벳 문자를 소문자로 변환 */
.lowercase {
text-transform: lowercase;
}
/* 영어 문장에서 각 단어의 첫문자만 대문자로 변환 */
.capitalize {
text-transform: capitalize;
}
변환에서는 text-transform 이란 속성을 쓴다
<!-- 텍스트 변환 -->
<p class="uppercase">all letters are converted to uppercase</p>
<p class="lowercase">ALL LETTERS Are CONverted To lowercase</p>
<p class="capitalize">
only the first letter of a word is converted to uppercase
</p>
uppercasae 는 모든 알파벳 문자를 대문자로 변환
lowercase 는 모든 알파벳 문자를 소문자로 변환
capitalize 는 영어 문장에서 각 단어의 첫문자만 대문자로 변환
요기서 주의할 점이 하나 있다
만약에 예를 들어서 사용자가 제품 수리를 맞기기 위해 알파벳의 대문자로 된 시리얼 넘버를
입력해야할때라고 가정해보자
<input type="text" name="" id="" class="uppercase" />
이렇게 텍스트를 입력할 수 있는 칸과 class="uppercase" 로
입력되는 알파벳들을 모두 대문자로 변환하는 속성값을 넣었다
그러면 화면에서 보여지는 것처럼 소문자로 쳐도 대문자로 변환되서 나오게 된다
하지만 CSS는 보여지는것 만 이기 때문에 실제로 서버에 전송되는 값은
소문자로 전송이 되는것이다
그래서 CSS에서 보이는 것과 실제 값은 다르다는 것을 인지하고 있어야 한다고 한다
이것은 나중에 자바스크립트에서 배운다고 한다
<!-- 자바스크립트 toUpperCase() -->
이라는 함수값으로 실제 입력되는 소문자들을 대문자로 변환해 서버로 전송해주는 함수라고 한다
