HTML&CSS (8) 썸네일형 리스트형 8. div 태그 태그에 대해 알아보겠습니다. - 요소들을 묶어주는 태그 div 태그는 직접 사용하면서 알아보는 것이 가장 효과적이기 때문에 바로 VScode로 실행해보겠습니다! 먼저 VScode를 통해 제가 좋아하는 음악 플레이리스트를 소개하는 웹사이트를 제작해보겠습니다. 웹사이트 이렇게 좋아하는 노래 3곡의 제목과 앨범커버, 가사를 포함한 웹사이트를 하나 생성했습니다. 글자 크기의 위계로 노래의 경계가 나누어지긴 하지만, 더 명확하게 각각의 노래가 나누어지면 좋을 것 같습니다. 이럴 때 사용하는 태그가 바로 태그입니다! 연관이 있는 요소들을 하나로 묶어주는 역할을 합니다. div 태그는 각 요소를 하나로 묶어주는 것 외에는 다른 역할을 하지 않지만, 그것만으로도 굉장히 유연하고 유용하게 사용할 수 있기 때문에 자주 사.. 7. Class 클래스 태그와 Id 아이디 태그 이번에는 HTML의 태그와 태그에 대해서 알아보겠습니다 - ! 두 개의 태그는 모두 HTML 요소에게 '이름'을 주는 방법이라고 간단하게 설명할 수 있습니다. 1. Class 클래스 - "class 이름"을 지정하고 요소에 클래스 이름을 추가해주면 css에서 그 이름의 스타일을 적용 가능 + Class의 이름이라는 것을 나타내기 위해서는 앞에 . (마침표) 를 꼭! 써주어야 함 ex. 캐발자 딩시 블로그 그럼 이제 실제 VScode로 구현해보겠습니다. VScode 화면에 하얀색 밑줄 친 부분을 보면 마침표를 찍고 클래스 이름을 정해준 후, 스코프를 열고 스타일을 적어주었습니다. 그리고 클래스에 있는 스타일을 적용시키고 싶은 내용 태그의 속성으로 클래스 이름을 넣어줍니다. 위에서는 19번 줄에 있는 캐발자.. 6. HTML 이미지 Image 첨부 이번에는 HTML에서 이미지를 첨부해보겠습니다. 태그 _ 이미지를 첨부하는 태그 - 태그의 속성은 src입니다. - 태그는 다른 태그들과 다르게 종료태그 X 바로 VScode를 통해 이미지 첨부를 해보겠습니다 - ! 기본적인 이미지 첨부를 먼저 해보겠습니다. 먼저 첨부할 이미지를 찾아주어야 합니다. 저는 구글링을 통한 구글 이미지를 나타내 보려고 합니다. 원하는 사진을 검색한 후, 사진을 우클릭해서 이미지 주소 복사를 해줍니다. 복사한 주소를 속성 값으로 넣어주면 됩니다. 위 사진의 13번 줄을 보시면 가 적혀있습니다. 파일 저장 후, 웹 사이트를 새로고침 하면 이렇게 이미지가 뜨게 됩니다. 여기서 이미지의 크기를 바꾸기 위해서는 img 태그 안에 속성으로 width, height를 써주면 됩니다. 먼저.. 5. HTML 링크 Anchor 첨부 HTML에서 하이퍼링크와 이미지를 첨부하는 방법을 알아보겠습니다 - ! 태그 _ 하이퍼링크 (Anchor)를 첨부하는 태그 - 태그의 속성은 href입니다. ex. 캐발자딩시의 스터디로그 위의 방법으로 웹 사이트에서 링크를 클릭하면 웹 사이트가 있던 탭이 링크의 웹 사이트로 변경됩니다. 이제 VScode를 이용하여 직접 하이퍼링크를 달아보겠습니다 - ! 먼저 태그를 사용해서 사이트에 링크를 첨부해보겠습니다. body 부분 26번 줄을 보시면 태그를 사용하여 저의 블로그로 가는 링크를 첨부했습니다. 왼쪽 화면에 보시면 아래에 하이퍼링크로 잘 나타나 있습니다 - ! 링크를 타고 들어가면 이렇게 제 블로그가 같은 탭에서 나타납니다. + 새로운 탭에서 링크를 여는 방법 링크를 새로운 탭에서 열기 위해서는 tar.. 4. HTML 옵셔널 태그 _ head, body, html 태그 HTML 태그에는 옵셔널 태그라는 것이 있습니다. 태그 - 보여지지는 않지만 문서 안에 필요한 데이터를 모아둔다. 태그 - 웹 사이트에 보여주고자 하는 내용들을 모아둔다. 태그 -html 코드라는 의미로 묶어주는 역할을 한다. 위의 사진과 같이 사용해주면 되는 태그입니다 - 사진에서도 확인할 수 있듯이 옵셔널 태그는 보통 정리하는 목적으로 사용하는 경우가 많습니다. + 태그 속 태그 전체 들여쓰기 태그 안에 태그를 할 땐 내용을 모두 들여쓰기를 해주어야 합니다. 들여쓰기를 하지 않는다고 내용이 실행되지 않는 것은 아니지만, 코드를 더 정확하고 깔끔하게 보면서 확인하기 위해서는 이 작업이 필수적입니다. 내용 전체를 한 번에 들여쓰기하는 방법은 들여쓰기 하고 싶은 내용을 전부 드래그해서 Ctrl + } 를 .. 3. CSS로 웹 사이트에 스타일 더해주기 이번에는 만들어진 웹 사이트에 CSS 적용하여 미적인 부분을 업그레이드시켜주겠습니다. 먼저 CSS를 입혀주기 위해서는 html 태그를 사용해주어야 하는데 CSS를 반영하기 위한 태그는 종료태그로 마무리해주면 됩니다. + CSS 기본 문법 - css를 코딩하는 기본 문법 형식의 예시 위 예시처럼 css의 기본 문법은 css를 입히고 싶은 내용의 태그를 먼저 적어주고 { 를 열어준 후 속성 : 속성 값 ; 의 순서로 적어주면 됩니다. css를 입히고 싶은 태그가 같은 것이 여러 개일 때는 선행 태그를 먼저 써주고 그다음에 그 태그를 순서대로 써주면 됩니다. 그럼 직접 웹사이트에 반영해보겠습니다 - ! 오른쪽 화면에 style 아래에 적힌 css 속성들이 왼쪽 화면에 적용된 것을 볼 수 있습니다. + CSS .. 2. Visual Studio를 통해 웹사이트 만들어보기 Visual Studio를 이용해서 나의 첫 웹사이트를 만들어보겠습니다. 가장 먼저 Visual Studio를 다운받아야 하는데, 아래의 링크를 통해 다운받으면 됩니다! https://visualstudio.microsoft.com/ko/vs/ Visual Studio 2022 | 무료 다운로드 Visual Studio에서 코드 완성, 디버깅, 테스트, Git 관리, 클라우드 배포를 사용하여 코드를 작성합니다. 지금 무료로 커뮤니티를 다운로드하세요. visualstudio.microsoft.com 이제 본격적으로 간단한 웹사이트를 하나 만들어보겠습니다 - 1. 파일 생성 후 저장 Visual Studio를 실행시킨 후, File탭에서 New File 또는 Ctrl+N을 눌러 새로운 파일을 하나 열어줍니다.. 1. HTML / CSS / JAVASCRIPT(JS) 가 무엇일까? _ 웹 개발 기본 요소 [ 웹 개발 기본 요소 ] 웹 개발 및 퍼블리싱을 하는데에 있어 가장 기본이 되는 3요소는 HTML / CSS / JAVASCRIPT입니다. 이 세 가지의 언어를 조합하여 웹 페이지를 제작할 수 있는데, HTML과 CSS는 웹 페이지의 내용과 미적인 부분을 담당한다면 JAVASCRIPT는 웹 페이지의 인터렉션을 담당합니다. HTML (hypertext markup language) 웹을 제작할 때 바탕이 되는 웹 언어 - 웹페이지 안에 들어가는 내용을 담당 / 웹 페이지의 큰 뼈대를 제공 글자 크기, 글자색, 글자 모양, 그래픽, 문서 이동 등을 정의하는 명령어로 HTML 문서를 작성하면 웹 브라우저가 해석하여 이용자들에게 보여주는 원리 + hyper text = 웹사이트에서 어떤 링크를 클릭해서 다른 .. 이전 1 다음
