반응형 웹 실전 프로젝트 #15 (문단 paragraph 관련 스타일)
HTML, CSS 2020. 7. 23. 17:00반응형
문단 관련 스타일은 그 적용 결과가 글자 개체보다는 문단별로 보았을때 더 두드러지게 나타나는 속성들로 구성되어 있다
text-align
블록 요소에만 적용되는 속성으로, 문단을 블록의 왼쪽, 가운데, 오른쪽, 양쪽등으로 정렬
| 속성값 | 속성 설명 |
| left | 왼쪽 정렬 |
| center | 중앙 정렬 |
| right | 오른쪽 정렬 |
| justify | 양쪽 정렬 |
예제를 통해 네가지 값의 결과를 살펴보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자의 그림자 효과</title>
<style type="text/css">
p {
margin: 10px 110px;
padding: 10px;
border: 1px solid crimson;
}
.txt1 {
text-align: left;
}
.txt2 {
text-align: right;
}
.txt3 {
text-align: center;
}
.txt4 {
text-align: justify;
}
</style>
</head>
<body>
</body>
<p class="txt1">
누가 교육받은 사람인가?
첫째로, 교양있는 사람이란 환경의 지배를 받는 사람이 아니라 환경을 지배하는 사람을 의미한다.
</p>
<p class="txt2">
둘째로, 교양있는 사람이란 어떤 경우에도 용감하게 행동하고 지적으로 생각하는 사람을 의미한다.
</p>
<p class="txt3">
셋째로, 교양있는 사람이란 모든 것을 명예롭게 처리하는 자, 다시 말해서 마음에 들지 아니하는 사람과 물건까지도 정정당당하게 처리하는 사람을 의미한다.
넷째로, 교양있는 사람이란 쾌락을 절제하며 불행에 빠지지 않는 사람을 의미한다.
</p>
<p class="txt4">
마지막으로 교양 있는 사람이란 성공 때문에 명예를 더럽히지 않는 사람을 의미한다.
소크라테스
</p>
</html>
정렬이 더 잘보이도록 안여백 10px, 바깥여백 세로 10px, 가로 110px을 부여 했다
vertical-align
이미지나 폼 요소를 위, 가운데, 아래로 세로 정렬시켜주는 속성으로 img, input, select, label, 테이블의 th, td등에서 사용된다
| 속성값 | 속성설명 |
| top | 위쪽 정렬 |
| middle | 세로 중앙 정렬 |
| bottom | 아래쪽 정렬 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자의 그림자 효과</title>
<style type="text/css">
p {
border: 1px solid #000;
}
.valign img {
vertical-align: middle;
}
</style>
</head>
<body>
<p>
나는 자유다
<img src="./public/images/icon.png" width="100" alt="롤아이콘">
</p>
<p class="valign">
나는 자유다
<img src="./public/images/icon.png" width="100" alt="롤아이콘">
</p>
</body>
</html>
text-indent
문단의 첫 머리를 들여쓰기 해주는 속성으로 블록 요소에만 적용된다
p요소에 text-indent속성을 부여하여 들여쓰기를 적용해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 들여쓰기</title>
<style type="text/css">
p {
padding: 10px 50px;
}
.paper {
text-indent: 15px;
}
</style>
</head>
<body>
<p>
나는 잘 되겠다고 노력하는 그 이상으로
잘 사는 방법은 없고, 실제로 잘 되어 간다고 느끼는
그 이상으로 큰 만족은 없다고 생각한다.
이것은 내가 오늘날까지 살아오며 경험하고
있는 행복이다.
</p>
<p class="paper">
나는 잘 되겠다고 노력하는 그 이상으로
잘 사는 방법은 없고, 실제로 잘 되어 간다고 느끼는
그 이상으로 큰 만족은 없다고 생각한다.
이것은 내가 오늘날까지 살아오며 경험하고
있는 행복이다.
</p>
</body>
</html>
text-indent속성을 음수로 지정하면 어떤 결과가 나타날까
예를들어 text-indent: -9000px; 로 지정하면 글자가 왼쪽 멀리 가버리므로 보이지 않게 된다
불가피 하게 링크에 배경 이미지로 글자가 들어 있다면 이방법을 이용할수 있다
즉 display: none; 이나 visiblity: hidden; 없이도 글자를 안보이게 할수 있고
링크 텍스트를 넣어 접근성을 높이기 때문에 정말 요소를 숨긴것이 아니어서 스크린리더기에서는 읽어 줄수 있다
a.imgbg{
text-indent: -9000px;
overflow: hidden;
}overflow: hidden; 은 구형 브라우저에서도 링크 영역이 밖으로 잡히는 오류를 방지해준다
word-wrap
영문을 띄어쓰기 없이 길게 입력 하면 width값을 주어도 박스 밖으로 튀어 나오게 된다
CSS3에서는 word-wrap속성을 이용하여 이것을 가로 폭에 맞추어 적당히 잘라 다음줄로 내려오도록 할수 있다
word-wrap: break-word;예제를 통해 긴 이메일 주소가 박스 밖으로 빠져나가지 않도록 word-wrap속성을 부여해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 들여쓰기</title>
<style type="text/css">
ul {
width: 200px;
border: 1px solid #000;
}
.wrapping li {
word-wrap: break-word;
}
</style>
</head>
<body>
<ul>
<li>
<p>이름: 홍길동</p>
</li>
<li>
<p>이메일: honggindong20181025koreacampingpeoplepublic@hanmail.net</p>
</li>
</ul>
<ul class="wrapping">
<li>
<p>이름: 홍길동</p>
</li>
<li>
<p>이메일: honggindong20181025koreacampingpeoplepublic@hanmail.net</p>
</li>
</ul>
</body>
</html>
word-break
css3에서는 줄 끝에서 어떻게 단어를 끊어주어야 하는지에 관하여 이 속성을 제공 하고 있다
| 속성값 | 속성 설명 |
| normal | 기본값 |
| break-all | 글자가 넘치면 줄바꿈 |
| keep-all | 단어를 끊어 줄바꿈을 하지 않음 |
keep-all은 lang="ko"일경우 mac 사파리에서는 동작 하지 않는다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 들여쓰기</title>
<style type="text/css">
p {
width: 200px;
text-align: center;
border: 1px solid #000;
}
.breaking1 {
word-break: normal;
}
.breaking2 {
word-break: break-all;
}
.breaking3 {
word-break: keep-all;
}
</style>
</head>
<body>
<p class="breaking1">
홍길동<br>
한국사회 역사연구회 고고학과 전임교수<br>
notonlystartinggoods@naver.com
</p>
<p class="breaking2">
홍길동<br>
한국사회 역사연구회 고고학과 전임교수<br>
notonlystartinggoods@naver.com
</p>
<p class="breaking3">
홍길동<br>
한국사회 역사연구회 고고학과 전임교수<br>
notonlystartinggoods@naver.com
</p>
</body>
</html>
차이점은 알수있지만 모두 문제가 있다
단어가 떨어지지 않는 세번째가 가장좋지만 이메일이 상자 밖으로 튀어나가버린다
이럴때 world-wrap: break-word;를 이용한다
그러면 다음과 같이 단어도 유지되고 이메일 주소도 밖으로 나가지 않게 된다
.breaking3 {
word-break: keep-all;
word-wrap: break-word;
}
white-space
마크업한 문자들 사이의 공백을 처리하여 내보내는 속성이다
| 속성 값 | 속성 설명 |
| normal | 연속 공백들과 줄바꿈이 하나의 공백으로 처리 길면 줄바꿈 일어남 |
| nowrap | 연속 공백들과 줄바꿈이 하나의 공백으로 처리 길어도 줄바꿈 없이 박스 밖으로 나감 |
| pre | 연속 공백들과 줄바꿈이 소스 그대로 표현 |
| pre-wrap | 연속 공백들과 줄바꿈이 소스 그대로 표현 길면 줄바꿈 일어남 |
| pre-line | 연속 공백들이 하나의 공백으로 처리 줄바꿈은 소스 그대로 표현되나 길면 줄바꿈됨 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 들여쓰기</title>
<style type="text/css">
p {
width: 400px;
border: 1px solid #000;
}
.white1 {
white-space: normal;
}
.white2 {
white-space: nowrap;
}
.white3 {
white-space: pre;
}
.white4 {
white-space: pre-line;
}
.white5 {
white-space: pre-wrap;
}
</style>
</head>
<body>
<p class="white1">
인생은 사는 것이 중요한 문제가 아니라 바로 사는 것이 중요하다.
- 소크라테스
</p>
<p class="white2">
인생은 사는 것이 중요한 문제가 아니라 바로 사는 것이 중요하다.
- 소크라테스
</p>
<p class="white3">
인생은 사는 것이 중요한 문제가 아니라 바로 사는 것이 중요하다.
- 소크라테스
</p>
<p class="white4">
인생은 사는 것이 중요한 문제가 아니라 바로 사는 것이 중요하다.
- 소크라테스
</p>
<p class="white5">
인생은 사는 것이 중요한 문제가 아니라 바로 사는 것이 중요하다.
- 소크라테스
</p>
</body>
</html>
text-overflow
긴 텍스트에 말줄임 기호를 사용하고자 할때
CSS3에서 제공하는 속성으로는 다음과 같다
text-overflow: ellipis;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자 들여쓰기</title>
<style type="text/css">
ul,
li,
h3 {
margin: 0;
padding: 0;
}
a {
display: block;
margin: 10px;
text-decoration: none;
color: darkblue;
}
.notice a h3 {
width: 200px;
border: 1px solid #aaa;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<ul class="notice">
<li>
<a href="#">
<h3>시간 배분을 위하여 현명한 판단을 바랍니다.</h3>
</a>
</li>
<li>
<a href="#">
<h3>욕심껏 내용을 채우는 것도 좋겠습니다.</h3>
</a>
</li>
<li>
<a href="#">
<h3>결과물을 볼수 있어야 하는것이 우선입니다.</h3>
</a>
</li>
</ul>
</body>
</html>
display
요소의 성격을 바꿔주는 속성으로, display가 어떻게 설정 되어 있는지에 따라 그 후 사용할수 있는 속성이 달라지므로 주의해야 한다
블록, 인라인요소 변경
html요소들은 block 또는 inline의 기본값들을 가지고 있는데 그 기본값을 변경할수 있다
| 속성값 | 속성설명 |
| block | inline요소의 성격을 block으로 변경 줄바꿈됨 |
| inline | block요소의 성격을 inline으로 변경 줄바꿈이 일어나지 않음 |
| inline-block | inline요소의 성격을 inline-block으로 변경 줄바꿈은 일어나지 않으나 block요소만 사용할수 있는 text-align등의 속성들을 사용할수 있게 됨 |
| none | 요소를 보이지 않게 숨기고 흔적도 숨김 |
html5의 요소를 인식 하지 못하는 구형 브라우저를 대비해 CSS앞단에 다음과 같이 블록을 선언할때 필요함
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
display: block;
}block 요소를 inline요소로 변경하면 줄바꿈이 일어나지 않게 된다
inline요소를 inline-block으로 변경하면 줄바꿈은 하지 않으면서 block요소에만 줄수 있는 속성을 적용할수 있다
a요소에 inline-block을 부여하여 padding(안여백), text-align등을 적용하고, height와 line-height를 동일 하게 주어 세로 중앙 정렬을 적용하고 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록과 인라인</title>
<style type="text/css">
li {
list-style: none;
}
.gnb li {
display: inline;
}
.gnb li a {
display: inline-block;
background: brown;
color: #fff;
width: 100px;
height: 36px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.gnb li a:hover {
text-decoration: underline;
background: #369;
}
</style>
</head>
<body>
<ul class="gnb">
<li><a href="#">Company</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Community</a></li>
</ul>
</body>
</html>
table-cell, flex, grid
display는 또한 요소의 성격을 table이나 table내의 요소들처럼 변경할수 있고
flex 레이아웃을 선언할때나 grid 레이아웃을 선언할때 사용하기도 한다
테이블에 관련된 속성중 td의 역할을 하는 table-cell에 대해서 알아보자
요소 안의 문자를 세로 중앙 정렬 하면 height와 line-height값을 동일 하게 주면된다
그러나 내용이 여러줄일경우 동일 하게 line-height를 지정 할수 없는데
이때 table-cell을 이용하면 해결할수 있다
display속성을 table-cell로 지정한후 vertical-align을 이용하여 세로 중앙 정렬을 해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table-cell</title>
<style type="text/css">
p {
padding: 10px;
background-color: antiquewhite;
}
.valign1 {
height: 50px;
line-height: 50px;
}
.valign2 {
height: 100px;
vertical-align: middle;
}
.valign3 {
height: 100px;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<p class="valign1">잉여인간이 행복한 나라</p>
<p class="valign2">
정보는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는게 지금 현실이다.
돈을 주는것 외에 행복한 갊을 살도록 해주는것이 선진국으로 가는 길일것이다.
</p>
<p class="valign3">
정보는 아이를 많이 낳으라고 하지만 그 아이들을 다 살릴 수도 없는게 지금 현실이다.
돈을 주는것 외에 행복한 갊을 살도록 해주는것이 선진국으로 가는 길일것이다.
</p>
</body>
</html>
문장이 한 줄일경우 높이와 줄 간격을 동일하게 주어 세로 중앙 정렬 할수 있다
세로로 정렬되는 것을 알아보기 위해 높이 값을 넉넉히 준다
요소에 td의성격을 부여 한다
세로 중앙 정렬을 명령 한다
visibility
요소를 숨기거나 보여주도록 해주는 속성
| 속성값 | 속성설명 |
| visible | 요소를 보여줌 |
| hidden | 요소를 숨김(내용이 있던 자리는 남아 있음) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table-cell</title>
<style type="text/css">
.box {
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
.hdd {
display: none;
}
.hdd2 {
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
<p><strong>이름: </strong>홍길동</p>
<p><strong>연락처: </strong>서울 종로구 세검정 </p>
</div>
<div class="box">
<p><strong class="hdd">이름: </strong>홍길동</p>
<p><strong class="hdd">연락처: </strong>서울 종로구 세검정 </p>
</div>
<div class="box">
<p><strong class="hdd2">이름: </strong>홍길동</p>
<p><strong class="hdd2">연락처: </strong>서울 종로구 세검정 </p>
</div>
</body>
</html>
두번째 박스의 display:none;으로 숨겨진 요소들은 흔적도 없지만
마지막 박스의 visibility: hidden;으로 숨겨진 요소들은 자리가 빈칸으로 남아 있다
display:none;, visibility: hidden;은 차이점은 있으나 둘다 컨텐츠를 숨기는 기능이므로 스크린리더기에서도 읽어주지 않는것을 기본으로 하고 있다
웹 접근성을 준수 하기 위해서 읽어주기는 하되 시각적으로만 숨겨야 하는 경우 이속성을 사용하지 말자
대신 position등을 이용해서 해결할수 있다
overflow
| 속성값 | 속성 설명 |
| scroll | 컨텐츠가 넘치지 않아도 스크롤바를 생성 scroll-x, scroll-y: 한방향으로만 스크롤바 생성 가능 |
| visible | 넘치는 컨텐츠가 그대로 노출됨 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table-cell</title>
<style type="text/css">
.agree {
width: 660px;
height: 180px;
border: 1px solid #000;
overflow-y: scroll;
}
</style>
</head>
<body>
<h3>서비스 이용약관</h3>
<p class="agree">
사용자가 Google 서비스에 액세스할 때 사용하는 앱, 브라우저, 기기에 대한 정보를 수집합니다. 이 정보를 이용하여 자동 제품 업데이트, 배터리가 부족할 때 화면을 어둡게 하는 기능 등을 제공할 수
있습니다.
수집하는 정보에는 고유 식별자, 브라우저 유형 및 설정, 기기 유형 및 설정, 운영체제, 통신사명과 전화번호를 포함한 모바일 네트워크 정보, 애플리케이션 버전 번호가 포함됩니다. 또한 IP 주소,
비정상 종료 보고서, 시스템 활동, 요청 날짜와 시간, 리퍼러 URL 등 사용자의 앱, 브라우저, 기기와 Google 서비스의 상호작용에 대한 정보를 수집합니다.
기기의 Google 서비스가 서버에 연결될 때, 예를 들어 Play 스토어에서 앱을 설치할 때나 서비스가 자동 업데이트를 확인할 때 이 정보를 수집합니다. Google 앱이 설치된 Android 기기를
사용하는 경우 기기는 주기적으로 Google 서버에 연결되어 기기와 서비스 연결에 대한 정보를 제공합니다. 이 정보에는 기기 유형, 통신사명, 비정상 종료 보고서, 설치한 앱 종류 등이 포함됩니다.
</p>
</body>
</html>
종합예제를 통해 문단 관련 스타일을 연습해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table-cell</title>
<style type="text/css">
h1 {
letter-spacing: 5px;
}
p {
width: 500px;
text-align: justify;
text-indent: 15px;
text-transform: lowercase;
}
</style>
</head>
<body>
<h1>데이터 전송에 관한 제도</h1>
<p>
EU-U.S. Privacy Shield(유럽연합-미국 프라이버시 실드) 및 Swiss-U.S. Privacy Shield(스위스-미국 프라이버시 실드) 제도
Google의 Privacy Shield(프라이버시 실드) 인증서에 명시된 것과 같이, Google은 유럽 연합 회원국(EEA 회원국 포함)과 영국 및 스위스에서 개인정보를 수집, 사용 및 보관하는 데
있어 미국 상무부가 정한 EU-U.S. Privacy Shield(유럽연합-미국 프라이버시 실드) 및 Swiss-U.S. Privacy Shield(스위스-미국 프라이버시 실드) 프레임워크를 각각
준수합니다. 명시적으로 제외되지 않는 한 Google LLC 및 Google이 전액 출자한 미국 내 자회사를 포함하여, Google은 프라이버시 실드 원칙을 준수한다는 인증을 받았습니다. Google은
'Google에서 공유하는 정보' 항목에 명시된 것과 같이, Google을 대신하여 외부 처리가 필요한 경우 제3자 전송 원칙(Onward Transfer Principle)에 따라 타사와 공유하는
사용자의 모든 개인정보에 책임을 집니다. 프라이버시 실드 프로그램에 관하여 보다 자세히 알아보고 Google의 인증서를 확인하려면 프라이버시 실드 웹사이트를 방문하시기 바랍니다.
</p>
</body>
</html>
반응형
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #17 (BOX MODEL) (0) | 2020.07.23 |
|---|---|
| 반응형 웹 실전 프로젝트 #16 (배경 background) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #14 (문자 관련 스타일) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #12 ~ #13 (CSS 기본문법 + 선택자) (0) | 2020.07.23 |
| 반응형 웹 실전 프로젝트 #11 (미디어 요소) (0) | 2020.07.17 |