프로그래밍 공부/html,css
[Html, Css ] - html , Css는 무엇인가 ?
미니미니찍찍
2021. 10. 22. 22:50
<이론 설명!!!!>
- 브라우저는 인간들이 쓰는 언어를 이해못한다.( 멍청함)
- 우리가 해야할일은 브라우저에게 콘텐츠가 무엇인지 알려줘야한다.
- HTML (뼈대)
: 마크업 언어
: 브라우저에게 웹사이트의 content가 무엇인지 , 어떻게 구성되어있는지 설명할때 사용
- Html은 오류가 없다
- 컨텐트가 무엇인지에 대해서 알려주는것
- CSS (근육)
: 디자인과 스타일을 위한 언어
: 브라우저에게 웹사이트가 어떻게 보여야하는지에 대해 알려줌
- 콘텐트들이 어떻게 보일까
- 자바스크립트 ( 뇌 )
: 웹사이트를 동적으로 만들어주는 프로그래밍 언어
- 폴더명은 항상 소문자!!
- 파일명도 항상 소문자!!
< 확장 프로그램 >
- Community Material Theme : 화면 배경
- Material Icon theme : 보이는 아이콘
- 태그( tag )
- Html은 오류가 없으나 브라우저나 이해하는 실제 태그를 넣으면 작동이 된다.
- 제대로 된 위치에 넣고 , 이 tag를 기억하면 브라우저는 지정한 태그에 맞춰 변경되어 보여준다.
- 리스트
- Ul : unordered list ( 순서가 없는 )
- Ol : ordered List ( 순서가 있는 )
- 확장 프로그램 : prettier
: 태그 실수 및 라인이 안맞는것을 자동으로 수정해주는 확장 프로그램
- 태그의 속성 ( attributes)
: 태그에 추가하는 부가적인 정보
: img 태그는 따로 닫는 태그가 없다 . 그 자체가 self-closing tag (자체 닫기 태그)
ex) a 태그를 사용할때는 href 라는 속성을 붙여주어 화면이동을 할수 있게 도와준다
ex) img 는 인터넷에 올려져있는 이미지 또는 로컬 이미지를 사용할 수 있다.
: 경로를 지정해주어야 한다.
- 링크를 만들기 위한 속성 : href , target
- 이미지 속성 : src
- Html을 구성하는 형태
: 첫번째는 무조건 <!DOCTYPE html>
- 브라우저에게 text 파일이 아니라 html 문서라고 알려주는 것
: 웹사이트의 구조는 두개의 파트로 구성
<head>
- 웹사이트의 환경설정을 해주는 곳
- 외부적으로 보여지지 않는 설정을 해줌
- 이 태그에 속해있는 모든 태그들은 화면에선 안보인다.
<body>
- 사용자가 볼 수 있는 content 를 보여줌
- 브라우저 화면상에 보여질 내용들은 전부 바디태그안에 있어야함.
!!! 출처 - 노마드 코더 , 코코아톡 html 파트 이론 설명
728x90
반응형