텍스트에 스타일 적용 : 색상, 줄, 대소문자, 그림자, 공백
1. color 속성 : 글자 색 지정하기
color : <색상>
color 속성에서 사용하는 색상 값은 16진수, rgb(또는 rgba), hsl(또는 hsla), 색상 이름으로 작성 가능하다.
<style>
h1 {
// 색상 명 사용
color : red;
}
h2 {
// 16진수 사용
color : #ff0055;
}
h3 {
// rgb 사용
color : rgb(0, 255, 89);
}
h4 {
// hsl 사용
color : hsl(360, 100% 0%)
}
</style>📌 a 는 alpha
알파 값은 투명도를 나타내는 단위로 작을수록 투명해지고 클수록 불투명 해진다.
2. text-decoration 속성 : 텍스트에 줄 표시하기
text-decoration : none | underline | overline | line-through
<style>
.none {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
</style>
<body>
<h2 class="none">여기는 줄이 없어요.</h2>
<h2 class="underline">여기는 줄이 밑줄이에요.</h2>
<h2 class="overline">여기는 줄이 위에 줄이 있어요.</h2>
<h2 class="line-through">여기는 줄이 가운데에 줄이 있어요.</h2>
</body>
기본적으로 none 이기 때문에 표시하지 않지만, a 태그를 사용할 때는 underline 이 기본적으로 생기기 때문에
디자인 적으로 이를 삭제하기 위하여 none 을 사용할 수도 있다.
3. text-transfrom 속성 : 영문 대소문자 변환하기
text-transfrom : none | capitalize | uppercase | lowercase | full-width
기본값은 none 으로 영문자에만 적용되는 속성이다.
capitalize 속성 값은 첫 글자만 대문자로 변환하는 값이고,
uppercase 속성 값은 모든 글자를 대문자로, lowercase 속성 값은 모든 글자를 소문자로 변환하는 값이다.
full-width 속성 값은 가능한 모든 글자를 전각 문자로 변환하는 값으로 일본어처럼 반각이 많은 문자를 작업하기에 유용하다.
하지만 이 기능은 DB 에도 동일한 기능이 있고,
데이터를 변환하는 작업은 DB 에서 선가공 하는 것이 좋기 때문에 가능하다면 DB 에서 작업하도록 하자.
4. text-shadow 속성 : 텍스트에 그림자 추가하기
text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>
text-shadow 속성은 말 그대로 작성한 텍스트의 그림자 효과를 추가해주는 속성이다.
기본적으로는 none 상태이다.
1️⃣ 가로 거리 : 화면의 x 축을 나타낸다. 양수는 글자의 오른쪽으로 음수는 글자의 왼쪽으로 나타난다. 필수속성
2️⃣ 세로 거리 : 화면의 y 축을 나타낸다. 양수는 글자의 아래쪽으로 음수는 글자의 위쪽으로 나타난다. 필수속성
3️⃣ 번짐 정도 : 그림자가 번지는 정도. 기본값은 0으로 커질수록 번짐이 강해진다.
4️⃣ 색상 : 그림자의 색상. 공백 구분으로 여러 개를 설정할 수 있다. 기본값은 글자 색이다.
<style>
.shadow1 {
color:orange;
text-shadow: 1px 1px;
}
.shadow2 {
text-shadow: 5px 5px 3px #f00;
}
.shadow3 {
color:#fff;
text-shadow: 7px -7px 5px #000;
}
</style>
<body>
<h1 class="shadow1">그림자가 생깁니다.</h1>
<h1 class="shadow2">그림자가 생깁니다.</h1>
<h1 class="shadow3">그림자가 생깁니다.</h1>
</body>
5. white-space 속성 : 공백 처리하기
white-space : normal | nowrap | pre | pre-line | pre-wrap
white-space 속성은 코드 상에 공백을 어떻게 웹 상에 표현할 것인가를 조정할 수 있는 속성이다.
기본값은 normal 로 여러 개의 공백이 있더라도 단 하나의 공백으로 표현하게 한다.
1️⃣ nowrap : 여러 개의 공백을 하나로 표현. 영역 너비를 넘어가는 내용을 줄바꿈하지 않고 한 줄로 표기
2️⃣ pre : 여러 개의 공백을 그대로 표현. 영역 너비를 넘어가는 내용을 줄바꿈하지 않고 한 줄로 표기
3️⃣ pre-line : 여러 개의 공백을 하나로 표현. 영역 너비를 넘어가는 내용을 자동으로 줄 바꿈
4️⃣ pre-wrap : 여러 개의 공백을 그래도 표현. 영역 너비를 넘어가는 내용을 자동으로 줄 바꿈
<style>
h2, p {width: 500px; margin: 10px auto; border: 1px solid;}
.nowrap {white-space: nowrap;}
.pre {white-space: pre;}
.pre-line {white-space: pre-line;}
.pre-wrap {white-space: pre-wrap;}
</style>
<body>
<h2>normal</h2>
<p>
이 헌법공포 당시의 국회의원의 임기는 제1항에 의한 국회의 최초의 집회일 전일까지로 한다.
모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.
대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다.
대통령은 제4항과 제5항의 규정에 의하여 확정된 법률을 지체없이 공포하여야 한다.
제5항에 의하여 법률이 확정된 후 또는 제4항에 의한 확정법률이 정부에 이송된 후 5일 이내에 대통령이 공포하지 아니할 때에는 국회의장이 이를 공포한다.
헌법재판소는 법률에 저촉되지 아니하는 범위안에서 심판에 관한 절차, 내부규율과 사무처리에 관한 규칙을 제정할 수 있다.
</p>
<h2>nowrap</h2>
<p class="nowrap">
국회에 제출된 법률안 기타의 의안은 회기중에 의결되지 못한 이유로 폐기되지 아니한다.
다만, 국회의원의 임기가 만료된 때에는 그러하지 아니하다.
국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다.
모든 국민은 능력에 따라 균등하게 교육을 받을 권리를 가진다.
대통령은 헌법과 법률이 정하는 바에 의하여 공무원을 임면한다.
농업생산성의 제고와 농지의 합리적인 이용을 위하거나 불가피한 사정으로 발생하는 농지의 임대차와 위탁경영은 법률이 정하는 바에 의하여 인정된다.
모든 국민은 행위시의 법률에 의하여 범죄를 구성하지 아니하는 행위로 소추되지 아니하며, 동일한 범죄에 대하여 거듭 처벌받지 아니한다.
</p>
<h2>pre</h2>
<p class="pre">
국가는 노인과 청소년의 복지향상을 위한 정책을 실시할 의무를 진다.
체포·구속·압수 또는 수색을 할 때에는 적법한 절차에 따라 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다.
다만, 현행범인인 경우와 장기 3년 이상의 형에 해당하는 죄를 범하고 도피 또는 증거인멸의 염려가 있을 때에는 사후에 영장을 청구할 수 있다.
법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다.
국정의 중요한 사항에 관한 대통령의 자문에 응하기 위하여 국가원로로 구성되는 국가원로자문회의를 둘 수 있다.
선거에 있어서 최고득표자가 2인 이상인 때에는 국회의 재적의원 과반수가 출석한 공개회의에서 다수표를 얻은 자를 당선자로 한다.
</p>
<h2>pre-line</h2>
<p class="pre-line">
행정각부의 설치·조직과 직무범위는 법률로 정한다.
행정각부의 장은 국무위원 중에서 국무총리의 제청으로 대통령이 임명한다.
이 헌법시행 당시에 이 헌법에 의하여 새로 설치될 기관의 권한에 속하는 직무를 행하고 있는 기관은 이 헌법에 의하여 새로운 기관이 설치될 때까지 존속하며 그 직무를 행한다.
대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다.
대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.
위원은 정당에 가입하거나 정치에 관여할 수 없다.
</p>
<h2>pre-wrap</h2>
<p class="pre-wrap">
국회는 선전포고, 국군의 외국에의 파견 또는 외국군대의 대한민국 영역안에서의 주류에 대한 동의권을 가진다.
대통령은 법률에서 구체적으로 범위를 정하여 위임받은 사항과 법률을 집행하기 위하여 필요한 사항에 관하여 대통령령을 발할 수 있다.
모든 국민은 통신의 비밀을 침해받지 아니한다.
군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련등 직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상외에 국가 또는 공공단체에 공무원의 직무상 불법행위로 인한 배상은 청구할 수 없다.
헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다.
</p>
</body>
nowrap 과 pre 는 줄바꿈을 하지 않는다는 공통점이 있지만
pre 속성 값의 경우에는 공백 값을 그대로 인식하기 때문에
코드 상의 글을 nowrap 속성 값과 달리 줄바꿈까지 그대로 표현했다는 차이점이 있다.
다만 지정한 영역을 벗어났다는 점에서는 동일하다.
pre-line 과 pre-wrap 은 줄바꿈을 한다는 점에서 공통점이 있지만 코드 상에서의 공백을 나타내는지에 대한 여부에 따라 전혀 다르게 표현되고 있음을 예시를 통해 확인할 수 있다.
대신 정해진 영역 안에서 줄바꿈이 되었다는 특징이 있다.
white-space 속성은 overflow 와 text-overflow 속성이 함께 쓰이면 활용 가치가 더욱 높아질 수 있다.
nowrap 속성 값처럼 정해진 영역을 넘어간다는 것은 사용자 측면에서 보이면 안 되는 부분이다.
즉 가려야 하는 부분이다.
이는 overflow 속성의 hidden 속성 값으로 처리 가능하다.
<style>
h2, p {width: 500px; margin: 10px auto; border: 1px solid;}
.nowrap {white-space: nowrap;}
.pre {white-space: pre;}
.pre-line {white-space: pre-line;}
.pre-wrap {white-space: pre-wrap;}
p {overflow-x: hidden;}
</style>
영역을 벗어났던 부분이 보이지 않는 것을 확인할 수 있다.
하지만 사용자는 뒤의 내용이 막연히 써있지 않는 것인지, 의도적으로 가려진 것인지 알지 못한다.
때문에 의도적으로 가려졌음을 알려야 한다.
이는 text-overflow 속성의 ellipsis 속성 값으로 표현할 수 있다.
<style>
h2, p {width: 500px; margin: 10px auto; border: 1px solid;}
.nowrap {white-space: nowrap;}
.pre {white-space: pre;}
.pre-line {white-space: pre-line;}
.pre-wrap {white-space: pre-wrap;}
p {overflow-x: hidden; text-overflow: ellipsis;}
</style>
글이 숨겨지는 부분이 ...으로 표현되며 가시적으로 이후의 글이 의도적으로 가려져 있음을 알려줄 수 있게 되었다.
이러한 기능들은 게시판 제목 등 많은 글을 한 번에 나타내기 힘든 곳에서 유용하게 사용할 수 있다.