TIL01 - html&css

HTML

  • HTML은 웹페이지를 만들기 위한 언어이고, 웹페이지 구조를 잡을 수 있다.

  • HTML파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 생성.

  • elements로 구성되어있다.
    (HTML 요소는 대소문자를 구분하지 않는다.)

    HTML 요소(Element)구조


  1. 여는 태그: 요소의 이름과, 열고 닫는 꺽쇠 괄호<>로 구성
  2. 닫는 태그: 요소의 이름 앞에 슬래시(/)가 붙는다.
  3. 내용: 요소의 내용, 단순한 텍스트이다.
  4. 요소(Element): 위에 것을 통틀어 요소라고한다.

여는 태그만 존재하는 것

<img>,<br>

속성(attribute)

속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정 할 수 있다.
class, href, src, alt 등등

HTML 파일의 구조

<!doctype> -> HTML의 제일 첫 줄에 위치하는 선언문, HTML파일의 버전 알려줌.
<html> -> HTML elements(요소)들의 최상위
<head> -> 사이트의 제목, 설명, 부가 정보, 기술적내용 부분
</head>
<body> -> 화면에 보여질 각종 태그 위치.
</body>
</html>

중요 태그

1. ul, ol, li -> 목록을 만들 때 쓰이는 것
2. p, span -> 영역을 나타내는 태그
3. a -> 링크를 걸어주는 태그
4. div -> 가로로 된 하나의 영역을 만드는 태그
5. header, footer ->상단, 하단의 영역
6. button -> 버튼을 만들어 내는 태그
7. table, tr, th, td, tbody, thead -> 표를 만들 때 쓰이는 태그
8. 등등
<h1>~<h5> -> 주로 제목같은 텍스트에 사용.
			 숫자가 올라갈 수록, 글씨 작아짐.
<span> -> 주로 텍스트를 넣음, 줄바뀜 없고, 한 줄로 출력(inline-element)
<p> -> 문단을 통으로 넣을 때 사용.
<a> -> 클릭하면 화면이동, href속성(attribute)에 이동 주소 씀.
	   target="_blank"값은 클릭하면 새창로 뜨게 함.
<div> -> 섹션을 나눌 때 사용, 자체로 의미X
		 사용이유는 비슷한 부분 그룹, 디자인에 맞게 레이아웃 분리, class나 id라는 속성을 부여해 			css 스타일 입혀줄 수 있음.

HTML Attributes

a는 tag이름, href는 attribute(속성)이름

id

각 태그에 이름을 주는 속성
단 하나밖에 없어 대상을 식별하는 고유의 값이어야 한다.
따라서 id이름은 오직 하나만 가질 수 있다(중복X).
해당 요소에만 디자인을 적용할 때 사용.

class

**여러 태그에 중복된 이름을 부여.

여러 속성 추가

여러 속성을 주고 싶으면 한 칸 띄어쓰기 후 추가(순서 상관X)

Level 1 [자바스크립트] 나누어 떨어지는 숫자 배열
Pyhton 기초문법 정리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage