<CSS> 스타일 지정 언어
1. 사용
1) 인라인 스타일 : HTML - head 태그 안에서 사용
2) 내부 스타일 시트 : body 태그 안에 있는 다른 태그들의 인라인으로 사용
3) 외부 스타일 시트 : link를 이용해서 외부 주소로 불러오기
2. selector 선택자
1) 타입 선택자 : 태그 이름을 지정하여 선언
case 1) <pre> 태그에 스타일을 지정 : pre{ ... }
2) id 선택자 : 요소에 id 지정. 지정된 id값을 사용해 선택. #으로 구분
case 2) id가 s-id인 요소에 스타일 지정 : #s-id{ ... }
3) class 선택자 : 요소에 class 지정. 지정된 class값을 사용해 선택. .(dot)으로 구분
case 3) class가 s-cls인 요소에 스타일 지정 : .s-cls{ ... }
4) 전체 선택자 : *
case 4) 전체 요소에 스타일 지정 : *{ ... }
5) 자식 선택자
case 5-1) id가 atc인 요소의 자식 태그 div에 스타일 지정 : #atc>div{ ... }
case 5-2) case 5-1 자식 태그 p에 스타일 지정 : #atc>div>p{ ... }
6) 인접 선택자 : 지정한 요소 다음에 나오는 요소를 선택
case 6) span 태그 바로 다음의 pre 태그에 스타일 지정 : span+pre{ ... }
7) 하위 선택자 : 특정 요소 하위의 요소를 지정할 때 선택
case 7) id가 atc인 요소 아래 있는(안에 있는) 모든 span 태그에 스타일 지정 : #atc span{ ... }
8) 속성 선택자 : 속성이 정의된 태그만 선택
case 8) title이 정의되어 있는 p태그인 요소만 스타일 지정 : p[title]{ ... }
9) 가상 클래스 선택자 : 특정 이벤트가 발생한 태그 선택
<!DOCTYPE html>
<head>
<style type="text/css">
a:link{ /* 링크 기본 설정 */
color : green;
font-size: 15pt;
}
a:visited{ /* 방문 했던 곳 */
color : lightslategrey;
}
a:hover{ /* 마우스 올렸을 때 반응 */
background-color: black;
color:white;
}
a:active{ /* 클릭시 */
background-color: yellow;
color: tomato;
}
input:checked{ /* 체크박스 클릭 했을 때 */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<article>
<h3>가상 클래스 선택자</h3>
<ul>
<li>특정 이벤트가 발생한 태그 선택</li>
<li><a href="https://www.naver.com">네이버</a></li>
<li><a href="http://www.ubuntu.com">우분투</a></li>
<li><input type="checkbox">체크하면 커짐!</li>
</ul>
</article>
</body>
</html>가상 클래스 선택자
3. 폰트
<!DOCTYPE html>
<head>
<style type="text/css">
@font-face {
font-family: "Goyang"; /* 글씨체 */
src: url("resources/fonts/Goyang.otf"); /* 폰트 주소 등록 */
}
div > h1{
font-weight: bold; /* 글자 굵기 속성 */
font-style: italic; /* 글자 모양(이태릭체) */
font-variant: small-caps; /* 소문자를 작은 크기의 대문자로 바꿔줌 */
font-size: 25pt;
line-height: 500%; /* 줄 높이(글간..?) */
font-family: "Goyang";
}
</style>
</head>
<body> ...* font 한줄 코드 : style→variant→weight→size/line-height→family
ex) div>h1{font:italic small-caps bold 25px/500% Goyang;}
4. 상자 : 구역에 태두리 그려주면 그게 상자야..
<!DOCTYPE html>
<head>
<style type = 'text/css'>
dl, dd, dt, p{
margin : 0px;
padding : 0px;
}
/* #00(red)00(green)00(blue) */
.todo{
width: 600px;
border: 3px #123456 double;
}
dt{
background: #abcdef;
text-align: center;
font-size: 20px;
letter-spacing: 15px;
padding: 15px;
border-bottom: #123456 5px double;
}
dd{
padding: 10px;
}
.box{
border-bottom: #123456 1px dotted;
}
</style>
</head>
<body>
<dl class='todo'>
<dt>오늘의 할일</dt>
<dd class = "box">
<h2>수업듣기 (9~18시)</h2>
<p>js 수업 진도나감.</p>
</dd>
<dd>
<h2>자습 (19~22시)</h2>
<p>알고리즘도 해야하고, css 정리도 해야해...</p>
</dd>
</dl>
</body>
</html>- 오늘의 할일
-
수업듣기 (9~18시)
js 수업 진도나감.
-
자습 (19~22시)
알고리즘도 해야하고, css 정리도 해야해...
5. float : 흐르기 정렬. float를 지정한 해당 구역에서 옆쪽으로 컨텐츠들을 흘러 내려갈 수 있도록 구성.
ex) float : right, float: left... 오른쪽으로 흘러가게(채워지도록), 왼쪽으로 흘러가게(채워지도록) ...
6. clear : float 효과 무시하고 다음 위치에 컨텐츠 나타남.
7. display : 요소를 어떻게 보여줄까
ex) display : inline (인라인으로 구성), display : block (블록으로 구성), display : none (안보임. 자리차지 안함)
8. overflow : 영역 밖에 효과를 지정 (숨기기, 스크롤 등)
ex) overflow : auto(자동), overflow : hidden(숨기기), overflow : scroll(스크롤)
9. position : 위치 지정
1) position : relative (원래 자신의 위치에서 얼마나 움직이는지)
2) position : absolute (부모 위치 기준으로 상대적으로 얼마나 움직이는지)
3) position : fixed (브라우저 기준으로 얼마나 움직이는지)
+) z-index : 위로 아래로 말고 앞으로. ppt 도형 앞으로 가져오기처럼...
10. border : 태두리 속성 지정
ex) 원 그리기
<!DOCTYPE html>
<head>
<style>
li{
list-style: none;
width: 100px;
height: 100px;
text-align: center;
float: left;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
-ms-border-radius: 50px 50px 50px 50px;
-o-border-radius: 50px 50px 50px 50px;
/*
webkit : 구글, 사파리
moz : 파이어폭스
ms : 익스플로러
o : 오페라
*/
color: yellow;
font-size: 50px;
}
#ball01{background: red;}
#ball02{background: green;}
#ball03{background: blue;}
</style>
</head>
<body>
<ul>
<li id="ball01"><span>C</span></li>
<li id="ball02"><span>S</span></li>
<li id="ball03"><span>S</span></li>
</ul>
</body>
</html>11. transform : 형태 변환 및 이동
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 200px;
height: 200px;
background: thistle;
color: blueviolet;
font-size: 30pt;
word-wrap: break-word;
}
#tlate{
transform : translate(50px, 50px)
}
#trotate{
transform: rotate(30deg);
}
#tscale{
transform: scale(0.5, 0.5);
}
#tskew{
transform: skew(20deg, 10deg);
}
#tran{
transition: width 0.5s, background 1.5s linear, transform 1.5s;
}
#tran:hover{
transform: translate(100px, 0px);
}
li{
width: 300px;
background: rgb(214, 126, 126);
margin-bottom: 3px;
font-size: 30pt;
list-style-type: none;
cursor: pointer;
transition: width 1s linear, color 1s linear, letter-spacing 1s;
}
li:hover{
width: 400px;
color: rgb(212, 226, 255);
letter-spacing: 5px;
}
</style>
</head>
<body>
<h2>Transform - translate</h2>
<div id="tlate">translate(x,y) : 위치 이동</div>
<br><br><br>
<h2>Transform - rotate</h2><br>
<div id='trotate'>rotate(deg) : 회전</div>
<br><br><br>
<h2>Transform - scale</h2>
<div id="tscale">scale(x, y) : 크기</div>
<br><br><br>
<h2>Transform - skew</h2>
<div id='tskew'>skew(deg, deg) : 변형. (x축 기울임, y축 기울임)</div>
<br><br><br>
<h2>Transform 속성 전환</h2>
<div id='tran'>transition</div>
<br>
<h1>MENU</h1>
<ul>
<li>자기개발</li>
<li>독학</li>
<li>멀티캠퍼스</li>
<li>글쓰기</li>
</ul>
</body>
</html>
'코딩 어쩌구 > web' 카테고리의 다른 글
| [풀스택] jQuery (0) | 2022.01.30 |
|---|---|
| [풀스택] JavaScript (2) : DOM (0) | 2022.01.29 |
| [풀스택] JavaScript (1) : 기본 조작 (0) | 2022.01.27 |
| [풀스택] HTML, CSS로 Layout 만들기 (0) | 2022.01.26 |
| [풀스택] HTML (0) | 2022.01.20 |
