728x90 반응형 html530 [HTML5] - 5 - 게시글에 사진 넣는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 여기까지 따라왔다면 잘했다. 이제 게시글에 사진을 넣어 볼 것이다. 그래서 어떻게 넣는데? 사실 사진을 넣을 수 있는 방법은 여럿 있다. 하지만 나는 폴더 내에 사진을 저장 해 둔 상태에서의 방법이다. Index.html 파일이 있는 폴더 안에 images 라는 폴더를 생성해준다. 그 다음 images 폴더 안에 사진을 넣어준다. 나는 편의상 사진의 이름을 1, 2 로 지정해주었다. 이제 다시 Visual Studio로 돌아가서 경로만 추가해주면 끝이다. 아까 작성했던 에 사진 경로를 추가하는 것이다. 환영합니다. 완성하시면 이.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 4 - 버튼 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 이젠 버튼을 추가해 보자. 우선 태그에 버튼 태그를 추가한다. .btn { display: inline-block; background-color: #007bff; color: white; border: none; border-radius: 5px; padding: 10px 20px; margin-right: 10px; margin-bottom: 10px; cursor: pointer; } .btn:hover { background-color: #0069d9; } 여기까지가 버튼의 크기와 모양 색을 지정해 준 것이다. 그다음 태.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 3 - 게시글 카드 만드는 법 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 여기까지 따라왔다면 잘 하고 있는 것이다. 사실 시도하는게 어려울 뿐, 따라오는건 어렵지 않다고 생각한다. 이제는 이 검은 바탕에 게시글을 작성해보려 한다. 혹시나 놓친 분이나 새로 오신 분을 위해 전부 작성하겠다. 아래는 이전의 작성된 코드이다. 아래는 추가로 작성한 전체적인 코드이다. 이리의 맥 이야기 컴온!!!! 환영합니다. 완성하시면 이런 모습입니다. 할 수 있습니다. 포기하지 마세요. 전과 비교 했을 때, 부분이 추가 되었다. 에 카드를 하나 만들었다. 카드 형식으로 게시글을 출력하는 것이다. 카드의 크기와 모양 등은 .. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 2 - 웹페이지의 head와 body #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 여기까지 따라왔다면 잘 했다. 이제 가장 중요한 태그에 대해 설명하겠다. 여기서 head 와 body는 말 그대로 머리와 몸통 부분이다. head의 title 부분에 해당하는 부분은 바로 아래 사진을 보면 이해 될 것이다. title에 가나다라마바사 라고 적은게 보일 것이다. 저렇게 출력 시켜주는 부분이다. 간단하지 않은가? 이제 이것을 가지고 본인 입맛에 맞게 제목을 작성해보자. 예시로 하나 만들어 보았다. 아까 글에서 부분에 딱 두 줄만 추가 했다. 이리의 맥 이야기 직접 추가해보면 좋을 것이다. html을 실행시켜보면 아래.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› [HTML5] - 1 - Visual Studio를 사용하여 개발환경 만들기 #주의# 이 글은 강의 글이 아니다. 틀린 부분, 깔끔하지 못한 부분 있을 수 있다. 지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다. 우선 개발 환경부터 만들어야 한다. 그래서 어떻게 만드는데? 구글, 네이버, 다음 등 아무거나 편한 검색엔진에서 vscode를 검색해준다. https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is f.. 개발 이야기/[HTML5] 2023. 5. 2. 더보기 ›› 728x90 반응형 이전 1 ··· 3 4 5 6 다음
