오늘 역시 배운게 별로 없다.
아무래도 css가 상당히 기능이 많고 하나를 구현하면 하나가 안되는 식으로 복잡하다보니, 실습에 시간이 오래 걸려서 그런것 같다.
그래서 앞으로 남는 시간에 개인적으로 자바로 테트리스 만드는 프로젝트를 하려고 한다. 그에 관해서는 다른 카테고리를 하나 만들어 정리하겠다.
word-break와 word-wrap속성
break는 단어의 분리, wrap는 단어의 줄바꿈에 대한 속성이다.
둘 모두 동양권(한.중.일)만 특이 케이스로 취급받고, 나머지는 언어는 모두 동일하다.
동양권의 경우 음절(글자 하나)를 기준으로 줄바꿈이 되거나 나눠지지만, 나머지 언어는 단어를 기준으로 나눠진다.
word-break:
normal: 기본값. 한.중.일을 제외한 언어는 단어(공백 또는 -(하이픈)을 기준)으로 나눈다. 한중일은 음절
break-all: 음절로 나누게 한다. 한중일은 변화 없음.
keep-all: 단어를 기준으로 나누게 한다. 한중일을 제외한 언어는 변화 없음.
word-wrap:
기본적으로 한글자씩 나눠지는 한중일의 언어는 칸이 작더라도 문제가 되지 않지만, 단어를 기준으로 나뉘는 언어들은 한 단어도 감당하지 못할 정도로 칸이 작으면 줄바꿈에 문제가 생길수도 있다. 이를 해결하기 위해서 break-word속성을 부여해서 글자단위로 나눠야 한다.
normal: 기본값. 단어 단위로 줄바꿈(한중일 제외)
break-word: 글자단위로 줄바꿈. 단어 중간이더라도 칸이 모자르면 글자 단위로 줄바꿈됨.
가상생성자
원하는 태그 뒤나 앞에 div형식의 태그가 생성된다. 다만 이는 html 에서 생성되는 것이 아닌, 주어진 속성을 처리하기 위해 css에서 자체적으로 생성하는 것이기에 간단한 내용만 적는 것이 좋다.
::before 또는 ::after이 있다. 각각 앞이나 뒤에 추가한다.
사용법
div::after{ width 10px; height 10px; background-color:black;}이런식으로 작성하면 10*10짜리의 검은 사각형 점이 생기는 것이다.
큰 이미지의 필요한 부분만 잘라서 쓰기-스프라이트
1. 이미지를 담을 태그를 준비해, 자르고자 하는 이미지의 크기만큼 크기를 지정한다.
2. background: url() 속성으로 이미지를 담는다. 이때 반복을 막기 위해 no-repeat를, x,y주소 고정을 위해 0 0 을 쓴다.
div{ background: url(주소) no-repeat 0 0;}3. background-size: 가로 세로; 를 통해 자르고자 하는 이미지의 가로와 세로의 크기를 적어준다.
4. 2와 3에서 받은 정보를 토대로 자를 곳을 지정한다. background-position: 태그를 사용한다.
div {
width: 14px; /*원하는 이미지 크기*/
height: 12px;
display: inline-block;
background: url('daum_ico_login.png') no-repeat 0 0; /*좌표지정*/
background-size: 200px 100px; /*이미지 사이즈*/
background-position: -70px 0; /*자르고자 하는 좌표*/
}조그마한 사진을 사용할때 많이 사용하는 방법이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>word-break 속성과 word-wrap 속성</title>
<!-- word-break : 단어의 분리를 어떻게 할 것인지 결정. -->
<!-- word-wrap : 자기영역을 벗어난 단어의 줄바꿈을 어떻게 할 것인가? -->
<!-- CJK(Chinese, Japanes, Korean 의 약자) : 중국어/일본어/한글 -->
<!-- non-CJK(숫자, 영어, 베트남어 등) -->
<!-- word-break의 단어 분리 -->
<!-- normal(기본값) break-all keep-all -->
<!-- non-CJK의 경우 - 단어(공백, 하이픈(-)) 음절 공백,하이픈 -->
<!-- CJK의 경우 - 음절 음절 공백,하이픈,그외기호 -->
<!-- word-wrap의 단어 분리 -->
<!-- normal(기본값) break-word -->
<!-- non-CJK의 경우 - 단어넘침 O 단어넘침 X -->
<!-- CJK의 경우 - 단어넘침 X 단어넘침 X -->
<style>
.container {
border: 2px solid black;
/* word-wrap: normal; */
}
</style>
</head>
<body>
<div class="container">
한국어
김춘수의 「꽃」
내가 그의 이름을 불러 주기 전에는
그는 다만
하나의 몸짓에 지나지 않았다.
내가 그의 이름을 불러 주었을 때
그는 나에게로 와서
꽃이 되었다.
</div>
<div class="container">
일본어
キム・チュンスの「花」
私が彼の名前を呼ぶ前に
彼はちょうど
一つのジェスチャーに過ぎなかった。
私が彼の名前を呼んだとき
彼は私に来て
花になった。
</div>
<div class="container">
중국어
金春洙的《花》
直到我叫他的名字
他只是
这只不过是一个手势。
当我叫他的名字时
他来找我
变成了一朵花
</div>
<br>
<div class="container">
영어
“Flower” by Chunsu Kim
Until I called his name
he just
It was nothing more than a gesture.
when i called his name
he came to me
has become a flower
</div>
<div class="container">
베트남어
“Hoa” của Chunsu Kim
Cho đến khi tôi gọi tên anh ấy
anh ấy chỉ
Đó chẳng qua chỉ là một cử chỉ.
khi tôi gọi tên anh ấy
anh ấy đến với tôi
đã trở thành một bông hoa
</div>
<div class="container">
아랍어
"زهرة" تشونسو كيم
حتى اتصلت باسمه
هو فقط
لم يكن أكثر من لفتة.
عندما ناديت اسمه
جاء إلي
أصبحت زهرة
</div>
<div class="container">
프랑스어
"Fleur" de Chunsu Kim
Jusqu'à ce que j'appelle son nom
Il a juste
Ce n'était rien de plus qu'un geste.
quand j'ai appelé son nom
il est venu vers moi
est devenu une fleur
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script>
TweenMax.to('.container', 8, {
width: 200,
repeat: -1,
repeatDelay: 2,
yoyo: true,
ease: Power0.easeNone
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>word-break 속성과 word-wrap 속성</title>
<!-- word-break : 단어의 분리를 어떻게 할 것인지 결정. -->
<!-- word-wrap : 자기영역을 벗어난 단어의 줄바꿈을 어떻게 할 것인가? -->
<!-- CJK(Chinese, Japanes, Korean 의 약자) : 중국어/일본어/한글 -->
<!-- non-CJK(숫자, 영어, 베트남어 등) -->
<!-- word-break의 단어 분리 -->
<!-- normal(기본값) break-all keep-all -->
<!-- non-CJK의 경우 - 공백, 하이픈(-) 음절 공백,하이픈 -->
<!-- CJK의 경우 - 음절 음절 공백,하이픈,그외기호 -->
<!-- word-wrap의 단어 분리 -->
<!-- normal(기본값) break-word -->
<!-- non-CJK의 경우 - 단어넘침 O 단어넘침 X -->
<!-- CJK의 경우 - 단어넘침 X 단어넘침 X -->
<style>
.container {
border: 2px solid black;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
한국어
김춘수김춘수김춘수김춘수김춘수김춘수김춘수김춘수김춘수김춘수
김춘수의 「꽃」
내가 그의 이름을 불러 주기 전에는
그는 다만
하나의 몸짓에 지나지 않았다.
내가 그의 이름을 불러 주었을 때
그는 나에게로 와서
꽃이 되었다.
</div>
<div class="container">
일본어
私が彼私が彼私が彼私が彼私が彼私が彼私が彼私が彼私が彼私が彼
キム・チュンスの「花」
私が彼の名前を呼ぶ前に
彼はちょうど
一つのジェスチャーに過ぎなかった。
私が彼の名前を呼んだとき
彼は私に来て
花になった。
</div>
<div class="container">
중국어
金春洙金春洙金春洙金春洙金春洙金春洙金春洙金春洙金春洙金春洙
金春洙的《花》
直到我叫他的名字
他只是
这只不过是一个手势。
当我叫他的名字时
他来找我
变成了一朵花
</div>
<br>
<div class="container">
영어
ChunsuKimChunsuKimChunsuKimChunsuKimChunsuKimChunsuKimChunsuKim
“Flower” by Chunsu Kim
Until I called his name
he just
It was nothing more than a gesture.
when i called his name
he came to me
has become a flower
</div>
<div class="container">
베트남어
đếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđếnđến
“Hoa” của Chunsu Kim
Cho đến khi tôi gọi tên anh ấy
anh ấy chỉ
Đó chẳng qua chỉ là một cử chỉ.
khi tôi gọi tên anh ấy
anh ấy đến với tôi
đã trở thành một bông hoa
</div>
<div class="container">
아랍어
اتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلتاتصلت
"زهرة" تشونسو كيم
حتى اتصلت باسمه
هو فقط
لم يكن أكثر من لفتة.
عندما ناديت اسمه
جاء إلي
أصبحت زهرة
</div>
<div class="container">
프랑스어
étaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétaitétait
"Fleur" de Chunsu Kim
Jusqu'à ce que j'appelle son nom
Il a juste
Ce n'était rien de plus qu'un geste.
quand j'ai appelé son nom
il est venu vers moi
est devenu une fleur
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script>
TweenMax.to('.container', 8, {
width: 200,
repeat: -1,
repeatDelay: 2,
yoyo: true,
ease: Power0.easeNone
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>큰 이미지를 쪼개쓰기-스프라이트</title>
<style>
div {
width: 14px;
height: 12px;
display: inline-block;
/* CSS 한줄표현 */
background: url('daum_ico_login.png') no-repeat 0 0;
background-size: 200px 100px;
background-position: -70px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>before after : 가상요소 선택자</title>
<!-- body의 html요소에는 없는데, CSS에 정의하여 런타임(실행)시 -->
<!-- 에 들어가는 가상요소를 의미 -->
<style>
.before::before {
content: "before는 콘텐츠 앞에 생성됨.";
color: red;
}
.after::after {
content: "after는 콘텐츠 뒤에 생성됨.";
color: blue;
}
</style>
</head>
<body>
<p class="before">before 예시</p>
<p class="after">after 예시</p>
<p class="before after">before/after 같이 사용할 때 예시</p>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<title>가상요소 선택자 사용2</title>
<style>
.box {
max-width: 550px;
padding: 32px 36px;
/* width, height = 콘텐츠+패딩+테두리굵기 */
box-sizing: border-box;
margin: 0 auto;
text-align: center;
position: relative;
}
.box::before {
content: '';
width: 26px;
height: 26px;
border-top: 6px solid #CECECE;
border-left: 6px solid #4A4A4A;
position: absolute;
top: 0;
left: 0;
}
.box::after {
content: '';
width: 26px;
height: 26px;
border-bottom: 6px solid #CECECE;
border-right: 6px solid #4A4A4A;
position: absolute;
bottom: 0;
right: 0;
}
.title {
font-weight: 600px;
/* 1.8em */
line-height: 1.8;
font-size: 26px;
}
</style>
</head>
<body>
<div class="box">
<div class="title">신에게는 아직 12척의 배가 있사옵나이다!</div>
</div>
</body>
</html>'공부 > html --- css' 카테고리의 다른 글
| 36일차 -실전예제 (0) | 2023.01.02 |
|---|---|
| 28일차 복습 (0) | 2022.12.21 |
| 25일차 복습 (0) | 2022.12.19 |
| 24일차 복습 (0) | 2022.12.15 |
| 23일차 복습 (0) | 2022.12.14 |
