[CSS] iframe, span, div태그

안녕하세요 아기크롱입니다.

작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^

그럼 시작합시다

iframe태그와 span, div태그에 대해 알아봅시다.

iframe이란, i는 in을 의미하며, 1의 html파일 내부에 다른 파일을 포함한다.

(1) <iframe src="경로" ~~> 임의의 링크 또는 html를 주고 화면안에 틀을 넣을 수 있다.

(2) <a herf="~~" target="iframe의 이름"> iframe이름을 부여해서 하이퍼링크로 사용할 수 있다.

div이란, 여러줄로 출력한다.( 사실상의 입력값은 없음)

<div style="color:blue; border:red 2px dotted" id='tmp'> 는 2 px굵은 빨간선점에 파란글자를 뜻한다.

span이란, 한 줄로 출력한다. (글자가 없으면 출력확인이 불가능)

대체적으로, div를 많이 사요요하기때문에 기억해두어야한다.

Div와 Span의 차이점이 뭘까요?

span과 div의 차이에 대하여 간략하게 작성하려고 합니다.

span의 display속성 default값은 inline입니다.

div의 display속성 default값은 block입니다.

때문에 inline element는 행 처리가 되지 않고 내용이 들어간 부분만 해당됩니다.

그리고 span의 display속성을 block로 변경시, div element로 바뀌게 됩니다..

따라서, span학고 div element는 display속성만 차이나는 element입니다.

이제 본격적으로 타이틀에 작성된 태그의 css에 대해 알아봐야겟죠?

우선적으로, <head>내부코드를 분석하려고 합니다.

외부설정 : 새롭게 mystyle.css만들고, 현재<head>에서 불러오는 방식입니다.

내부설정 : <head>에서 직접적으로 적용하는 방식입니다.

※ 위의 외부설정과, 아래의 내부설정중 우선순위는 내부설정이다.

1
2
3
4
5
<!-- 외부경로 설정 -->
<link type="text/css" rel="stylesheet" href="css/mystyle.css"> 
        
<!-- 내부경로 설정 -->
<style type="text/css">

배경색상은 아래와 같이 다양한 표현법이 있습니다.

색이름

body{background-color : silver}

rgb의

10진수 값

body{background-color:rgb(60%, 40%, 10%)} 갈색

body{background-color:rgb(153, 102, 25)} 갈색

body{background-color:rgb(255, 255, 255)} 흰색

body{background-color:rgb(100%, 100%, 100%)} 흰색

body{background-color:rgb(0,0,0)} 검정(최소치)

#16진수

