1.가상클래스와 가상 요소
1) 앵커 가상 클래스
앵커의 요소에 특정 디자인을 입혀주는 동적인 스타일을 만듬
:hover : 사용자가 해당 요소에 커서를 올렸을 때
:active : 요소가 활성화 디었거나 클릭했을 때
:focus : 해당 요소에 키보드 포커스가 맞춰졌을 때
.visited : 사용자가 해당 링크을 다녀왔을 때
:link : 해당요소에 하이퍼링크가 적용 됐을 때
ex)
<style>
a:link { color: black; text-decoration: none; }
a:visited { color: orange; text-decoration: none; }
a:hover { color: deeppink; text-decoration: none; }
a:active { color: gold; text-decoration: underline; }
.userid:focus { background-color: aqua; }
</style>2) 순서에 따른 가상 클래스
CSS 스타일을 주기 위해 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택해줄 수 있습니다.
예)
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>이메론</li>
<li>반하나</li>
</ul>li:first-child:li => li요소 중에서 첫번째 해당하는 요소에 CSS를 적용합니다.
li:last-child:li => li요소 중에서 마지막에 해당하는 요소에 CSS를 적용합니다.
li:nth-child(odd) => li요소 중에서 홀수번째 요소에 CSS를 적용합니다.
li:nth-child(even) => li요소 중에서 짝수번째 요소에 CSS를 적용합니다.
3) 가상 요소
가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 클래스라고 한다면, 가상요소는 실제로 존재하지 않는 요소를 만들어 줍니다.
예)
::first-line => 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀줍니다.
::first-letter => 텍스트의 첫 문자에 특정 스타일을 입혀줍니다.
::before =>보통 이미지나 글, 그라데이션 등을 앞에 삽입시 사용합니다.(면 속성)
::after => 보통 이미지나 글, 그라데이션 등을 뒤에 삽입시 사용합니다.
2. CSS의 컬러
1.색상 이름으로 표현
red, blue, yellow, skyblue...
2.RGB 색상값으로 표현
RGB 색상은 기본색 (RED, GREEN, BLUE)를 각 각 0~255까지 범위를 가지고 표현합니다.
예)
h2 {color : rgb(0,255,0); }; -녹색
h2 {color : rgba(0,255,0, 0.5); } /녹색 반투명/
*alpha(투명도) : 범위 -> 0(투명) ~1(불투명)
3. 16진수 색상값으로 표현
16진수 색상값은 RGB색상값을 각각 16진수로 표현한 것입니다. 기본색(RED, GREEN, BLUE)를 각각 00부터 ~FF까지 범위를 가지고 표현합니다.
예)
h2 {clolr : #00FF00} -녹색 -> h2 {color : #0F0;}
3. CSS 텍스트
color
텍스트의 색상을 설정합ㄴ이다. 웹 페이지내에서 텍스트의 기본 색상은 검정색 입니다.
letter-spacing
텍스트 내에서 글자 사이의 간격을 설정합니다.
word-spacing
텍스트 내에서 단어 사이의 간격을 설정합니다.
text-align -정렬
텍스트의 수평 방향 정렬을 설정합니다. (left, right, center,justify)
text-indent - 들여쓰기
단락의 첫 줄에 들여쓰기를 할지, 안 할지를 설정합니다. 웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다.
line-height
텍스트의 줄 간격을 설정합니다.
text-decoration
텍스트의 여러가지 효과를 설정하거나 제거하는 사용합니다ㅣ. (none, underline, line-through, overline..)
text - transform
텍스트에 포함된 영문자에 대한 대소문자를 설정합니다. (uppercase, lowercase, capitalize)
font-variant
소문자를 작은 대문자, 즉 소문자 크기의 대문자로 설정합니다. (small-caps)
text-shadow
텍스트에 그림자 효과를 설정합니다.
예) text-shadow : 가로거리 세로거리 번짐정도 색상
text-overflow
텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정합니다.
clip :넘치는 텍스트를 자릅니다.
ellipsis :말 줄임표로 잘린 텍스트를 표시합니다.
white-space : 스페이스와 탭, 줄바꿈,자동 줄바꿈을 어떻게 처리할지 설정합니다.
nowrap: 줄바꿈이 실행되지 않습니다.
overflow : 기준선을 벗어나 넘칠 경우 넘치는 값을 어떻게 처리할지 설정합니다.
hidden : 기준선을 벗어나 넘칠 경우 보이지 않게 설정합니다.
visivle :보이지 않게 설정된 요소를 다시 보이게 합니다.
font-sise
텍스트의 크기를 설정합니다. 크기 설정 방식은 크게 2가지로 표현할 수 있습니다.
1.절대적 크기
텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다. 절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현됩니다.
2.상대적 크기
텍스트를 둘러싸고 있는 html요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식입니다.
font-size의 크기 단위
px : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 나타냅니다. 고정된 크기 단위이며 크기를 조절할 수 없다는 단점이 있습니다.
% : 백분율 단위이며 기본 크기를 100%로 놓고 그에 대한 상대적인 크기를 설정합니다.
em : 배수 단위이며 글꼴의 기본 크기(16px)를 1em으로 놓고 그에 대한 상대적인 크기를 설정합니다. 웹문서에서 사용되는 단위이며 pc외 모바일 등 다른장치에서도 크기를 조절할 수 있습니다.
1em은 pc에서 16px, 모바일에서는 12px로 표현됩니다. 부모 엘리먼트의 폰트 사이즈를 기준으로 글자크기를 설정할 수 있습니다.
rem : em과 비슷한 속성을 가지고 있으며, 루트 엘리먼트의 폰트 사이즈 기준으로 글자 크기를 설정합니다. - html 글자크기로 나옴
**font-weight
글자의 굵기를 설정합니다.
normal :보통 굵기입니다. 숫자 400과 같습니다.
예)font-weight : normal; , font-weight :400;
bold :굵은 크기입니다. 숫자 700과 같습니다.
bolder :상속된 값보다 굵은 굵기입니다.
lighter : 상속된 값보다 얇은 굵기입니다.
숫자는 100,200,300,400,500,600,700,800,900을 사용할 수 있습니다.
**font-family
글꼴을 설정합니다.
4. CSS 배경
background-color : HTML 요소의 배경색을 설정합니다.
background-image : HTML 요소의 배경으로 나타날 배경 이미지를 설정합니다.
예)
background-image : url('배경 이미지 위치');
background-repaeat: 배경 이미지를 수평이나 수직방향으로만 반복하도록 설정합니다.
repeat : 기본값으로, 수평 수직으로 모두 반복합니다.
repeat-x : 수평방향으로만 반복합니다.
repeat-y : 수직방향으로만 반복합니다.
no-repeat : 반복하지 않습니다.
background-position
반복되지 않는 배경 이미지의 상대 위치를 설정합니다. %(퍼센트)나px(픽셀)을 사용하여 상대위치를 직접 명시할 수도 있습니다.
left top center top right top
left center center right center
left bottom center bottom right bottombackground-attachment
위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있습니다. 고정된 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않습니다.
background
배경 속성을 한 번에 적용할 수 있습니다.
예)
div {background : 생상 파일경로 반박여부 위치 고정 유무}
BOX MODEL
모든 html 요소는 박스모양으로 구성됩니다. 이것을 박스 모델이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin),그리고 내용(content)으로 구분합니다.
5. padding, border, margin 속성
- 내용content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.
- 패딩padding : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.
padding-top : 상단의 패딩 값을 설정합니다.
padding-right : 오른쪽 패딩 값을 설정합니다.
padding-bottom : 하단의 패딩 값을 설정합니다.
padding-left : 왼쪽 패딩 값을 설정합니다.
padding : 모든 패딩 속성을 한 줄에 설정합니다. 방향은 상단부터 시작해서 시계방향으로 설정합니다.
<div id="pad">안녕하세요</div>
div#pad {padding : 20px 50px 30px 10px;}
/*위에서부터 오른쪽 시계방향*/
div#pad {padding : 20px 50px 30px; }
위 좌우 아래
div#pad { padding : 20px 50px; }
위아래 좌우
div#pad { padding : 20px; }
위아래좌우- 테두리border : 내용과 패딩 주변을 감싸는 테두리입니다.
border-style
테두리를 다양한 모양으로 설정할 수 있습니다.
(solid, dotted, dashed, double... ) - 마진margin : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.
*박스의 중앙정렬을 위해 margin: 0 auto;를 사용합니다.
6. Float 속성
float : html 요소가 주변의 다른요소와 자연스럽게 어울리도록 만들어줍니다.
해당요소
left : 요소를 좌측으로 붙여준다
right : 요소를 우측으로 붙여준다.
max-width :최대 어디까지 넘어가지 못하게 하는것
clear
float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해줍니다. 컨텡니너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다. 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정해줍니다.
both : 좌측, 우측 의 float 속성을 무효화합니다.
left : 좌측 float 속성을 무효화합니다.
right : 우측 float 속성을 무효화합니다.
<CSS 예제>
#container {
width: 1000px;
margin: 0 auto; /*가운데 정렬*/
}
div {
padding: 20px;
border: 1px solid gray;
}
#header {
margin-bottom: 20px;
}
#contents {
width: 720px;
margin-bottom: 20px;
float: left;
}
#sidebar {
width: 180px;
margin-bottom: 20px;
background-color: hotpink;
float: right;
}
#footer {
clear: both;
padding: 20px;
}7. 다단 레이아웃
텍스트 단을 column 속성으로 다단으로 편집할 수 있습니다.
다단으로 편집한다는 의미는 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 것을 의미합니다. (예를 들어서 신문사설)
column - count : 가로로 나열될 텍스트의 단의 개수를 설정합니다.
colunm-gap :단과 단사이의 여백을 설정합니다.
colunm-rule : 단과 단 사이의 구분선, 구분의 모양, 두께 색상을 설정합니다.
colunm-span : 단과 안의 포함된 요소를 다단편집에서 해제시킵니다.
<<<<<<< colunm 예제>>>>>>>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다단 레이아웃</title>
<style>
div, h2, p {margin: 0; padding: 0;}
body { margin: 10px; }
h2 {padding: 0 0 20px; text-align: center; }
.col {
text-align: justify;
padding: 20px;
background-color: gold;
column-count: 3;
column-gap: 30px;
column-rule: 3px dashed red;
}
.col h2 {
column-span: all; /*혼자 빠져나가는 것*/
}
</style>
</head>
<body>
<div class="col">
<h2>다단 레이아웃</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita explicabo libero neque officia odio eius veritatis ullam modi quam? Et voluptates ipsum rem perspiciatis aut officiis perferendis optio quas dolorum?<br></p>
</div>
</body>
</html>
0개의 댓글
