본문 바로가기
728x90
반응형

HTML38

CSS 기초(1) CSS의 구성과 HTML과의 관계 CSS 기초(1) 오늘은 CSS에 대해 알아보겠습니다. CSS는 보통 HTML과 함께 사용하며 HTML에서 웹페이지의 뼈대를 구성하면 CSS에서 디자인을 해서 웹페이지를 구성할 수 있습니다. CSS는 '선택자{ 속성: 속성 값;}'으로 구성이 되어있는데 '속성: 속성 값;' 부분을 선언부라고 부릅니다. 선택자는 스타일링하고 싶은 속성과 속성 값을 작성하는 영역으로 HTML에서 태그를 선택하거나, class 속성, id 속성의 값을 입력하여 지정할 수 있습니다. CSS 코드를 예시로 보여드리면 'div { color: red;}' 여기서 div가 해당하는 영역이 선택자, color가 해당하는 영역이 속성, red가 해당하는 영역을 속성 값이라 하며 'color: red;' 부분을 선언부라고 부릅니다. CS.. 2022. 7. 7.
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.
728x90
반응형