어제보다 더 나은 나

HTML 태그 정리, CSS란? 본문

웹 개발 공부

HTML 태그 정리, CSS란?

확인해볼까 2022. 7. 9. 16:13

* HTML 태그 종류

  • <head> : 문서에 대한 기본적인 정보가 담겨 있음.
  • <title> : 웹 페이지의 제목을 나타냄
  • <body> : 주로 화면에 나타나는 내용이 담겨 있음.
  • <nav> : navigatinon. 웹 사이트의 주요 페이지를 안내하는 내비게이션 역할을 만들 때 사용
  • <a> : anchor. 해당 부분을 클릭하면 페이지가 이동하도록 만들고 싶을 때 사용. 넘어갈 링크는 href로 지정
  • <h1> ~ <h5> : headline. 헤드라인을 보여줌. 브라우저 상에서 보면 크기가 다름
  • <p> : paragraph. 문단
  • <hr/> : horizon. 웹 사이트에 수평선을 그어주는 태그
  • <img> : 이미지 소스 위치(src)를 지정하면 해당 이미지를 보여줌. width와 height로 이미지 크기 지정 가능

 

 

html 파일 실행 웹페이지

 

[nav의 버튼에 스타일 추가 (색 변경 및 정렬, 링크 추가)]

 

html 파일 실행 웹페이지

* nav 태그 안 <a> 태그가 굉장히 많다면?

  • <head> 태그 안에 <style>태그를 삽입하고 그 안애 원하는 태그 스타일을 지정한 후 한 번에 해결

 

html 파일 실행 웹페이지

 

 

 

html 파일 실행 웹페이지

* CSS (Cascading style sheets) : 웹 문서의 디자인을 구현하기 위한 언어

(HTML이 웹 페이지의 틀을 만들고 내용을 채운다면 CSS는 텍스트의 크기나 색, 이미지의 크기나 위치 등을 지정)

 

 

pratice.css 파일의 내용

 

<head> 태그 안의 <style>태그를 없애고 <link>태그로 css 파일과 연결시켜줌

  • link 태그의 rel 속성 :  현재 문서와 외부 리소스 사이의 연관 관계를 명시 (필수로 명시시켜줘야 하는 속성)
  • link 태그의 type 속성 : 링크된 외부 리소스의 미디어 타입을 명시 (반드시 href 속성이 설정되어 있어야만 사용가능)

 

 

html 파일 실행 웹페이지

 

'웹 개발 공부' 카테고리의 다른 글

자바스크립트  (0) 2022.07.09
'웹 개발 공부' Related Articles more
Comments