body{background-color:#ffffff;} 흰색(최대치)

현재 아래의 코드는 맨 위에서 지정했던 <head>내에 내부경로를 통해, 각 요소의 기능들을 살펴볼 수 있습니다.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style>    
 body{ background-image:url("../image/google.png");  /*background-image는 원본이미지의 반복을 의미한다 */
       background-repeat:no-repeat; /* 이미지를 반복하지 않을때 */
       background-position: 50% 50%; /* 배경색상 위치 */
       background-attachment: scroll; /* 어덯게 부착될건지 */                
    }
                
    p{ background-color: silver;
       color:black; 
       font-size: 60px; 
       font-family:cursive; /* font-family: sans-serif; 궁서-굴림 */
       font-style: italic;
       text-align: center;
       text-transform: capitalize;
       text-shadow: 5px 5px 10px aqua;               
               
       border-style: solid;
       border-color:red;
       border-width: 3px;
       border-radius: 25px; /* 둥글게 */
       box-shadow: 10px 10px 5px black;
       padding: 10px 20px; /* 상하 좌우 */
       }
               
  div{ width:100px;
       height:50px; /* 영역지정 */
       padding: 20px;
       border:solid 3px green;
       background-color: yellow; 
       resize:both; /* 상하좌우 다 가능하다 */
       overflow:auto; /* 콘텐츠 자동 스크롤바 설정 */
       margin: 10px auto; /* 상하 좌우, 상하의 마진은 10px이고 좌우는 50%같은 퍼센트보다는 auto가 훨씬 효율성있다 */ 
       /* margin: 10px 15px 20px 25px; /* 상 우 하 좌 */ /* 왼쪽을 25공간띄우고  상자사이 20아래로. */
       } 
  span{ border:solid 3px blue;
        background-color: red; 
        resize:both; /* 상하좌우 다 가능하다 */
        overflow:auto; 
       }
    /* 유사선택자 = 의사선택자 = 없는데, 가상으로 */
    h1{ color:white; font-family:맑은고딕;  font-size: 32px;  font-style:italic;  font-weight:bold; text-align:center; background-color:maroon;}  
    a:link{ color:red; text-decoration:none;}
    a:visited{ color:green; }
    a:HOVER{ cursor:progress; color: yellow; }
</style> 

<head>내부에 작성한 코드들을 명령어위주로 다시 한번 간단하게 정리해 보았습니다.

주로 다루지 않았던 것들은 배제하고 작성했기 때문에 없는 내용도 있을 겁니다.!!

(참고로, 제가 헤깔렸던 비슷한 속성들을 차이점을 따져가면서 정리했습니다.)

background-color : 배경색상임.

color : 글자색상임.

style : css속성임. 텍스트에 속성을 주는 태그이다.(다른태그안의 스타일 속성으로써 쓰인다.) <= 더 많이씀

font : 폰트속성임. 글자자체의 크기나 모양에 관련된 겁니다, 텍스트에 속성을 주는 태그이다.(직접 폰트)

text : 텍스트 속성, 화면에서의 글자의 배치(좌우정렬)에 관련된 것이다. (text-align:'center'도 텍스트정렬임)

margin : 박스개념의 정렬이다. 대체적으로 높이상관없이 좌우중앙정렬은 margin: 0px auto; 이다.

a:link{ color: ? } 기본값이 red로 적용된다.

a:visited{ color: ? } 방문하면 괄호안의 색상이 변경됩니다.

a:hover{ color: ? } 마우스를 가져다대면 색상이 변경됩니다.

div : div는 내용이 있는 게 아니다. div폭과 넓이 지정가능하다. 필연적으로 줄 바꿈을 동반한다.

==>블록 수준 요소, 줄바꿈o, 더 많이 쓰인다.

span : div와 다르게 폭과 넓이 지정을 못한다. 줄 바꿈 없고 문장 중간에 들어갈 수 있다.

==>인라인 요소입니다. 줄바꿈 x (span의 display를 바꾸면 div가 된다고 했죠?^^)

a : 하이퍼링크를 쓰기위하여 사용한다. (표기법: <a href=" 원하는 경로 "></a>)

이미지, 동영상, 오디오 : <img, audio, video src=" 해당경로 " >

기본적인 뼈대만 작성해놓은 <body>코드입니다. 진짜 간단하지 않나요??

<body>
    <h1> h1 제목입니다</h1>
        
    <div>여기는 div내부입니다</div>
    <div>여기는 div내부입니다2</div></br>
        
    <span> 여기는 span내부입니다</span>
    <span> 여기는 span내부입니다2</span>
 
    <p> p 본문입니다 this is body</p>
</body>

맨 처음, 프로그램이 시작하면 => body를 순차적으로 읽는다. => 위치에 맞게 head가 적용됩니다.

Reference Site

http://webdir.tistory.com/31

https://ojji.wayful.com/2015/03/HTML-How-to--Set-FONT-Size-Color-Weight-Family-Variant-Line-Height-ect.html

저작자표시

'WEB 기초 > CSS' 카테고리의 다른 글

[CSS] CSS 스타일 적용하기(1) (0)	2018.11.16

'WEB 기초 > CSS' 카테고리의 다른 글

티스토리툴바