본문 바로가기
728x90
반응형

HTML/HTML 기초4

HTML 기초(4) class 속성, id 속성 HTML 기초(4) 오늘은 HTML class 속성과 id 속성에 대해 배워보겠습니다. 먼저 class 속성과 id 속성이란 HTML에서 태그 안에 이름을 지정해준다고 생각하시면 됩니다. 태그를 보면 div, a, h1 등 따로 이름을 지정하지 않는다면 똑같은 이름으로 사용되기 때문에 CSS를 사용하여 디자인을 하는 경우 원하지 않은 태그에 디자인이 지정되는 일이 벌어집니다. 이것을 방지하기 위해 class 속성과 id 속성이 있는데 먼저 class 속성은 여러 태그의 그룹을 지어줄 때 사용합니다. 이유는 class 속성은 다른 태그와 이름이 겹쳐도 CSS가 적용이 되는데 id 속성은 다른 태그와 이름이 같다면 같이 사용되는 JS에서 오류가 발생하기 때문입니다. 그래서 class 속성은 여러 태그를 그룹.. 2022. 7. 7.
HTML 기초(3) header, footer, main, button 태그 HTML 기초(3) 오늘은 저번 시간에 이어서 HTML body 태그에서 사용되는 태그들을 몇 가지 더 소개해드리겠습니다. (1) header 태그는 보통 상단에 위치할 텍스트나 이미지를 작성할 때 사용되는 태그입니다. 보통 header 태그에는 웹페이지의 로고, 다른 페이지로 이동하는 링크를 넣을 수 있고 글을 작성한다면 글의 제목이 위치할 수 있습니다. header 태그를 사용하는 이유는 코드를 작성할 때 구분하기 좋아서 추후에 수정할 때도 가독성이 좋고 코드를 깔끔하게 정리할 수 있어서 많이 사용되는 태그입니다. (2) footer 태그는 웹페이지에서 아래쪽에 회사의 주소나 연락처, 공지사항 등의 정보를 나타낼 수 있는 영역을 담당하는 태그로 footer 태그를 사용하는 이유는 웹페이지를 구성할 때.. 2022. 7. 6.
HTML 기초(2) div, span, a, img, ul, ol, li, dl, dt, dd 태그 HTML 기초(2) 저번 시간에는 HTML 페이지에서 head 태그 안에 있는 메타 태그에 대해 설명드렸습니다. 이번 시간에는 HTML 태그를 사용하여 직접 텍스트를 작성해 보도록 하겠습니다. HTML 태그를 작성할 때 팁을 드리면 부모 태그와 자식 태그, 형재 태그를 잘 사용해야 한다는 것입니다. 여기서 부모 태그와 자식 태그, 형태 태그란 어떤 태그로 감싸는지, 어떤 태그와 함께 감싸 졌는지로 나눌 수 있습니다. 먼저 부모 태그와 자식 태그는 코드로 예시를 보여 드리면 이 코드를 보시면 div 태그 안에 h1 태그가 감싸져 있습니다. 여기서 부모 태그는 h1 태그를 감싸고 있는 div 태그이고 자식 태그는 div 태그에 감싸져 있는 h1 태그라고 할 수 있습니다. 이런 방식으로 형재 태그는 같은 부모.. 2022. 7. 6.
HTML 기초(1) HTML 기초(1) 오늘은 HTML 기초에 대해 설명드리겠습니다. 시작에 앞서 HTML은 HTML5 버전을 사용하겠습니다. HTML은 html 태그, head 태그, body 태그로 구성되어 있습니다. 보통 html 태그에는 사용할 언어 대한 내용이 들어 있고 head 태그는 웹 브라우저를 구성에 필요한 메타 태그, 웹브라우저의 제목, css 외부 스타일 시트, 내부 스타일 시트에 대한 정보를 작성할 수 있습니다. 그리고 위에 html 태그와 head 태그가 완성된다면 body 태그에 작성하고자 하는 내용을 넣을 수 있습니다. 공부를 하면서 가장 중요한 것은 기초를 알아야 하는 것과 조급하게 하면 안 된다는 것입니다. 그래서 오늘은 프론트앤드 개발에 가장 많이 사용되는 Visual Studio Code .. 2022. 7. 5.
728x90
반응형