| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
- CSS
- ICO
- 코딩
- 웹디자인
- 퍼블리셔
- 웹퍼블리셔
- 가상화폐
- 프론트엔드국비지원
- HTML
- 개발자
- JavaScript
- 프론트엔드
- frontend
- 백엔드개발자
- 핀테크
- IT
- 암호화폐
- 백엔드
- jQuery
- java
- 웹프론트엔드개발자
- developer
- 비트코인
- 이더리움
- 프론트엔드개발자
- 웹개발자
- backend
- 국비지원IT
- 퀀텀
- 블록체인
- Today
- Total
wellkiim
css 본문
안녕하세요. !
css로 다시 찾아뵙는 웰킴입니다.
오늘은 css에 대하여 처음 말씀을 나누어볼까 합니다.!
먼저, 두산백과에서 따온 css의 정의를 알아보도록 할게요.
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다.
html이 마크업으로서, 전체적인 뼈대를 만들어주었다면,
css는 이제, 꾸며주는 역할을 한다는 사실 알고 계셨나요.?
간단하게는 글자의 색깔을 바꾸거나,
배경에 색상을 주거나.
등등 여러가지 방법으로 응용이 가능하답니다.!
그렇다면 오늘은 먼저, css의 기본을 배워볼까요 .!
언제나 그렇듯이 마찬가지로 에디터에 코드를 작성해보도록 하겠습니다.!
아시죠??
(
각 태그에 적혀있는 텍스트 들은 각 태그에 대한 설명을 의미합니다 ^^
)
시작해볼게요!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<title> css </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
/*
주석글 안에서 주의해야할 표현방법은 꺾쇠 표현 "<"
+ type은 html5에서는 권장사항, xhtml에서는 필수사항!
+ h2태그에 배경색상 회색적용하기
+ 대상선택시 스타일 영역이기 때문에 "<" and ">" 제외해서 사용!
+ 직접기능을 구현하거나 표현하는 괄호 { }
+ 조건을 표현하는 괄호는 ( )
*/
h2{background-color:gray;}
/*
응용문제
h4태그 호출하여 배경색상 오렌지 적용하기
p태그 호출하여 배경색상 빨간색 적용, 글자색상 노란색 적용하기
*/
h4{background-color:orange;}
p{background-color:red; color:yellow;}
p#purple{ background-color:purple; color:white;}
/*
"<p id="purple">" 대상이 한칸에 전부 다 들어있다면
1) 띄워쓰기 없이 전부 붙여쓰기
pid="purple"
2) =, "" 도 제외
pidpurple
3) id는 #으로 호출
p#purple
+ p#purple VS #purple 차이점
id값은 브라우저에서 인식률이 가장 좋음!
#purple은 id이름이 purple인 값을 호출하기 때문에
한번에 id가 purple인 부분만 읽어준다.
+ 코드가 길어지면 id값이 인식률이 좋아도 id 이름만으로
호출하기가 어렵다. 코드가 길지 않을때 사용
p#purple은 p태그들 중에서 id가 purple인 값을 호출하기
때문에 p태그들을 한번 읽어주고 id가 purple인 부분을 읽어준다.
+ 코드가 길어지거나 복잡한 구조에서 정확하게 이름을 적용할때 사용
중요!)
처음에 p#purple로 인식함!
1) p#purple (첫번째)
2) #purple (두번째)
+ 처음에 어떠한 방법으로 호출했는지에 따라서 두번째
세번째 호출방식이 정해진다.
+ 첫번째 호출방식 유지하기!
*/
</style>
</head>
<body>
<h2>css의 종류</h2>
<h3>태그에 직접 적용하는 방식: inline 적용방식</h3>
<p style="background-color:pink; color:blue;">현재 p태그에 배경색상 pink색상 적용, 글자색상 파란색 적용</p>
<p>
<span style="color:red;">현재 span태그에 글자색상 빨간색 적용</span>
<span style="background-color:yellow;">현재 span태그에 배경색상 노란색 적용</span>
</p>
<p style="background-color:blue; color:white;"> 현재 p태그에 배경색상 파란색, 글자색상 하얀색 적용하기</p>
<h3>인라인 스타일의 적용방식의 장.단점</h3>
<p>
+ 단점: 같은 대상에 같은 값을 적용할때 복사해야 하는 값이 너무 많기 때문에 대량으로 작업하기가
매우 불편하다. <br/><br/>
+ 장점: 전체에 효과를 적용하는 방식이 아니라 일부의 값에 특수한 효과를 적용하기 위하여 형광펜처럼
사용함
</p>
<hr/>
<h3> 인라인요소와 블록요소의 차이 </h3>
<p>
+ 인라인 요소는 너비와 높이가 글씨크기 만큼만 차지 하기 때문에
공간의 낭비가 없음<br/>
+ 블록요소는 생성될때 브라우저의 끝에서 끝까지 영역을 차지 하기 때문에
공간의 낭비가 심하다.
</p>
<h4>내부적용 스타일 사용하기</h4>
<p>
01) style 영역만들기<br/>
02) 대상 호출하기 <br/>
03) 가져온 대상에 스타일 효과 적용하기 <br/>
</p>
<h4>외부적용 스타일 사용하기</h4>
<p>
외부에 stylesheet를 만들어서 css 적용
</p>
<p id="purple">
현재 p태그를 style영역에서 호출하여 배경색상 보라색, 글자색상 하얀색으로 나오게 만들기
</p>
</body>
</html>
마찬가지로, 아래는 위의 코드를 작성한 내용이 웹페이지에 출력된 내용입니다.!
background-color와 color를 통하여 각 텍스트이 단락의 색상, 그리고 폰트의 색상을 변경해보았는데요.
어떠신가요 ? css는 이것뿐만아니라 정말 무궁무진한 이용방법이 다양하게 있습니다.
다음시간을 기대해주세요!
