안녕하세요 ‘핸드폰 입히다’ 입니다!
오늘 강좌는 지난 강좌에 이어서 2편 진행하도록 하겠습니다!
제 강의는 총 30편으로 구성되어 있습니다!
이전 강좌를 못 보신 분들은 아래 링크를 통해 이전 강좌를 확인하실 수 있습니다!
HTML 강좌 기초 명령어 배우기 1편 안녕하세요 “핸드폰 시킨다” 입니다!
오늘 소개해드릴 주제는 HTML 강좌를 다뤄보도록 하겠습니다!
누…blog.naver.com
그러면 두 편의 강좌를 시작하도록 하겠습니다!
HTML 강좌 기초 DIV 태그를 배우다 2 편
인기글
여러분은 오늘 배울 코드는 DIV라는 코드입니다!
필자는 이전 코드로 진행하기 때문에 이전 강좌를 못 보신 분들은 보시기 바랍니다!
그럼 들어가도록 할게요!
먼저 오래된 코드를 보여드릴게요!
<font style=”color:red;”><h1> 녕하세요안. 폰입히다.
입니다!
</h1></html>
위에 코드를 가지고 진행하겠습니다!
여러분은 div라는 코드를 아시나요?div는 박스를 연상하시면 됩니다!
먼저 예시 코드를 보내드릴게요!
<html> <div> <h1> 안녕하세요. 핸드폰을 시킨다.
입니다!
</h1> </div> <div> <h2> 사랑하는 독자 여러분 </h2> </div> </html>아래의 소스 코드를 입력해 주세요!
div는 박스를 나타냅니다!
예를들어 html라는 큰 박스안에 div코드가 2개 들어간겁니다!
div 코드 안에는 h1이라는 코드가 들어갔고, 그 다음 div 코드에는 h2라는 코드가 들어간 것입니다!
간단하게 설명하고 있는지는 모르겠지만, 우선 스스로 해보면, 곧바로(아!
이거다!
)라고 생각하실 것입니다!
그러면 이 코드에서 어떻게 나오는지 한 번 확인해보는 시간을 갖도록 하겠습니다!
아래 이미지를 참고해 주세요!
저처럼 나오면 정확하게 적힌 거예요!
혹시 컨트롤+c컨트롤+v 하신건 아니죠?직접 해보지 않으면 태그 입력도 많이 늘어납니다!
그러면 여기서 DIV는 어떤 역할을 할까 말씀을 드리자면 지금 보시면안녕하세요. 핸드폰을 입히다.
입니다!
독자 여러분 사랑합니다이렇게 되어 있는 이유는 DIV 태그가 2개 들어 있기 때문에 이렇게 나오는 것입니다!
그러면 여기서 추가로 DIV 코드를 아래에 하나 더 꽂으면!
?<html> <div> <h1> 안녕하세요. 휴대시키기 ㅣ. 입니다!
</h1> </div> <div> <h2> 사랑해요 독자 여러분 </h2> </div> <div> <h3> 세 번째 줄이 나타났습니다 </h3></div></html>모두 div가 닫는 div를 포함해서 모두 3개가 들어가게 된 것입니다!
하나 더 들어갔다고 보시면 돼요!
이 코드를 실행하면 아래 이미지처럼 표시됩니다!
이렇게 세 번째 열이 아래로 내려간 것을 확인할 수 있습니다!
div가 계속 아래로만 내려가?그건 아니에요!
div 3개를 하나로 정렬이 가능합니다!
이것을 설명하기 위해서는 박스에 태두리를 넣어야 하는데, 태두리를 넣는 코드는 아래와 같이 추가로 넣어주시면 됩니다!
<div> <div style=”border: 2px 솔리드레드;><h1> 녕 감사합니다.
[</h1></div><div style=”border: 2px solid blue;”><h2></div> <div style=”border: 2px solid yellow;”><h3> html에게 보내는 답요 <h3> </div> </fragramed: 2px solid yellow; ><h3> </h2></flongragramed>이번에 새로운 코드가 나타났습니다!
1강좌에서 배운 style=””코드가 생겼습니다!
여기서 추가로 border라는 코드를 넣었는데, border라는 코드는 테두리를 그리는 코드라고 생각하시면 될 것 같습니다!
위치를 정확히 판단하거나 할 때 주로 사용됩니다!
설명하자면테두리선: 2색 솔리드; 태두리 입력두깨 설정색상은빨간색위의 설명을 드렸습니다!
색상도 원하는 만큼 바꿀 수 있고, 두께도 원하는 대로 설정 가능해요!
그럼 어떻게 나오는지 보여드릴게요!
자, 이렇게 나올 거면 정확하게 따라오신 거예요!
다시 본론으로 돌아가서, div는 사용할 때마다 아래로 내려간다?아니요!
한 줄로 나열이 가능합니다!
어떻게?아래 소스코드를 확인해주세요!
<div style=”border:2px솔리드레드. width:32%;float:left;><h1>녕에게보내는 답요.[</h1></div><div style=”border:2px solid blue;width:32%;float:left;><h2><div style=”border:2px solid yellow;width:32%;float:left;><h3></div></f2><divstyle””border:2pxylowsolid yellow,<h3><h2pxflow.<h2><h2p33%로 하면 화면이 총 99%가 나오는데 이렇게 하면 브라우저마다 차이가 있어서 깨질 수 있기 때문에 하나로 나열하기 위해서 32%로 진행했습니다!
자, 여기서 추가된 코드를 보여드리면 width:32%; float:left;라는 코드입니다!
width라는 코드는 와이드 가로 길이라고 생각하시면 됩니다!
퍼센트는 인터넷 화면 크기로 전체 길이의 32%만 사용한다고 보시면 됩니다!
float:left;라는 코드는 한마디로 날린다고 생각하시면 됩니다!
나는 그냥 정렬할 때 쓰는 코드라고 생각하는데 사람마다 다른 것 같아요!
한쪽에 정렬하는 코드인 것 같아요!
결과 보여드릴게요!
이렇게 박스로 줄을 서 있는 것을 확인할 수 있습니다!
어때요?신기하죠?별로 어렵지 않게 접근할 수 있는 코드입니다!
근데 지금 보니 사이즈가 제각각이네요 이걸 사이즈로 정렬하고 싶은데 어떻게 해야 하나요?이럴 때는 코드를 하나 더 추가해주시면 됩니다!
<div style=”border: 赤で 2 픽셀, 폭: 32 %, 플로트: 왼쪽, 높이: 300 픽셀;”><h1> 안녕 주세요. “</h1> </div> <div style=”border: 2px 솔리드 블루;width: 32%; float: left; height: 300px;”><h2>랑이지로 자이지로 </h2></div><div style=”border: 2px solid yellow; width: 32%; float: left; height: 300px;”><h3> 세번째 줄이 나타났어요 </h3></div></html>위와 같이 코드를 하나 더 추가했습니다!
추가한 코드는 height:300px; 라는 코드를 추가했습니다!
이 코드는 아까 제가 width라는 코드를 가로 사이즈라고 말씀드렸죠? height라는 코드는 세로 사이즈라고 생각하시면 됩니다!
height :300px;세로 사이즈를300px로 설정한다라는 의미로 생각하면 될 것 같아요!
그럼 결과를 다시 봐야겠어요.이렇게 나오면 정확하게 입력했다고 보시면 됩니다!
박스를 3개 나열해봤어요!
근데 지금 색이 겹치는 부분이 보이네요?이것은 어떻게 하면 좋을까요 게다가 코드를 더 하나 배워봅시다!
<div style=”border: 빨강으로 2픽셀, 폭: 32%, 플로트: 왼쪽, 높이: 300픽셀, 여백: 10픽셀;”><h1> 안녕해주세요. “</h1> </div> <div style=”border: 2px 솔리드 블루;width: 32%; float: 왼쪽; 높이: 300px; margin-left: 10px; “><h2> <div style=”border: 2px 솔리드옐로우, 폭: 32%, 플로트: 왼쪽, 높이: 300px, 여백: 10px;”><h3> 세번째 줄이 나타났어요 </h3></div></html>자, 코드를 하나 더 추가했습니다!
이 코드는 무엇입니까? 예를 들어 상자가 지금 겹쳐져 있기 때문에 상자 밖으로 사이즈를 넓혀야겠죠?그것을 늘리는 역할을 하는 친구가 margin이라는 태그입니다!
그런데 저는 왼쪽만 조금씩 늘리고 싶어서 margin-left: 10px; 라고 썼어요!
이 코드에 대해서 설명하자면요margin-left :10px;밖에 마진 – 왼쪽만10px만큼 늘린다!
위에 제가 설명했지만 정확하게 전달되었는지는 모르겠어요!
margin-left라는 태그 이외에도 margin-top등도 있습니다!
left는 왼쪽이고 top은 위쪽이라고 보시면 됩니다!
좌우 위와 아래 이렇게 모두 설정이 가능합니다!
그럼 결과를 봐야겠어요!
이렇게 나오면 성공한 거예요!
조금씩 박스가 빠져있는게 보이죠? 사이즈를 제가 10px로 줬기 때문에 이렇게 열게 되는 거예요!
자, 오늘 강의는 div 강의였지만, div의 활용도를 배우는 시간이었습니다!
다음 시간에는 오늘 배운 코드와 새로운 코드를 합쳐서 다음 강의를 이어가도록 하겠습니다!
html 기초강좌 div편은 여기서 끝입니다!
잘 모르시면 댓글 남겨주세요!
긴 글을 읽어주셔서 정말 정말 감사합니다!
여러분들의 공감과 댓글은 힘이 됩니다!