Float
웹페이지 레이아웃을 할 때 사용되는 것.
실습 1. 매우 긴 txt를 body에 넣기
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
</head>
<body>
생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
</body>
</html>
실습 2. 이미지를 삽입하기
원하는 이미지의 주소를 복사
img 태그 사용 src 속성 입력
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
</head>
<body>
생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
</body>
</html>
실습 3. 이미지에 빨간색 테두리 넣기
<!DOCTYPE.html>
<html>
<head>
<meta charset="utf-8"/ >
<style>
img{
border:1px red solid;
}
</style>
</head>
<body>
생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다. 아래 영상을 한번 보시죠.
새창으로 열기
온라인 강의 소개
입문자의 가장 큰 고충은 '무엇을 모르는지 모르는 상태'일 겁니다. 온라인에는 프로그래밍을 익히는 데 필요한 거의 모든 정보가 있지만, 이 지식들은 게시판이나 블로그
...............
생활코딩이 있는 이유는 관객이 있기 때문입니다. 생활코딩의 관객이 되어주신 것으로도 충분한 도움이 되고 있습니다.
활동을 지속하기 위해서 기업이나 단체를 위한 컨설팅과 교육을 진행하고 있습니다. 문의 사항은 egoing+consulting@gmail.com으로 연락 부탁드립니다. 강의의 경우 참가자에게 비용을 받는 강의는 참여하지 않고 있습니다.
질문은 이메일을 이용하는 것 보다는 댓글이나 커뮤니티와 같이 공개된 방법을 이용해주시면 좋겠습니다.
</body>
</html>
글자와 이미지 사이에 여백이 생기는 이유 : 이미지나 글자나 같은 한 행을 차지한다. 같은 행을 차지하는데 크기가 달라서 여백이 생긴다.
실습 4. 글자를 그림과 같이 위로 끌어올려서 좀 더 아름답게 보이게 하기
float 이용
img 태그 안에 float:left 추가
img{
border:1px red solid;
float:left;
}
right도 해보기
float : 그림과 글자를 나란히 나타나게 하는 역할을 한다.
left면 왼쪽에 정렬되게 하고 right면 오른쪽에 정렬되게 한다.